refactor: 다국어 처리 개선 및 코드 정리

app/pages/inspection/index.vue

@@ -1,7 +1,6 @@
 <template>
   <header class="header">
     <BlocksStoveGnbNew class="min-h-[48px]" />
-
   </header>
   <section class="inspection-section">
     <clientOnly>
@@ -31,8 +30,8 @@
             <!-- 온스토브 카드 -->
             <div class="inspection-card inspection-stove-card">
               <h3 :class="{ 'text-center': !launchingStatus }" class="card-title text-base md:text-lg">
-                <span v-if="!launchingStatus" v-dompurify-html="inspectionGameDuringMaintenance"></span>
-                <span v-else v-dompurify-html="orgInspectionDuringMaintenance"></span>
+                <span v-if="!launchingStatus" v-dompurify-html="tm('Inspection_Game_During_Maintenance')"></span>
+                <span v-else v-dompurify-html="tm('org_Inspection_During_Maintenance')"></span>
               </h3>
               <div class="button-group justify-center">
                   <!-- <a
@@ -105,9 +104,8 @@ import { globalDateFormat } from '@seed-next/date';
 import { useCheckGameStart } from '#layers/composables/useGameStart'
 
 const config = useRuntimeConfig()
-const rootPath = config.public.staticUrl
-const runType = config.public.runType
-const translationApi = `${rootPath}/${runType}/test`
+const dataResourcesUrl = config.public.dataResourcesUrl as string
+const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_inspection.json'
  
 // const isClient = import.meta.client
 
@@ -116,25 +114,16 @@ const { webInspectionData } = storeToRefs(inspectionStore)
 const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)
 
-
+// Multilingual
 const resultGetMultilingual = await useGetMultilingual({
-  baseApiUrl: translationApi,
-  fileName: 'test_common_inspection.json'
+  baseApiUrl: dataResourcesUrl,
+  fileName: multilingualFileName,
 })
-const i18n = useI18n({ 
-  useScope: 'local', 
-  messages: Object(resultGetMultilingual.value.multilingual)
+
+const { tm, locale }: any = useI18n({
+  useScope: 'local',
+  messages: Object(resultGetMultilingual?.value?.multilingual),
 })
-const { locale } = i18n
-
-// 타입 오류 해결: tm 함수를 string 반환 타입으로 단언
-const tm = ((key: string): string => {
-  return String((i18n.tm as any)(key) ?? '')
-}) as (key: string) => string
-
-// 타입 오류 해결을 위한 computed 속성
-const inspectionGameDuringMaintenance = computed(() => tm('Inspection_Game_During_Maintenance'))
-const orgInspectionDuringMaintenance = computed(() => tm('org_Inspection_During_Maintenance'))
 
 // locale에 따라 뒤에 KST 또는 UTC 추가 ko, en, zh-tw, ja
 // ko: (KST)
@@ -145,31 +134,23 @@ const orgInspectionDuringMaintenance = computed(() => tm('org_Inspection_During_
 const getLocaleTimezone = (localeType: string, region) => {
   const tsStartDate = webInspectionData.value?.ts_start_date || 0
   const tsEndDate = webInspectionData.value?.ts_end_date || 0
-  const currentLocale = localeType ? localeType : locale.value
-  switch (currentLocale) {
-    case 'ko':
-      return `
-        ${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || 'KR', {useFullDate: true})} (KST)<br>
-        ${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
-      `
-    case 'en':
-      return `${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (UTC)`
-    case 'zh-tw':
-      return `
-        ${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (台灣時間)<br>
-        ${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
-      `
-    case 'ja':
-      return `
-        ${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (JST)<br>
-        ${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
-      `
-    default:
-      return `
-        ${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (KST)<br>
-        ${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
-      `
+  const currentLocale = localeType || locale.value
+  
+  const timezoneMap: Record<string, string> = {
+    'ko': 'KST',
+    'zh-tw': '台灣時間',
+    'ja': 'JST',
   }
+  const timezone = timezoneMap[currentLocale] || 'KST'
+  const defaultRegion = currentLocale === 'ko' ? 'KR' : ''
+  
+  const formatDate = (date: Date, loc: string, reg: string) => 
+    `${globalDateFormat(date, loc, reg || defaultRegion, {useFullDate: true})}`
+  
+  const localTime = `${formatDate(new Date(tsStartDate), currentLocale, region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), currentLocale, region || '')} (${timezone})`
+  const utcTime = `${formatDate(new Date(tsStartDate), 'en', region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), 'en', region || '')} (UTC)`
+  
+  return currentLocale === 'en' ? utcTime : `${localTime}<br>${utcTime}`
 }
 
 const launchingStatus = computed(() => {
@@ -243,6 +224,7 @@ const handleGameStart = () => {
   validateLauncher()
 }
 
+
 definePageMeta({
   middleware: ['inspection'],
   layout: 'only-stove',