feat. i18n 설정

layers/components/atoms/LanguageSwitcher.vue

@@ -1,41 +1,52 @@
-<script setup lang="ts">
-const { locale } = useI18n();
-const switchLocalePath = useSwitchLocalePath();
-
-const selectedLocale = ref(locale.value);
-
-const switchLanguage = async () => {
-  const path = switchLocalePath(selectedLocale.value);
-  if (path) {
-    await navigateTo(path);
-  }
-  console.log("Language:", locale.value);
-};
-</script>
-
 <template>
-  <div class="language-switcher">
-    <select v-model="selectedLocale" @change="switchLanguage">
-      <option value="ko">한국어</option>
-      <option value="en">English</option>
+  <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>
 
-<style scoped>
-.language-switcher {
-  display: inline-block;
-}
+<script setup lang="ts">
+const gameDataStore = useGameDataStore();
 
-.language-switcher select {
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-}
+// 사용 가능한 언어 목록
+const availableLanguages = computed(() => {
+  return gameDataStore.gameData?.lang_codes || ["ko"];
+});
 
-.language-switcher select:hover {
-  border-color: #999;
-}
-</style>
+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>