Files
web-temp/layers/components/molecules/LanguageSwitcher.vue

53 lines
1.2 KiB
Vue

<template>
<div class="bg-white">
<select
v-model="selectedLocale"
class="text-black px-2 py-1 rounded-md"
@change="switchLanguage"
>
<option
v-for="localeOption in availableLanguages"
:key="localeOption"
:value="localeOption"
>
{{ localeOption }}
</option>
</select>
</div>
</template>
<script setup lang="ts">
const gameDataStore = useGameDataStore()
// 사용 가능한 언어 목록
const availableLanguages = computed(() => {
return gameDataStore.gameData?.lang_codes || ['ko']
})
const { locale } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const router = useRouter()
const selectedLocale = ref(locale.value)
// 언어 변경 함수
const switchLanguage = async () => {
console.log(
'🚀 ~ switchLanguage ~ selectedLocale.value:',
selectedLocale.value
)
if (selectedLocale.value) {
// URL 경로를 통해 언어 변경
const path = switchLocalePath(selectedLocale.value)
if (path) {
await router.push(path)
}
}
}
// locale이 변경될 때 selectedLocale도 동기화
watch(locale, newLocale => {
selectedLocale.value = newLocale
})
</script>