fix. config -> runtimeConfig 명칭 통일

2025-11-07 12:55:00 +09:00
parent 2e55cda20e
commit aafc3ae9b9
19 changed files with 590 additions and 384 deletions
--- a/app/pages/inspection/index.vue
+++ b/app/pages/inspection/index.vue
@@ -1,28 +1,39 @@
 <template>
  <header class="header">
    <BlocksStoveGnbNew class="min-h-[48px]" />
-
  </header>
  <section class="inspection-section">
    <clientOnly>
      <!-- 로고 -->
      <div class="inspection-logo">
-        <img :src="logoImgUrl" alt="logo" class="w-full h-full object-contain" />
+        <img
+          :src="logoImgUrl"
+          alt="logo"
+          class="w-full h-full object-contain"
+        />
      </div>

      <div class="inspection-content">
        <!-- 점검 메시지 -->
-       
+
        <h1 class="inspection-title text-lg md:text-2xl">
          {{ tm('Inspection_Now_Maintenance') }}
        </h1>

        <div class="inspection-cards">
          <!-- 점검 시간 카드 -->
-          <div v-if="webInspectionData" class="inspection-card inspection-time-card">
-            <h2 class="card-title text-base text-md md:text-lg">{{ tm('Inspection_Maintenance_Time') }}</h2>
+          <div
+            v-if="webInspectionData"
+            class="inspection-card inspection-time-card"
+          >
+            <h2 class="card-title text-base text-md md:text-lg">
+              {{ tm('Inspection_Maintenance_Time') }}
+            </h2>
            <div class="inspection-time text-sm md:text-base font-medium">
-              <div v-dompurify-html="getLocaleTimezone('', '')" class="time-row"></div>
+              <div
+                v-dompurify-html="getLocaleTimezone('', '')"
+                class="time-row"
+              ></div>
            </div>
          </div>

@@ -30,12 +41,21 @@
          <div class="inspection-bottom-cards">
            <!-- 온스토브 카드 -->
            <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>
+              <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>
              </h3>
              <div class="button-group justify-center">
-                  <!-- <a
+                <!-- <a
                    :href="communityUrl"
                    target="_blank"
                    rel="noopener noreferrer"
@@ -46,49 +66,63 @@
                    <AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
                  </a> -->

-                  <AtomsButtonVariant
-                    type="custom"
-                    class="inspection-btn inspection-btn-community color-black text-sm md:text-base"
-                    :class="{ 'inspection-btn-outline flex-1' : launchingStatus }"
-                    @click="handleCommunityClick"
+                <AtomsButtonVariant
+                  type="custom"
+                  class="inspection-btn inspection-btn-community color-black text-sm md:text-base"
+                  :class="{ 'inspection-btn-outline flex-1': launchingStatus }"
+                  @click="handleCommunityClick"
+                >
+                  <span>{{ tm('Inspection_Community_Btn') }}</span>
+                  <AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
+                </AtomsButtonVariant>
+
+                <AtomsButtonVariant
+                  v-if="launchingStatus"
+                  type="custom"
+                  platform="pc"
+                  class="inspection-btn inspection-btn-primary w-auto color-black text-sm md:text-base flex-1"
+                  @click="handleGameStart"
+                >
+                  <span>게임 시작</span>
+
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
                  >
