From cf5055cc9626926136558165e156b4a861c6eaf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Tue, 2 Dec 2025 15:56:16 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=97=90=EB=9F=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD,=20=EC=96=B8=EC=96=B4=20name=20A?=
 =?UTF-8?q?PI=20=EB=B0=94=EB=A1=9C=EB=B3=B4=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/error.vue                                 |   2 +-
 error.vue                                     |   2 +-
 layers/components/blocks/LanguageSwitcher.vue | 129 +++++-------------
 3 files changed, 38 insertions(+), 95 deletions(-)

diff --git a/app/error.vue b/app/error.vue
index f92f7f0..2834068 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -70,7 +70,7 @@ interface ErrorProps {
 // Configuration
 const runtimeConfig = useRuntimeConfig()
 const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
-const multilingualFileName = 'STOVE_PUBTEMPLATE_common_error-message.json'
+const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_error.json'
 
 // Multilingual
 const resultGetMultilingual = await useGetMultilingual({
diff --git a/error.vue b/error.vue
index 40a5c2d..9ecb693 100644
--- a/error.vue
+++ b/error.vue
@@ -70,7 +70,7 @@ interface ErrorProps {
 // Configuration
 const runtimeConfig = useRuntimeConfig()
 const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
-const multilingualFileName = 'STOVE_PUBTEMPLATE_common_error-message.json'
+const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_error.json'
 
 // Multilingual
 const resultGetMultilingual = await useGetMultilingual({
diff --git a/layers/components/blocks/LanguageSwitcher.vue b/layers/components/blocks/LanguageSwitcher.vue
index c0c3de8..a2cf899 100644
--- a/layers/components/blocks/LanguageSwitcher.vue
+++ b/layers/components/blocks/LanguageSwitcher.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="select-language" :class="{ 'language-changing': isChanging }">
+  <div
+    class="flex items-center justify-center relative w-[180px] text-left text-xs text-[#ccc] transition-opacity duration-300"
+    :class="{ 'opacity-50 pointer-events-none': isChanging }"
+  >
     <button
       :disabled="isChanging"
       class="flex items-center gap-2 px-3 py-2 rounded-lg text-[#CCCCCC] transition-all duration-300 w-[180px] bg-[#292929] border border-[#595959]"
@@ -78,15 +81,21 @@
         />
       </svg>
     </button>
-    <div v-if="isDropdownOpen" class="dropdown-menu">
+    <div
+      v-if="isDropdownOpen"
+      class="absolute bottom-full mb-1 left-0 w-full bg-[#292929] border border-[#595959] rounded-lg p-2.5 text-xs text-[#ccc] z-[5]"
+    >
       <div
         v-for="localeItem in availableLanguages"
         :key="localeItem.code"
         class="dropdown-menu-item"
       >
         <button
-          class="dropdown-menu-item-button"
-          :class="{ current: localeItem.code === selectedLocale }"
+          class="flex items-center w-full h-10 gap-2 px-3 text-left bg-transparent border-none cursor-pointer transition-colors duration-200"
+          :class="{
+            'text-[#fc4420] font-medium': localeItem.code === selectedLocale,
+            'text-[#ccc]': localeItem.code !== selectedLocale,
+          }"
           @click="selectLanguage(localeItem.code)"
         >
           <svg
@@ -96,6 +105,10 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             class="transition-opacity duration-200"
+            :class="{
+              'opacity-100': localeItem.code === selectedLocale,
+              'opacity-0': localeItem.code !== selectedLocale,
+            }"
           >
             <path
               fill-rule="evenodd"
@@ -119,30 +132,29 @@ const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)
 // 사용 가능한 언어 목록
 const availableLanguages = computed(() => {
-  return (
-    gameData.value?.lang_codes?.map(localeCode => ({
-      code: localeCode,
-      name: getLanguageName(localeCode),
-    })) || [{ code: 'ko', name: '한국어' }]
+  const langCodes = gameData.value?.lang_codes || []
+  const allLanguages =
+    gameData.value?.globals?.map((item: any) => ({
+      code: item.lang_json?.code,
+      name: item.lang_json?.name,
+    })) || []
+
+  // lang_codes에 포함된 언어만 필터링
+  const filteredLanguages = allLanguages.filter(lang =>
+    langCodes.includes(lang.code)
   )
+
+  return filteredLanguages.length > 0
+    ? filteredLanguages
+    : [{ code: 'ko', name: '한국어' }]
 })
 
-// 언어 코드를 한국어 이름으로 변환하는 함수
+// 언어 코드를 이름으로 변환하는 함수
 const getLanguageName = (localeCode: string) => {
-  const languageNames: Record<string, string> = {
-    ko: '한국어',
-    en: 'English',
-    ja: '日本語',
-    'zh-cn': '简体中文',
-    'zh-tw': '繁體中文',
-    es: 'Español',
-    fr: 'Français',
-    de: 'Deutsch',
-    pt: 'Português',
-    th: 'ไทย',
-    it: 'Italiano',
-  }
-  return languageNames[localeCode] || localeCode
+  const language = availableLanguages.value.find(
+    lang => lang.code === localeCode
+  )
+  return language?.name || localeCode
 }
 
 const { locale, setLocale } = useI18n()
@@ -220,17 +232,6 @@ watch(locale, newLocale => {
 })
 </script>
 <style scoped>
-.select-language {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 180px;
-  text-align: left;
-  font-size: 12px;
-  color: #ccc;
-}
-
 /* 페이지 전환 애니메이션 */
 .page-enter-active,
 .page-leave-active {
@@ -241,62 +242,4 @@ watch(locale, newLocale => {
 .page-leave-to {
   opacity: 0;
 }
-
-/* 언어 변경 시 전체 페이지 페이드 효과 */
-.language-changing {
-  opacity: 0.5;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-}
-
-/* 전체 페이지 전환 효과 */
-body {
-  transition: opacity 0.5s ease-out;
-}
-.select-language select {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 0 10px;
-  font-size: 16px;
-}
-.dropdown-menu {
-  position: absolute;
-  bottom: 100%;
-  margin-bottom: 4px;
-  left: 0;
-  width: 100%;
-  background-color: #292929;
-  border: 1px solid #595959;
-  border-radius: 8px;
-  padding: 10px;
-  font-size: 12px;
-  color: #ccc;
-  z-index: 5;
-}
-
-.dropdown-menu-item-button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  gap: 8px;
-  padding: 0 12px;
-  text-align: left;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-.dropdown-menu-item-button svg {
-  opacity: 0;
-}
-.dropdown-menu-item-button.current {
-  color: #fc4420;
-  font-weight: 500;
-}
-.dropdown-menu-item-button.current svg {
-  opacity: 1;
-}
 </style>