feat: 신규 Stove GNB 추가, 푸터 이미지 경로 함수 추가

2025-10-31 18:10:40 +09:00
parent 02ead16f2b
commit f16f3c880a
16 changed files with 291 additions and 45 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -11,7 +11,7 @@ STOVE_API_URL_SERVERL=https://i-api-dev.onstove.com
 STOVE_M_API_URL=https://maintenance.gate8.com

 # STOVE - GNB
-STOVE_GNB=https://js-cdn-dev.onstove.com/libs/common-gnb/latest/cp-header.js
+STOVE_GNB=https://js-cdn-dev.onstove.com/libs/common-gnb/latest/stove-gnb.js

 # STOVE - Client Download
 STOVE_LAUNCHER_SCRIPT=https://js-cdn.gate8.com/libs/stove-js-service/latest/launcher-pack.js
--- a/.env.live
+++ b/.env.live
@@ -11,7 +11,7 @@ STOVE_API_URL_SERVERL=https://i-api.onstove.com
 STOVE_M_API_URL=https://maintenance.onstove.com

 # STOVE - GNB
-STOVE_GNB=https://js-cdn.onstove.com/libs/common-gnb/latest/cp-header.js
+STOVE_GNB=https://js-cdn.onstove.com/libs/common-gnb/latest/stove-gnb.js

 # STOVE - Client Download
 STOVE_LAUNCHER_SCRIPT=https://js-cdn.onstove.com/libs/stove-js-service/latest/launcher-pack.js
--- a/.env.qa
+++ b/.env.qa
@@ -11,7 +11,7 @@ STOVE_API_URL_SERVERL=https://i-api.gate8.com
 STOVE_M_API_URL=https://maintenance.gate8.com

 # STOVE - GNB
-STOVE_GNB=https://js-cdn-qa.onstove.com/libs/common-gnb/latest/cp-header.js
+STOVE_GNB=https://js-cdn-qa.onstove.com/libs/common-gnb/latest/stove-gnb.js

 # STOVE - Client Download
 STOVE_LAUNCHER_SCRIPT=https://js-cdn.gate8.com/libs/stove-js-service/latest/launcher-pack.js
--- a/.env.sandbox
+++ b/.env.sandbox
@@ -11,7 +11,7 @@ STOVE_API_URL_SERVERL=https://i-api.gate8.com
 STOVE_M_API_URL=https://maintenance.gate8.com

 # STOVE - GNB
-STOVE_GNB=https://js-cdn.gate8.com/libs/common-gnb/latest/cp-header.js
+STOVE_GNB=https://js-cdn.gate8.com/libs/common-gnb/latest/stove-gnb.js

 # STOVE - Client Download
 STOVE_LAUNCHER_SCRIPT=https://js-cdn.gate8.com/libs/stove-js-service/latest/launcher-pack.js
--- a/app/pages/[d1]/index.vue
+++ b/app/pages/[d1]/index.vue
@@ -9,7 +9,6 @@ const currentLayout = computed(() => getLayoutType(pageData.value))

 definePageMeta({
  layout: false, // 동적 레이아웃을 위해 기본 레이아웃 비활성화
-  middleware: ['inspection']
 })
 </script>

