74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<template>
|
|
<div class="bg-white">
|
|
<select
|
|
v-model="selectedLocale"
|
|
:disabled="isChanging"
|
|
class="text-black px-2 py-1 rounded-md"
|
|
:class="{ 'opacity-50 cursor-not-allowed': isChanging }"
|
|
@change="switchLanguage"
|
|
>
|
|
<option
|
|
v-for="localeOption in availableLanguages"
|
|
:key="localeOption"
|
|
:value="localeOption"
|
|
>
|
|
{{ localeOption }}
|
|
</option>
|
|
</select>
|
|
<span v-if="isChanging" class="ml-2 text-sm text-gray-500">
|
|
변경 중...
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const gameDataStore = useGameDataStore()
|
|
|
|
// 사용 가능한 언어 목록
|
|
const availableLanguages = computed(() => {
|
|
return gameDataStore.gameData?.lang_codes || ['ko']
|
|
})
|
|
|
|
const { locale, setLocale } = useI18n()
|
|
const switchLocalePath = useSwitchLocalePath()
|
|
const router = useRouter()
|
|
const pageDataStore = usePageDataStore()
|
|
|
|
const selectedLocale = ref(locale.value)
|
|
const isChanging = ref(false)
|
|
|
|
// 언어 변경 함수 (CSR 방식)
|
|
const switchLanguage = async () => {
|
|
if (!selectedLocale.value || isChanging.value) return
|
|
|
|
isChanging.value = true
|
|
|
|
try {
|
|
// URL 경로를 통해 언어 변경
|
|
const path = switchLocalePath(selectedLocale.value)
|
|
if (path) {
|
|
// 페이지 데이터 초기화 (새로운 언어로 다시 로드되도록)
|
|
pageDataStore.clearPageData()
|
|
|
|
// 언어 변경 및 라우팅
|
|
await setLocale(selectedLocale.value)
|
|
// await router.push(path)
|
|
|
|
// 페이지 새로고침을 통해 데이터 재로드 보장
|
|
await nextTick()
|
|
window.location.reload()
|
|
}
|
|
} catch {
|
|
// 오류 발생 시 이전 언어로 복원
|
|
selectedLocale.value = locale.value
|
|
} finally {
|
|
isChanging.value = false
|
|
}
|
|
}
|
|
|
|
// locale이 변경될 때 selectedLocale도 동기화
|
|
watch(locale, newLocale => {
|
|
selectedLocale.value = newLocale
|
|
})
|
|
</script>
|