-                    <span>{{ tm('Inspection_Community_Btn') }}</span>
-                    <AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
-  
-                  </AtomsButtonVariant>
-                  
-                  <AtomsButtonVariant
-                    v-if="launchingStatus"
-                    type="custom"
-                    platform="pc"
-                    class="inspection-btn inspection-btn-primary w-auto color-black text-sm md:text-base flex-1"
-                    @click="handleGameStart"
-                  >
-                    <span>게임 시작</span>
-  
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3098 1.49172C8.86574 1.28049 7.15098 1.28055 5.70176 1.49167C3.50821 1.81315 1.81986 3.50786 1.49213 5.69168L1.4918 5.69391C1.38564 6.41904 1.33331 7.19181 1.33331 7.99998C1.33331 8.80815 1.3857 9.58136 1.49187 10.3065C1.81362 12.4934 3.50335 14.1805 5.69381 14.5079L5.69577 14.5082C6.42109 14.6143 7.19417 14.6666 7.99717 14.6666C8.80032 14.6666 9.57311 14.6143 10.3035 14.5083L10.3046 14.5082C12.4928 14.1865 14.1802 12.4917 14.5078 10.3083L14.5082 10.3061C14.6143 9.58092 14.6666 8.80815 14.6666 7.99998C14.6666 7.19527 14.6203 6.42148 14.5137 5.69347C14.1921 3.50726 12.4966 1.81316 10.3098 1.49172ZM6.38756 8.95267C6.39301 9.15365 6.40004 9.35195 6.40866 9.54742L6.40968 9.57054C6.41945 9.78867 6.43118 10.0033 6.44489 10.2141C6.45959 10.4433 6.68743 10.5836 6.88293 10.4823C7.22837 10.3029 7.58116 10.1096 7.9413 9.90379C8.20002 9.7541 8.46167 9.6013 8.72479 9.43914C8.98791 9.27854 9.24516 9.11482 9.49505 8.95111C9.84196 8.72502 10.1771 8.49581 10.4961 8.26817C10.6769 8.14031 10.6769 7.85965 10.4961 7.7318C10.1771 7.50415 9.84343 7.2765 9.49505 7.04886C9.24516 6.88514 8.98791 6.72298 8.72479 6.56082C8.46167 6.39866 8.20002 6.2443 7.9413 6.09618C7.58263 5.89036 7.22837 5.69702 6.88293 5.5177C6.68743 5.41636 6.45959 5.55669 6.44489 5.78589C6.43118 5.99671 6.41945 6.21129 6.40968 6.42943L6.40866 6.45254C6.40004 6.64801 6.39301 6.84631 6.38756 7.0473C6.37874 7.3607 6.37433 7.67722 6.37433 7.99998C6.37433 8.32274 6.37874 8.64082 6.38756 8.95267Z" fill="#332C2A"/>
-                    </svg>
-                  </AtomsButtonVariant>
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M10.3098 1.49172C8.86574 1.28049 7.15098 1.28055 5.70176 1.49167C3.50821 1.81315 1.81986 3.50786 1.49213 5.69168L1.4918 5.69391C1.38564 6.41904 1.33331 7.19181 1.33331 7.99998C1.33331 8.80815 1.3857 9.58136 1.49187 10.3065C1.81362 12.4934 3.50335 14.1805 5.69381 14.5079L5.69577 14.5082C6.42109 14.6143 7.19417 14.6666 7.99717 14.6666C8.80032 14.6666 9.57311 14.6143 10.3035 14.5083L10.3046 14.5082C12.4928 14.1865 14.1802 12.4917 14.5078 10.3083L14.5082 10.3061C14.6143 9.58092 14.6666 8.80815 14.6666 7.99998C14.6666 7.19527 14.6203 6.42148 14.5137 5.69347C14.1921 3.50726 12.4966 1.81316 10.3098 1.49172ZM6.38756 8.95267C6.39301 9.15365 6.40004 9.35195 6.40866 9.54742L6.40968 9.57054C6.41945 9.78867 6.43118 10.0033 6.44489 10.2141C6.45959 10.4433 6.68743 10.5836 6.88293 10.4823C7.22837 10.3029 7.58116 10.1096 7.9413 9.90379C8.20002 9.7541 8.46167 9.6013 8.72479 9.43914C8.98791 9.27854 9.24516 9.11482 9.49505 8.95111C9.84196 8.72502 10.1771 8.49581 10.4961 8.26817C10.6769 8.14031 10.6769 7.85965 10.4961 7.7318C10.1771 7.50415 9.84343 7.2765 9.49505 7.04886C9.24516 6.88514 8.98791 6.72298 8.72479 6.56082C8.46167 6.39866 8.20002 6.2443 7.9413 6.09618C7.58263 5.89036 7.22837 5.69702 6.88293 5.5177C6.68743 5.41636 6.45959 5.55669 6.44489 5.78589C6.43118 5.99671 6.41945 6.21129 6.40968 6.42943L6.40866 6.45254C6.40004 6.64801 6.39301 6.84631 6.38756 7.0473C6.37874 7.3607 6.37433 7.67722 6.37433 7.99998C6.37433 8.32274 6.37874 8.64082 6.38756 8.95267Z"
+                      fill="#332C2A"
+                    />
+                  </svg>
+                </AtomsButtonVariant>
              </div>
            </div>

            <!-- 다운로드 카드 -->
-            <div v-if="launchingStatus" class="inspection-card inspection-download-card">
+            <div
+              v-if="launchingStatus"
+              class="inspection-card inspection-download-card"
+            >
              <h3 class="card-title text-base md:text-lg">
                {{ tm('Inspection_Txt_Download') || '게임 다운로드' }}
              </h3>
              <div class="flex flex-row gap-3">
-                <AtomsButtonLauncher 
-                v-for="(btn, index) in enabledMarkets" :key="index"  
-                  :class="getButtonClass(btn.platform)" 
+                <AtomsButtonLauncher
+                  v-for="(btn, index) in enabledMarkets"
+                  :key="index"
+                  :class="getButtonClass(btn.platform)"
                  class="h-[48px]"
-                  :platform="btn.platform as any" 
-                  :url="btn.url" 
-                  :type="btn.platform === 'pc' ? 'default' : 'single'" 
+                  :platform="btn.platform as any"
+                  :url="btn.url"
+                  :type="btn.platform === 'pc' ? 'default' : 'single'"
                  variant="outlined"
                >
