Files
web-temp/layers/components/atoms/LanguageSwitcher.vue
2025-09-09 04:09:54 +00:00

53 lines
1.2 KiB
Vue

<template>
<div class="bg-white">
<select
class="text-black px-2 py-1 rounded-md"
v-model="selectedLocale"
@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>