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',

layers/components/layouts/Footer.vue

@@ -24,7 +24,7 @@
           </li>
           <li class="relative">
             <button class="text-[15px] text-white/50 hover:text-gray-600 transition-colors" @click="toggleAgeRating">
-              {{ tm('Footer_AgeRating') }}
+              <em v-dompurify-html="tm('Footer_AgeRating')"></em>
             </button>
             <div v-if="showAgeRating" class="game-rating-card absolute bottom-6 left-1 md:left-1/2 md:-translate-x-1/2 bg-[#383838] rounded-lg border border-white/30 w-[340px] mx-auto z-10">
               <!-- 헤더 -->
@@ -101,7 +101,7 @@
       </div>
 
       <div class="copyright-area mt-6 text-[13px] text-white/50 md:mt-4">
-        <span>{{ tm('Footer_Copyright') }}</span>
+        <span v-dompurify-html="tm('Footer_Copyright')"></span>
       </div>
 
       <div class="logo-area flex mt-6 md:mt-6">

layers/server/middleware/gameData.ts

@@ -70,6 +70,7 @@ const cache = new LRUCache({
  * @param baseDomain - 기본 도메인
  */
 function setFinalLocaleCookie(event: any, finalLocale: string, baseDomain: string) {
+  console.log("🚀 ~ 구어 구어 setFinalLocaleCookie:============", finalLocale)
   setCookie(event, 'LOCALE', finalLocale.toUpperCase(), {
     domain: baseDomain,
     path: '/',
@@ -211,10 +212,7 @@ export default defineEventHandler(async event => {
 
   // 캐시 키 생성
   const cacheKey = 'inspection'
-  // console.log("🚀 11111 ~ cacheKey:", cacheKey)
 
-
-  // gameData를 직접 가져와서 context에 저장 (API 호출 없이)
   try {
     
       // 2. 언어 코드 추출

layers/utils/localeUtil.ts

@@ -86,7 +86,7 @@ export const csrGetFinalLocale = (path = '', coveragesLocales: string[]) => {
  * @param {any} headers - 요청 헤더
  */
 export const ssrGetFinalLocale = (path = '', headers: any, coveragesLocales: string[], defaultLocale: string) => {
-  let finalLocale = defaultLocale || DEFAULT_LOCALE_CODE // 기본값 설정
+  let finalLocale // 기본값 설정
   try {
     // coveragesLocales가 빈 배열이거나 유효하지 않은 경우 기본 언어 반환
     if (!coveragesLocales || !Array.isArray(coveragesLocales) || coveragesLocales.length === 0) {