-                {{ getButtonText(btn.platform) }}
+                  {{ getButtonText(btn.platform) }}
                </AtomsButtonLauncher>
              </div>
            </div>
@@ -97,18 +131,17 @@
      </div>
    </clientOnly>
  </section>
-
 </template>

 <script setup lang="ts">
-import { globalDateFormat } from '@seed-next/date';
+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 runtimeConfig = useRuntimeConfig()
+const rootPath = runtimeConfig.public.staticUrl
+const runType = runtimeConfig.public.runType
 const translationApi = `${rootPath}/${runType}/test`
- 
+
 // const isClient = import.meta.client

 const inspectionStore = useInspectionStore()
@@ -116,14 +149,13 @@ const { webInspectionData } = storeToRefs(inspectionStore)
 const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)

-
 const resultGetMultilingual = await useGetMultilingual({
  baseApiUrl: translationApi,
-  fileName: 'test_common_inspection.json'
+  fileName: 'test_common_inspection.json',
 })
-const i18n = useI18n({ 
-  useScope: 'local', 
-  messages: Object(resultGetMultilingual.value.multilingual)
+const i18n = useI18n({
+  useScope: 'local',
+  messages: Object(resultGetMultilingual.value.multilingual),
 })
 const { locale } = i18n

@@ -133,8 +165,12 @@ const tm = ((key: string): string => {
 }) as (key: string) => string

 // 타입 오류 해결을 위한 computed 속성
-const inspectionGameDuringMaintenance = computed(() => tm('Inspection_Game_During_Maintenance'))
-const orgInspectionDuringMaintenance = computed(() => tm('org_Inspection_During_Maintenance'))
+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)
@@ -149,25 +185,25 @@ const getLocaleTimezone = (localeType: string, region) => {
  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)
+        ${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)`
+      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)
+        ${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)
+        ${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)
+        ${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)
      `
  }
 }
@@ -176,7 +212,6 @@ const launchingStatus = computed(() => {
  return webInspectionData.value?.launching_status
 })

-
 // const market_json = {
 //   pc: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 0 },
 //   app_store: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 0 },
@@ -185,21 +220,25 @@ const launchingStatus = computed(() => {

 //gameData.value.market_json 값 중 use_yn === 1 인 항목만 배열로 변환
 const enabledMarkets = computed(() => {
-  return Object.entries(gameData.value.market_json)
-  // return Object.entries(market_json)
-    .filter(([, info]: [string, any]) => info && info.use_yn === 1)
-    .map(([platform, info]: [string, any]) => ({ platform, url: info.url as string }))
+  return (
+    Object.entries(gameData.value.market_json)
+      // return Object.entries(market_json)
+      .filter(([, info]: [string, any]) => info && info.use_yn === 1)
+      .map(([platform, info]: [string, any]) => ({
+        platform,
+        url: info.url as string,
+      }))
+  )
 })

-
 const logoImgUrl = computed(() => {
-  const currentLocale = locale.value || 'ko'  
+  const currentLocale = locale.value || 'ko'
  const localeData = (webInspectionData.value as any)?.[currentLocale]
  return getImageHost(localeData.img_json.bi_large)
 })

 const communityUrl = computed(() => {
-  const currentLocale = locale.value || 'ko'  
+  const currentLocale = locale.value || 'ko'
  const localeData = (webInspectionData.value as any)?.[currentLocale]
  return localeData?.url_json?.community
 })
@@ -211,7 +250,7 @@ const handleCommunityClick = () => {
 const getButtonClass = (platform: string) => {
  // pc가 있으면 pc만 flex-1, 나머지는 기본
  const hasPc = enabledMarkets.value.some(btn => btn.platform === 'pc')
-  if(hasPc) {
+  if (hasPc) {
    return platform === 'pc' ? `flex-1 btn-platform-pc` : ``
  }
  //pc가 없으면서 하나만 있으면 ''
@@ -234,7 +273,7 @@ const getButtonText = (platform: string) => {
  if (platform === 'app_store') {
    return tm('platform_app_store')
  }
-  
+
  return ''
 }

@@ -246,15 +285,14 @@ const handleGameStart = () => {
 definePageMeta({
  middleware: ['inspection'],
  layout: 'only-stove',
-  showLoading: false
+  showLoading: false,
 })
-
 </script>

 <style scoped>
 .inspection-section {
  @apply flex flex-col items-center gap-10 px-10 py-[120px] pb-[200px] min-h-[calc(100vh-48px)];
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
 }

 .inspection-logo {
@@ -283,7 +321,6 @@ definePageMeta({

 .inspection-time-card {
  @apply flex flex-col items-center gap-4;
-
 }

 .card-title {
@@ -328,7 +365,6 @@ definePageMeta({
  @apply flex items-center justify-center gap-1 px-6 md:px-8 w-auto h-10 md:h-12 rounded-lg;
  cursor: pointer;
  transition: all 0.2s;
-  
 }

 .inspection-btn span {