refactor: update translation API and improve footer component logic

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 config = useRuntimeConfig()
-  const rootPath = config.public.staticUrl
+  // const rootPath = config.public.staticUrl
-  const runType = config.public.runType
+  // 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 }

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 commonResourceUrl = `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common`
-const staticUrl = config.public.staticUrl
-
 // 공통다국어 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') {
+    switch (item) {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type12.svg`
+      case '12':
-    } else if (item === '15') {
+        return `${commonResourceUrl}/grades_age/Type12.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type15.svg`
+      case '15':
-    } else if (item === '19') {
+        return `${commonResourceUrl}/grades_age/Type15.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type19.svg`
+      case '19':
-    } else if (item === 'all') {
+        return `${commonResourceUrl}/grades_age/Type19.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeAll.svg`
+      case 'all':
-    } else if (item === 'e') {
+        return `${commonResourceUrl}/grades_age/TypeAll.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeExempt.svg`
+      case 'e':
-    } else {
+        return `${commonResourceUrl}/grades_age/TypeExempt.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeTest.svg`
+      default:
+        return `${commonResourceUrl}/grades_age/TypeTest.svg`
     }
   })
 })
@@ -190,20 +202,23 @@ const getContentInfoImage = computed(() => {
   contentInfo.pop()
 
   return contentInfo.map(item => {
-    if (item === '1') {
+    switch (item) {
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-sexual.svg`
+      case '1':
-    } else if (item === '2') {
+        return `${commonResourceUrl}/grades_use/Type-sexual.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-fear.svg`
+      case '2':
-    } else if (item === '3') {
+        return `${commonResourceUrl}/grades_use/Type-fear.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-inapposite.svg`
+      case '3':
-    } else if (item === '4') {
+        return `${commonResourceUrl}/grades_use/Type-inapposite.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-drug.svg`
+      case '4':
-    } else if (item === '5') {
+        return `${commonResourceUrl}/grades_use/Type-drug.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-crime.svg`
+      case '5':
-    } else if (item === '6') {
+        return `${commonResourceUrl}/grades_use/Type-crime.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-speculation.svg`
+      case '6':
-    } else if (item === '7') {
+        return `${commonResourceUrl}/grades_use/Type-speculation.svg`
-      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-violence.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>

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 []
+    }
+  }
+