--- a/app/pages/error.vue
+++ b/app/pages/error.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="min-h-screen flex flex-col bg-[#191919]">
+      <LayoutsStoveHeader />
+      <div class="flex-1 flex items-center justify-center bg-[#F0F0F0] pt-[223px] pb-[223px] px-5 max-[374px]:px-5 md:px-[530px]">
+        <div class="flex flex-col items-center gap-6 w-full max-w-[513px] max-[374px]:max-w-[335px] md:max-w-[860px] py-10 max-[374px]:gap-6 md:gap-6 md:py-20">
+          <!-- Stove Logo -->
+          <div class="flex items-center justify-center w-[123.2px] h-7">
+            <img 
+              src="/images/common/logo-stove.svg" 
+              alt="Stove" 
+              class="w-full h-auto"
+            />
+          </div>
+  
+          <!-- Error Icon and Text -->
+          <div class="flex flex-col items-center gap-4 w-full">
+            <!-- Error Icon -->
+            <div class="flex items-center justify-center">
+              <img 
+                src="/images/common/img_error.png" 
+                alt="Error" 
+                class="w-40 h-40 md:w-60 md:h-60"
+              />
+            </div>
+  
+            <!-- Error Text -->
+            <div class="flex flex-col items-center gap-1 w-full">
+              <h1 class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-xl md:text-2xl leading-[1.5] md:leading-[1.4166666666666667] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
+                {{ errorTitle }}
+              </h1>
+              <p class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-normal text-sm md:text-base leading-[1.7142857142857142] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0">
+                {{ errorDescription }}
+              </p>
+            </div>
+          </div>
+  
+          <!-- Home Button -->
+          <button 
+            class="flex items-center justify-center font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-sm leading-[1.4285714285714286em] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px"
+            @click="handleGoHome"
+          >
+            {{ homeButtonText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import type { NuxtError } from '#app'
+  import { useGameDataStore } from '#layers/stores/useGameDataStore'
+  import { useLocalePath } from '#i18n'
+  
+  const props = defineProps({
+    error: Object as () => NuxtError,
+  })
+  
+  const gameDataStore = useGameDataStore()
+  const { gameData } = storeToRefs(gameDataStore)
+  const localePath = useLocalePath()
+  
+  const gameName = computed(() => gameData.value?.game_name || '게임')
+  const homeButtonText = computed(() => `${gameName.value} 홈페이지 가기`)
+  
+  const handleGoHome = () => {
+    const homePath = localePath('/')
+    navigateTo(homePath)
+  }
+  
+  // 에러 상태 코드에 따른 메시지 설정
+  const errorTitle = computed(() => {
+    if (props.error?.statusCode === 404) {
+      return '페이지를 찾을 수 없어요.'
+    }
+    return '페이지를 찾을 수 없어요.'
+  })
+  
+  const errorDescription = computed(() => {
+    if (props.error?.statusCode === 404) {
+      return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
+    }
+    return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
+  })
+
+  definePageMeta({
+    layout: 'only-stove'
+  })
+
+
+</script>
+<style scoped>
+/* :deep(.game-wrapper) {
+  display: none !important;
+} */
+</style>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -7,13 +7,10 @@ const { pageData } = storeToRefs(pageDataStore)

 const currentLayout = computed(() => getLayoutType(pageData.value))

-console.log("🚀 ~ currentLayout:", currentLayout)

 definePageMeta({
  layout: false, // 동적 레이아웃을 위해 기본 레이아웃 비활성화
-  middleware: ['inspection']
 })
-
 </script>

 <template>
--- a/error.vue
+++ b/error.vue
@@ -1,25 +1,95 @@
+<template>
+  <div class="min-h-screen flex flex-col bg-[#191919]">
+    <LayoutsStoveHeader />
+    <div class="flex-1 flex items-center justify-center bg-[#F0F0F0] pt-[223px] pb-[223px] px-5 max-[374px]:px-5 md:px-[530px]">
+      <div class="flex flex-col items-center gap-6 w-full max-w-[513px] max-[374px]:max-w-[335px] md:max-w-[860px] py-10 max-[374px]:gap-6 md:gap-6 md:py-20">
+        <!-- Stove Logo -->
+        <div class="flex items-center justify-center w-[123.2px] h-7">
+          <img 
+            src="/images/common/logo-stove.svg" 
+            alt="Stove" 
+            class="w-full h-auto"
+          />
+        </div>
+
+        <!-- Error Icon and Text -->
+        <div class="flex flex-col items-center gap-4 w-full">
+          <!-- Error Icon -->
+          <div class="flex items-center justify-center">
+            <img 
+              src="/images/common/img_error.png" 
+              alt="Error" 
+              class="w-40 h-40 md:w-60 md:h-60"
+            />
+          </div>
+
+          <!-- Error Text -->
+          <div class="flex flex-col items-center gap-1 w-full">
+            <h1 class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-xl md:text-2xl leading-[1.5] md:leading-[1.4166666666666667] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
+              {{ errorTitle }}
+            </h1>
+            <p class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-normal text-sm md:text-base leading-[1.7142857142857142] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0">
+              {{ errorDescription }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Home Button -->
+        <button 
+          class="flex items-center justify-center font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-sm leading-[1.4285714285714286em] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px"
+          @click="handleGoHome"
+        >
+          {{ homeButtonText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import type { NuxtError } from '#app'
+import { useGameDataStore } from '#layers/stores/useGameDataStore'
+import { useLocalePath } from '#i18n'

 const props = defineProps({
  error: Object as () => NuxtError,
 })

-const handleError = () => clearError({ redirect: '/' })
-</script>
+const gameDataStore = useGameDataStore()
+const { gameData } = storeToRefs(gameDataStore)
+const localePath = useLocalePath()

-<template>
-  <div>
-    <h2>{{ error?.statusCode }}</h2>
-    <p class="text-red-500">{{ error?.statusMessage }}</p>
-    <button class="bg-blue-500 text-white p-2 rounded-md" @click="handleError">
-      Clear errors
-    </button>
-  </div>
-</template>
+const gameName = computed(() => gameData.value?.game_name || '게임')
+const homeButtonText = computed(() => `${gameName.value} 홈페이지 가기`)

-<style scoped>
-.error {
-  @apply text-red-500;
+const handleGoHome = () => {
+  const homePath = localePath('/')
+  navigateTo(homePath)
 }
-</style>
+
+// 에러 상태 코드에 따른 메시지 설정
+const errorTitle = computed(() => {
+  if (props.error?.statusCode === 404) {
+    return '페이지를 찾을 수 없어요.'
+  }
+  return '페이지를 찾을 수 없어요.'
+})
+
+const errorDescription = computed(() => {
+  if (props.error?.statusCode === 404) {
+    return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
+  }
+  return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
+})
+
+definePageMeta({
+  layout: 'only-stove'
+})
+
+
+</script>
+<style scoped>
+/* :deep(.game-wrapper) {
+display: none !important;
+} */
+</style>
--- a/layers/components/blocks/StoveGnbNew.vue
+++ b/layers/components/blocks/StoveGnbNew.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="stove-wrapper" class="relative z-[5]" />
+</template>
+<script setup lang="ts">
+import type {
+  GameDataValue,
+} from '#layers/types/api/gameData'
+let mountedInstance: any = null
+
+onMounted(() => {
+const gameDataStore = useGameDataStore()
+const gameData = gameDataStore.gameData as GameDataValue
+const langCodes = gameData?.lang_codes
+const defaultLangCode = gameData?.default_lang_code
+const gnbData = gameData?.stove_gnb_json
+
+const currentDomain = window.location.protocol + '//' + window.location.hostname;
+if (typeof window !== 'undefined' && (window as any).StoveGnb) {
+    mountedInstance = (window as any).StoveGnb.mount('#stove-wrapper', {
+        logArea: currentDomain,
+        useLanguageCodeFromPath: true,
+        serviceTitle: {
+            pc: '',
+            mobile: ''
+        },
+        widget: {
+            notification: true,
+            stoveDownload: true,
+            languageSelect: false,
+            themeSelect: false,
+            stoveMenu: {
+                active: false,
+                mobile: true
+            },
+        },
+        global: {
+            languageCoverages: langCodes,
+            defaultSelectedLanguage: defaultLangCode || 'en',
+        },
+        loginMethod: {
+            redirectCurrentPage: true,
+        },
+        mode: {
+            theme: {
+                default: gnbData?.skin_type === 'gnb-dark-mini' ? 'dark' : 'light',
+                support: ['dark', 'light'],
+            },
+            mini: true,
+            fixed:false,
+        },
+    })
+}
+})
+
+onBeforeUnmount(() => {
+  if (mountedInstance && typeof mountedInstance.destroy === 'function') {
+    mountedInstance.destroy()
+  }
+  mountedInstance = null
+})
+</script>
--- a/layers/components/layouts/Footer.vue
+++ b/layers/components/layouts/Footer.vue
@@ -56,7 +56,7 @@
                <div class="space-y-2">
                  <div class="flex flex-start border-b border-white/10 pb-2">
                    <span class="text-white text-sm flex-1">{{ footerAgeRatingInfo[0] }}</span>
-                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.company_name }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.title }}</span>
                  </div>
                  <div class="flex flex-start border-b border-white/10 pb-2">
                    <span class="text-white text-sm flex-1">{{ footerAgeRatingInfo[1] }}</span>
@@ -114,14 +114,14 @@
        </a>
        <a
          v-if="setDevCi.dev_ci_yn"
-          :href="footerData.use_dev_ci_url"
+          :href="footerData.use_dev_ci_url ? setDevCi.dev_ci_img_path : '#'"
          target="_blank"
          class="nx3 ml-2.5 md:ml-4"
        >
          <img
            :src="`${staticUrl}${setDevCi.dev_ci_img_path}`"
            alt="CI"
-            class="w-auto h-auto"
+            class="w-auto h-[24px]"
          />
        </a>
      </div>
@@ -158,8 +158,7 @@ const { tm } = useI18n({

 const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)
-
-const path = ref<string>(`${staticUrl}/local/template/${gameData.value.s3_folder_name}`)
+// const path = ref<string>(`${staticUrl}/local/template/${gameData.value.s3_folder_name}`)

 // 공통다국어 data
 const footerLinks = computed((): FooterMenuItem[] => {
@@ -179,17 +178,17 @@ const getGameRatingImage = computed((): string[] => {
  return contentInfo.map(item => {
    switch (item) {
      case '12':
-        return `${path.value}/common/grades_age/Type12.svg`
+        return getImageHost('/images/common/grades_age/Type12.svg', { imageType: 'common' })
      case '15':
-        return `${path.value}/common/grades_age/Type15.svg`
+        return getImageHost('/images/common/grades_age/Type15.svg', { imageType: 'common' })
      case '19':
-        return `${path.value}/common/grades_age/Type19.svg`
+        return getImageHost('/images/common/grades_age/Type19.svg', { imageType: 'common' })
      case 'all':
-        return `${path.value}/common/grades_age/TypeAll.svg`
+        return getImageHost('/images/common/grades_age/TypeAll.svg', { imageType: 'common' })
      case 'e':
-        return `${path.value}/common/grades_age/TypeExempt.svg`
+        return getImageHost('/images/common/grades_age/TypeExempt.svg', { imageType: 'common' })
      default:
-        return `${path.value}/common/grades_age/TypeTest.svg`
+        return getImageHost('/images/common/grades_age/TypeTest.svg', { imageType: 'common' })
    }
  })
 })
@@ -201,19 +200,19 @@ const getContentInfoImage = computed((): string[] => {
  return contentInfo.map(item => {
    switch (item) {
      case '1':
-        return `${path.value}/common/grades_use/Type-sexual.svg`
+        return getImageHost('/images/common/grades_use/Type-sexual.svg', { imageType: 'common' })
      case '2':
-        return `${path.value}/common/grades_use/Type-fear.svg`
+        return getImageHost('/images/common/grades_use/Type-fear.svg', { imageType: 'common' })
      case '3':
-        return `${path.value}/common/grades_use/Type-inapposite.svg`
+        return getImageHost('/images/common/grades_use/Type-inapposite.svg', { imageType: 'common' })
      case '4':
-        return `${path.value}/common/grades_use/Type-drug.svg`
+        return getImageHost('/images/common/grades_use/Type-drug.svg', { imageType: 'common' })
      case '5':
-        return `${path.value}/common/grades_use/Type-crime.svg`
+        return getImageHost('/images/common/grades_use/Type-crime.svg', { imageType: 'common' })
      case '6':
-        return `${path.value}/common/grades_use/Type-speculation.svg`
+        return getImageHost('/images/common/grades_use/Type-speculation.svg', { imageType: 'common' })
      case '7':
-        return `${path.value}/common/grades_use/Type-violence.svg`
+        return getImageHost('/images/common/grades_use/Type-violence.svg', { imageType: 'common' })
    }
  })
 })
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -171,7 +171,7 @@ onBeforeUnmount(() => {

 <template>
  <header class="header">
-    <BlocksStoveGnb class="min-h-[48px]" />
+    <BlocksStoveGnbNew class="h-[48px]" />

    <div class="game-wrapper" :class="{ 'is-fixed': isPassedStoveGnb }">
      <AtomsLocaleLink to="/brand" class="mx-auto md:hidden">
--- a/layers/components/layouts/StoveHeader.vue
+++ b/layers/components/layouts/StoveHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <header class="header">
+    <BlocksStoveGnbNew class="min-h-[48px]" />
+
+  </header>
+</template>
+
+<style scoped>
+.header {
+  @apply bg-theme-foreground text-theme-foreground-reversal relative z-[100];
+}
+
+</style>
+c
--- a/layers/layouts/inspection.vue
+++ b/layers/layouts/inspection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>

 <template>
-  <LayoutsHeader />
+  <LayoutsStoveHeader />
  <slot />
 </template>
--- a/layers/server/middleware/gameData.ts
+++ b/layers/server/middleware/gameData.ts
@@ -203,6 +203,7 @@ export default defineEventHandler(async event => {
      game_domain: event.context.gameDomain || '',
      lang_code: finalLocale,
    }
+    console.log("🚀 ~ apiUrl:", queryParams)
    const response = (await $fetch(apiUrl, {
      query: queryParams,
    })) as GameDataResponse | null
--- a/layers/types/Common.ts
+++ b/layers/types/Common.ts
@@ -37,6 +37,7 @@ interface FooterMenuItem {
 }

 interface GameRatingInfo {
+  title: string
  company_name: string
  rating_grade: string
  reg_no: string
@@ -47,8 +48,13 @@ interface GameRatingInfo {
 }

 interface FooterData {
+  use_game_rating: boolean
  game_rating_info: GameRatingInfo
-  use_dev_ci_url?: string
+  use_dev_ci_url?: boolean
+  dev_ci_url?: string
+  dev_ci_img_path?: string
+  fund_display_yn?: string
+  fund_display_url?: string
 }

 interface DevCiConfig {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,7 +112,7 @@ importers:
        specifier: ^3.4.17
        version: 3.4.17
      typescript:
-        specifier: ^5.3.3
+        specifier: ^5.5.0
        version: 5.9.2
      vue-tsc:
        specifier: ^3.0.7