fix: 에러 페이지 다국어 파일명 변경, 언어 name API 바로보도록 수정

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({

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({

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>