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

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>

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' })
     }
   })
 })

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">

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

layers/layouts/onlyStove.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 
 <template>
-  <LayoutsHeader />
+  <LayoutsStoveHeader />
   <slot />
 </template>

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

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 {