web-temp/app/pages/test-lang.vue

<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">{{ t('messages.title_test_lang') }}</h1>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">{{ t('messages.welcome') }}</h2>
      <p>
        <strong>{{ t('messages.GameData_load_status') }}:</strong>
        <span :class="isGameDataLoaded ? 'text-green-600' : 'text-red-600'">
          {{ isGameDataLoaded ? '로드됨' : '로드되지 않음' }}
        </span>
      </p>
      <p>
        <strong>{{ t('messages.current_language') }}:</strong>
        {{ $i18n.locale }}
      </p>
      <p>
        <strong>{{ t('messages.default_language') }}:</strong>
        {{ gameDataStore.gameData?.default_lang_code || 'N/A' }}
      </p>
      <p>
        <strong>{{ t('messages.available_languages') }}:</strong>
        {{
          Array.isArray(availableLanguages)
            ? availableLanguages.join(', ')
            : availableLanguages
        }}
      </p>
      <p>
        <strong>{{ t('messages.current_url') }}:</strong>
        {{ $route.path }}
      </p>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">언어 전환:</h2>
      <LanguageSwitcher />
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">직접 링크 테스트:</h2>
      <div class="space-x-4">
        <NuxtLink
          v-for="lang in availableLanguages"
          :key="lang"
          :to="`/${lang}/test-lang`"
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          {{ lang.toUpperCase() }} 페이지로 이동
        </NuxtLink>
        <NuxtLink
          :to="`/ja/test-lang`"
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          ja 페이지로 이동
        </NuxtLink>
      </div>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">GameData 정보:</h2>
      <div v-if="isGameDataLoaded" class="space-y-2">
        <p>
          <strong>게임 ID:</strong>
          {{ gameDataStore.gameData?.game_id }}
        </p>
        <p>
          <strong>게임 코드:</strong>
          {{ gameDataStore.gameData?.game_code }}
        </p>
        <p>
          <strong>S3 폴더명:</strong>
          {{ gameDataStore.gameData?.s3_folder_name }}
        </p>
        <p>
          <strong>디자인 테마:</strong>
          {{ gameDataStore.gameData?.design_theme }}
        </p>
        <p>
          <strong>전체:</strong>
          {{
            Array.isArray(gameDataStore.gameData?.key_color_codes)
              ? gameDataStore.gameData?.key_color_codes.join(', ')
              : gameDataStore.gameData?.key_color_codes
          }}
        </p>
      </div>
      <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-80">{{
        gameDataInfo
      }}</pre>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold mb-2">동적 언어 설정 테스트:</h2>
      <div class="space-y-2">
        <p><strong>현재 i18n 설정:</strong></p>
        <ul class="list-disc list-inside ml-4">
          <li>
            사용 가능한 언어:
            {{ $i18n.availableLocales.map((l: any) => l.code || l).join(', ') }}
          </li>
          <li>기본 언어: {{ $i18n.defaultLocale }}</li>
          <li>현재 언어: {{ $i18n.locale }}</li>
        </ul>
        <p class="text-sm text-gray-600 mt-2">
          GameData에서 가져온 lang_codes가 동적으로 i18n 설정에 반영되었는지
          확인하세요.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useGameDataStore } from '#layers/stores/useGameDataStore'
import LanguageSwitcher from '#layers/components/blocks/LanguageSwitcher.vue'

const { t, locale } = useI18n()
const gameDataStore = useGameDataStore()

// 사용 가능한 언어 목록
const availableLanguages = computed(() => {
  return gameDataStore.gameData?.lang_codes || ['ko']
})

// GameData가 로드되었는지 확인
const isGameDataLoaded = computed(() => {
  return !!gameDataStore.gameData
})

// GameData 정보를 JSON으로 표시
const gameDataInfo = computed(() => {
  if (!gameDataStore.gameData) {
    return 'GameData가 로드되지 않았습니다.'
  }

  return JSON.stringify(
    {
      game_id: gameDataStore.gameData.game_id,
      game_code: gameDataStore.gameData.game_code,
      s3_folder_name: gameDataStore.gameData.s3_folder_name,
      default_lang_code: gameDataStore.gameData.default_lang_code || 'ko',
      lang_codes: gameDataStore.gameData.lang_codes,
      design_theme: gameDataStore.gameData.design_theme,
      key_color_codes: gameDataStore.gameData.key_color_codes,
      use_game_font: gameDataStore.gameData.use_game_font,
      ga_code: gameDataStore.gameData.ga_code,
      favicon_path: gameDataStore.gameData.favicon_path,
    },
    null,
    2
  )
})

// 페이지 메타 설정
useHead({
  title: `언어 테스트 - ${locale.value.toUpperCase()}`,
})
</script>