117 lines
4.3 KiB
Vue
117 lines
4.3 KiB
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.value }}</p>
|
|
<p><strong>{{ t('messages.default_language') }}:</strong> {{ gameDataStore.gameData?.default_lang_code || 'N/A' }}</p>
|
|
<p><strong>{{ t('messages.available_languages') }}:</strong> {{ availableLanguages.join(', ') }}</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> {{ gameDataStore.gameData?.key_color_codes?.join(', ') }}</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.value }}</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 LanguageSwitcher from '../../layers/components/atoms/LanguageSwitcher.vue';
|
|
|
|
const { t, locale, locales } = 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,
|
|
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>
|