From 641988b0335179c6110bab82cceac1490ae98d04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Mon, 27 Oct 2025 16:06:32 +0900
Subject: [PATCH] refactor: update translation API and improve footer component
 logic

---
 i18n/locales/ko.ts                   | 11 ++--
 layers/components/layouts/Footer.vue | 86 +++++++++++++++-------------
 layers/composables/useApiData.ts     | 22 +++++++
 3 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 layers/composables/useApiData.ts

diff --git a/i18n/locales/ko.ts b/i18n/locales/ko.ts
index e7f3c28..7074d95 100644
--- a/i18n/locales/ko.ts
+++ b/i18n/locales/ko.ts
@@ -1,10 +1,11 @@
 export default defineI18nLocale(async (locale: string) => {
   //https://static-pubcomm.gate8.com/dev/test/multilingual/test_common_template.json?20251021185116
-  const config = useRuntimeConfig()
-  const rootPath = config.public.staticUrl
-  const runType = config.public.runType
+  // const config = useRuntimeConfig()
+  // const rootPath = config.public.staticUrl
+  // const runType = config.public.runType
 
-  const translationApi = `${rootPath}/${runType}/test/multilingual/test_common_template.json`
+  // const translationApi = `${rootPath}/${runType}/test/multilingual/test_common_template.json`
+  const translationApi = `https://static-pubcomm.gate8.com/dev/test/multilingual/test_common_template.json`
 
   try {
     const { data } = await useFetch(translationApi, {
@@ -15,7 +16,7 @@ export default defineI18nLocale(async (locale: string) => {
     })
 
     // API 데이터에서 locale에 맞는 데이터를 추출
-    const apiData = data.value?.[locale] || {} // locale에 맞는 데이터가 없으면 빈 객체 반환
+    const apiData = data.value?.['ko'] || {} // locale에 맞는 데이터가 없으면 빈 객체 반환
 
     // API 데이터와 common.json 데이터를 병합 (common.json이 우선순위)
     const finalResult = { ...apiData }
diff --git a/layers/components/layouts/Footer.vue b/layers/components/layouts/Footer.vue
index 51c4c30..97cf995 100644
--- a/layers/components/layouts/Footer.vue
+++ b/layers/components/layouts/Footer.vue
@@ -144,20 +144,31 @@
 </template>
 
 <script setup lang="ts">
+const config = useRuntimeConfig()
+const staticUrl = config.public.staticUrl
+// const runType = config.public.runType
+const runType = config.public.runType
+const translationApi = `${runType}/test/multilingual/test_common_template.json`
 
-const { tm } = useI18n()
+const result = await useApiData({ baseApiUrl: staticUrl, url: translationApi })
+
+const { tm } = useI18n({
+  useScope: 'local',
+  messages: result
+})
+
+// const { tm } = useI18n()
 
 const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)
 
-const config = useRuntimeConfig()
-const staticUrl = config.public.staticUrl
-
+const commonResourceUrl = `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common`
 // 공통다국어 data
 const footerLinks = computed(() => {
   return tm('Footer_Menu') as unknown as any[]
 })
 const footerData = ref(gameData.value?.footer_json as any)
+
 const setDevCi = ref({
   dev_ci_yn: gameData.value?.footer_dev_ci_img_yn as boolean,
   dev_ci_img_path: gameData.value?.footer_dev_ci_img_path as string,
@@ -168,18 +179,19 @@ const getGameRatingImage = computed(() => {
   const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
   // rating_type 12, 15, 18, 19 에 따라 이미지명을 가져오고 이미지를 반환
   return contentInfo.map(item => {
-    if (item === '12') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type12.svg`
-    } else if (item === '15') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type15.svg`
-    } else if (item === '19') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type19.svg`
-    } else if (item === 'all') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeAll.svg`
-    } else if (item === 'e') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeExempt.svg`
-    } else {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeTest.svg`
+    switch (item) {
+      case '12':
+        return `${commonResourceUrl}/grades_age/Type12.svg`
+      case '15':
+        return `${commonResourceUrl}/grades_age/Type15.svg`
+      case '19':
+        return `${commonResourceUrl}/grades_age/Type19.svg`
+      case 'all':
+        return `${commonResourceUrl}/grades_age/TypeAll.svg`
+      case 'e':
+        return `${commonResourceUrl}/grades_age/TypeExempt.svg`
+      default:
+        return `${commonResourceUrl}/grades_age/TypeTest.svg`
     }
   })
 })
@@ -190,20 +202,23 @@ const getContentInfoImage = computed(() => {
   contentInfo.pop()
 
   return contentInfo.map(item => {
-    if (item === '1') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-sexual.svg`
-    } else if (item === '2') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-fear.svg`
-    } else if (item === '3') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-inapposite.svg`
-    } else if (item === '4') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-drug.svg`
-    } else if (item === '5') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-crime.svg`
-    } else if (item === '6') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-speculation.svg`
-    } else if (item === '7') {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-violence.svg`
+    switch (item) {
+      case '1':
+        return `${commonResourceUrl}/grades_use/Type-sexual.svg`
+      case '2':
+        return `${commonResourceUrl}/grades_use/Type-fear.svg`
+      case '3':
+        return `${commonResourceUrl}/grades_use/Type-inapposite.svg`
+      case '4':
+        return `${commonResourceUrl}/grades_use/Type-drug.svg`
+      case '5':
+        return `${commonResourceUrl}/grades_use/Type-crime.svg`
+      case '6':
+        return `${commonResourceUrl}/grades_use/Type-speculation.svg`
+      case '7':
+        return `${commonResourceUrl}/grades_use/Type-violence.svg`
+      default:
+        return ''
     }
   })
 })
@@ -216,16 +231,5 @@ const toggleAgeRating = () => {
 
 <style scoped>
 
-/* 태국어 폰트 크기 조정 */
-@media (max-width: 411px) {
-  :global(.lang-th) .menu-area li {
-    font-size: 10px;
-  }
-}
 
-@media (max-width: 321px) {
-  :global(.lang-th) .menu-area li {
-    font-size: 9px;
-  }
-}
 </style>
diff --git a/layers/composables/useApiData.ts b/layers/composables/useApiData.ts
new file mode 100644
index 0000000..cc5277c
--- /dev/null
+++ b/layers/composables/useApiData.ts
@@ -0,0 +1,22 @@
+
+interface ReqApiData {
+    baseApiUrl: string
+    url: string
+  }
+  
+  export const useApiData = async (req: ReqApiData): Promise<any> => {
+    const dataUrl = `${req.baseApiUrl}/${req.url}` // 정상 URL 경로
+    try {
+      const fetch = await $fetch<any>(dataUrl, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json;charset=UTF-8'
+        }
+      })
+      return fetch
+    } catch (error) {
+      console.log('error', error)
+      return []
+    }
+  }
+  
\ No newline at end of file