refactor: 타입스크립트 수정, useCommonStore.ts 삭제

2025-11-03 18:21:47 +09:00
parent ad81d63a1f
commit b80c31d778
8 changed files with 34 additions and 135 deletions
--- a/app/pages/inspection/index.vue
+++ b/app/pages/inspection/index.vue
@@ -31,8 +31,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="tm('Inspection_Game_During_Maintenance')"></span>
-                <span v-else v-dompurify-html="tm('org_Inspection_During_Maintenance')"></span>
+                <span v-if="!launchingStatus" v-dompurify-html="inspectionGameDuringMaintenance"></span>
+                <span v-else v-dompurify-html="orgInspectionDuringMaintenance"></span>
              </h3>
              <div class="button-group justify-center">
                  <!-- <a
@@ -121,10 +121,20 @@ const resultGetMultilingual = await useGetMultilingual({
  baseApiUrl: translationApi,
  fileName: 'test_common_inspection.json'
 })
-const { tm, locale } = useI18n({ 
+const i18n = 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)
--- a/i18n/locales/ko.ts
+++ b/i18n/locales/ko.ts
@@ -1,11 +1,10 @@
 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 = `https://static-pubcomm.gate8.com/dev/test/multilingual/test_common_template.json`
+  const translationApi = `${rootPath}/${runType}/test/multilingual/test_common_template.json`

  try {
    const { data } = await useFetch(translationApi, {
@@ -16,7 +15,7 @@ export default defineI18nLocale(async (locale: string) => {
    })

    // API 데이터에서 locale에 맞는 데이터를 추출
-    const apiData = data.value?.['ko'] || {} // locale에 맞는 데이터가 없으면 빈 객체 반환
+    const apiData = data.value?.[locale] || {} // locale에 맞는 데이터가 없으면 빈 객체 반환

    // API 데이터와 common.json 데이터를 병합 (common.json이 우선순위)
    const finalResult = { ...apiData }
--- a/layers/composables/useTemplateRegistry.ts
+++ b/layers/composables/useTemplateRegistry.ts
@@ -9,7 +9,7 @@ import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
 import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
 import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
 import GrContents01 from '#layers/templates/GrContents01/index.vue'
-import FxVideo01 from '#layers/templates/FxVideo01/index.vue'
+// import FxVideo01 from '#layers/templates/FxVideo01/index.vue'
 import FxDownload01 from '#layers/templates/FxDownload01/index.vue'

 const templateRegistry = {
@@ -24,7 +24,7 @@ const templateRegistry = {
  GR_DETAIL_02: { component: GrDetail02 },
  GR_DETAIL_03: { component: GrDetail03 },
  GR_CONTENTS_01: { component: GrContents01 },
-  FX_VIDEO_01: { component: FxVideo01 },
+  // FX_VIDEO_01: { component: FxVideo01 },
  FX_DOWNLOAD_01: { component: FxDownload01 },
 } as const

--- a/layers/middleware/init.route.global.ts
+++ b/layers/middleware/init.route.global.ts
@@ -15,9 +15,14 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {

  //현재 url에서 게임 도메인만 추출
  const currentDomain = window.location.hostname;
+  const config = useRuntimeConfig()
  const req: GameDataRequest = {
    gameDomain: `${currentDomain}`,
    langCode: `${currentLangCode}`,
+    game_alias: '',
+    lang_code: `${currentLangCode}`,
+    baseApiUrl: `${config.public.stoveApiUrl}`,
+    gameId: '',
  }
  const { getGameDataExternal } = useGetGameDataExternal()
  await getGameDataExternal(req)
--- a/layers/server/api/clientIp.ts
+++ b/layers/server/api/clientIp.ts
@@ -3,7 +3,7 @@ import { getTrueClientIp } from '#layers/utils/apiUtil'
 export default defineEventHandler((event) => {
  let clientIP = ''
  try {
-    clientIP = getTrueClientIp(event.node.req)
+    clientIP = getTrueClientIp(event.node.req as any)
  } catch (e) {
    console.error('[Exception] /server/api/clientIp - Cannot Get Client IP: ', e)
  }
--- a/layers/stores/useCommonStore.ts
+++ b/layers/stores/useCommonStore.ts
@@ -1,115 +0,0 @@
-import { defineStore } from 'pinia'
-import { useWindowSize, useWindowScroll } from '@vueuse/core'
-
-interface DeviceMode {
-  mode: 'desktop' | 'mobile'
-  browser: 'chrome' | 'crawler' | 'edge' | 'firefox' | 'safari' | null
-  isDesktop: boolean
-  isMobile: boolean
-  isTablet: boolean
-  isIos: boolean
-  isAndroid: boolean
-  isDeviceReady: boolean
-}
-
-export const useCommonStore = defineStore('commonStore', () => {
-  const stoveGnbHeight = 48
-
-  const useDeviceData = useDevice()
-  const { width: windowWidth, height: windowHeight } = useWindowSize()
-  const { x: windowX, y: windowY } = useWindowScroll({ behavior: 'smooth' })
-
-  const device = ref<DeviceMode>({
-    mode: useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop',
-    browser: useDeviceData.isChrome
-      ? 'chrome'
-      : useDeviceData.isCrawler
-        ? 'crawler'
-        : useDeviceData.isEdge
-          ? 'edge'
-          : useDeviceData.isFirefox
-            ? 'firefox'
-            : useDeviceData.isSafari
-              ? 'safari'
-              : null,
-    isDesktop: useDeviceData.isDesktop,
-    isMobile: useDeviceData.isMobile,
-    isTablet: useDeviceData.isTablet,
-    isIos: useDeviceData.isIos,
-    isAndroid: useDeviceData.isAndroid,
-    isDeviceReady: false
-  })
-
-  const isPassedStoveGnb = ref(false)
-  const scrollFixedXValue = ref('0px')
-  const footerRef = ref<HTMLElement | null>(null)
-  const isLoading = ref<boolean>(true)
-  const isScrollLock = ref<boolean>(false)
-
-  const updateDeviceMode = () => {
-    device.value.mode = useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop'
-    device.value.browser = useDeviceData.isChrome
-      ? 'chrome'
-      : useDeviceData.isCrawler
-        ? 'crawler'
-        : useDeviceData.isEdge
-          ? 'edge'
-          : useDeviceData.isFirefox
-            ? 'firefox'
-            : useDeviceData.isSafari
-              ? 'safari'
-              : null
-    device.value.isDesktop = useDeviceData.isDesktop
-    device.value.isMobile = useDeviceData.isMobile
-    device.value.isTablet = useDeviceData.isTablet
-    device.value.isIos = useDeviceData.isIos
-    device.value.isAndroid = useDeviceData.isAndroid
-    device.value.isDeviceReady = true
-  }
-
-  const updateIsPassedStoveGnb = () => {
-    isPassedStoveGnb.value = windowY.value >= stoveGnbHeight
-
-    if (isPassedStoveGnb.value) {
-      scrollFixedXValue.value = `-${windowX.value}px`
-    } else {
-      scrollFixedXValue.value = '0px'
-    }
-  }
-
-  const isLoadingComplete = () => {
-    isLoading.value = false
-  }
-
-  const scrollLock = () => {
-    isScrollLock.value = !isScrollLock.value
-  }
-
-  const addScrollLock = () => {
-    isScrollLock.value = true
-  }
-
-  const removeScrollLock = () => {
-    isScrollLock.value = false
-  }
-
-  return {
-    device,
-    windowWidth,
-    windowHeight,
-    windowX,
-    windowY,
-    isPassedStoveGnb,
-    scrollFixedXValue,
-    footerRef,
-    isLoading,
-    isScrollLock,
-
-    updateDeviceMode,
-    updateIsPassedStoveGnb,
-    isLoadingComplete,
-    scrollLock,
-    addScrollLock,
-    removeScrollLock
-  }
-})
--- a/layers/utils/localeUtil.ts
+++ b/layers/utils/localeUtil.ts
@@ -116,13 +116,13 @@ export const ssrGetFinalLocale = (path = '', headers: any) => {
        const preferredLocale = getPreferredLanguage(acceptLanguage)
        if (preferredLocale) {
          // 선호 언어의 기본 코드와 일치하는 지원 로케일 찾기
-          const matchedLocale = coveragesLocales.find((locale: string) =>
-            preferredLocale.toLowerCase().startsWith(locale.toLowerCase())
-          )
-          if (matchedLocale) {
-            finalLocale = matchedLocale.toLowerCase()
-            return finalLocale
-          }
+          // const matchedLocale = coveragesLocales.find((locale: string) =>
+          //   preferredLocale.toLowerCase().startsWith(locale.toLowerCase())
+          // )
+          // if (matchedLocale) {
+          //   finalLocale = matchedLocale.toLowerCase()
+          //   return finalLocale
+          // }
        }
      }
    }
--- a/temp/middleware.ts
+++ b/temp/middleware.ts
@@ -218,7 +218,7 @@ export default defineEventHandler(async (event) => {

        // 점검 중일 때 IP 필터링 활성화 여부 확인
        if (inspectionData?.ip_filter_use_yn === 'Y') {
-          const clientIP = getTrueClientIp(event.node.req)
+          const clientIP = getTrueClientIp(event.node.req as any)

          // 허용된 IP 목록 확인
          if (!inspectionData?.ip_filter_list?.includes(clientIP)) {