From 8e0cdc9478318a5803a0ac26eafbabf1c658d94f Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 22 Oct 2025 11:14:07 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20api=20=EB=B3=80=EA=B2=BD=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                              | 24 +++++++++------
 layers/components/atoms/Video.vue        |  4 +--
 layers/components/blocks/HybridLink.vue  | 39 ------------------------
 layers/components/blocks/StoveGnb.vue    |  2 +-
 layers/components/layouts/Header.vue     | 28 +++++++++--------
 layers/components/layouts/Main.vue       | 25 +++++++--------
 layers/components/widgets/ButtonList.vue |  2 +-
 layers/templates/GrDetail03/index.vue    |  2 ++
 layers/types/api/gameData.ts             | 37 +++++++++++++---------
 layers/types/api/pageData.ts             | 15 +++++----
 10 files changed, 80 insertions(+), 98 deletions(-)
 delete mode 100644 layers/components/blocks/HybridLink.vue

diff --git a/app/app.vue b/app/app.vue
index 8e15df4..5054488 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { useNuxtApp } from 'nuxt/app'
-import type { GameDataMetaTag, GameDataValue } from '#layers/types/api/gameData'
 import { getResolvedHost } from '#layers/utils/styleUtil'
+import type {
+  GameDataFavicon,
+  GameDataMetaTag,
+  GameDataValue,
+} from '#layers/types/api/gameData'
 
 const nuxtApp = useNuxtApp()
 
@@ -24,9 +28,9 @@ const getGameDataFromServer = (): GameDataValue | null => {
 
 // 통합 메타데이터 설정
 const setupAllMetaData = (data: GameDataValue) => {
-  const meta = data.meta_tag
-  const faviconPath = data.favicon_path
-  const theme = data.gnb.theme_type || 'dark'
+  const meta = data.meta_tag_json ?? ({} as GameDataMetaTag)
+  const faviconPath = data.favicon_json ?? ({} as GameDataFavicon)
+  const theme = data.gnb?.theme_type ?? 'dark'
 
   // 파비콘 링크 생성
   const faviconLinks = [
@@ -62,7 +66,7 @@ const setupAllMetaData = (data: GameDataValue) => {
   ]
 
   // 색상 CSS 변수 생성
-  const cssVariables = Object.entries(data.key_code_codes)
+  const cssVariables = Object.entries(data.key_color_json ?? {})
     .map(([key, value]) => `--${key}: ${value};`)
     .join('\n    ')
 
@@ -73,7 +77,7 @@ const setupAllMetaData = (data: GameDataValue) => {
   `
 
   useHead({
-    title: meta.page_title,
+    title: meta?.page_title ?? '',
     meta: [
       { name: 'description', content: meta.page_desc },
       { property: 'og:title', content: meta.og_title },
@@ -100,7 +104,7 @@ const setupAllMetaData = (data: GameDataValue) => {
 
 // 메타 데이터 설정
 const setupMetaData = (data: GameDataValue) => {
-  metaData.value = data.meta_tag
+  metaData.value = data.meta_tag_json
   setupAllMetaData(data)
 }
 
@@ -121,10 +125,10 @@ gtag('event', 'screen_view', {
 
 onMounted(() => {
   useEventListener('scroll', scrollStore.updateScrollValue)
-  if (gameData.value?.comm_img) {
-    gameData.value?.comm_img.groups.forEach(group => {
+  if (gameData.value?.comm_img_json) {
+    gameData.value?.comm_img_json.groups.forEach(group => {
       const cssVarName = `--${group.img_name}`
-      const imageUrl = `url(${getResolvedHost(group.img_path.comm)})`
+      const imageUrl = `url(${getResolvedHost(group.img_path?.comm ?? '')})`
 
       document.documentElement.style.setProperty(cssVarName, imageUrl)
     })
diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
index 589f246..2d60cc7 100644
--- a/layers/components/atoms/Video.vue
+++ b/layers/components/atoms/Video.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <video v-if="props.src">
-    <source :src="props.src" :type="`video/${props.type}`" v-bind="$attrs" />
+  <video v-if="props.src" v-bind="$attrs">
+    <source :src="props.src" :type="`video/${props.type}`" />
   </video>
 </template>
diff --git a/layers/components/blocks/HybridLink.vue b/layers/components/blocks/HybridLink.vue
deleted file mode 100644
index 892b7b5..0000000
--- a/layers/components/blocks/HybridLink.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { ClassType } from '#layers/types/Common'
-
-interface Props {
-  to: string
-  target?: string
-  class?: ClassType
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  target: '',
-  class: '',
-})
-
-const componentTag = computed(() => {
-  return props.target === '_blank' ? 'a' : 'AtomsLocaleLink'
-})
-
-const componentProps = computed(() => {
-  if (props.target === '_blank') {
-    return {
-      href: props.to,
-      target: props.target,
-      class: props.class,
-    }
-  }
-
-  return {
-    to: props.to,
-    class: props.class,
-  }
-})
-</script>
-
-<template>
-  <component :is="componentTag" v-bind="{ ...componentProps }">
-    <slot />
-  </component>
-</template>
diff --git a/layers/components/blocks/StoveGnb.vue b/layers/components/blocks/StoveGnb.vue
index 1ea552f..0351197 100644
--- a/layers/components/blocks/StoveGnb.vue
+++ b/layers/components/blocks/StoveGnb.vue
@@ -9,7 +9,7 @@ const { gameData } = useGameDataStore()
 
 const stoveInflowPath = runtimeConfig.public.stoveInflowPath
 const stoveGameNo = runtimeConfig.public.stoveGameNo
-const gnbData = gameData?.stove_gnb
+const gnbData = gameData?.stove_gnb_json
 
 const languageCodes = computed(() => {
   if (Array.isArray(availableLocales)) {
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 5ccb85d..24467ae 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
                       Object.keys(gnbData?.menus).length - overflowNam,
                 }"
               >
-                <BlocksHybridLink
+                <AtomsLocaleLink
                   :to="gnbItem.url_path"
                   :target="gnbItem.link_target"
                   :class="['nav-1depth', { active: isNavItemActive(gnbItem) }]"
@@ -211,7 +211,7 @@ onBeforeUnmount(() => {
                     v-if="gnbItem.children"
                     class="hidden md:block"
                   />
-                </BlocksHybridLink>
+                </AtomsLocaleLink>
                 <Transition name="fade">
                   <div v-if="gnbItem.children" class="nav-2depth">
                     <ul>
@@ -219,7 +219,7 @@ onBeforeUnmount(() => {
                         v-for="child in gnbItem.children"
                         :key="child.menu_name"
                       >
-                        <BlocksHybridLink
+                        <AtomsLocaleLink
                           :to="child.url_path"
                           :target="child.link_target"
                         >
@@ -227,7 +227,7 @@ onBeforeUnmount(() => {
                           <AtomsIconsWebLinkLine
                             v-if="child.link_target === '_blank'"
                           />
-                        </BlocksHybridLink>
+                        </AtomsLocaleLink>
                       </li>
                     </ul>
                   </div>
@@ -250,20 +250,20 @@ onBeforeUnmount(() => {
                         Object.keys(gnbData?.menus).length - overflowNam,
                     }"
                   >
-                    <BlocksHybridLink
+                    <AtomsLocaleLink
                       :to="gnbItem.url_path"
                       :target="gnbItem.link_target"
                       :class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
                     >
                       <span>{{ gnbItem.menu_name }}</span>
-                    </BlocksHybridLink>
+                    </AtomsLocaleLink>
                     <div v-if="gnbItem.children">
                       <ul>
                         <li
                           v-for="child in gnbItem.children"
                           :key="child.menu_name"
                         >
-                          <BlocksHybridLink
+                          <AtomsLocaleLink
                             :to="child.url_path"
                             :target="child.link_target"
                           >
@@ -271,7 +271,7 @@ onBeforeUnmount(() => {
                             <AtomsIconsWebLinkLine
                               v-if="child.link_target === '_blank'"
                             />
-                          </BlocksHybridLink>
+                          </AtomsLocaleLink>
                         </li>
                       </ul>
                     </div>
@@ -279,17 +279,19 @@ onBeforeUnmount(() => {
                 </div>
               </div>
             </div>
-            <div class="event">
+            <div v-if="gameData?.event_banner" class="event">
               <div class="nav-item">
-                <BlocksHybridLink
-                  :to="'/event'"
-                  :target="'_self'"
+                <AtomsLocaleLink
+                  :to="gameData.event_banner?.page_url"
+                  :target="
+                    gameData.event_banner?.link_type === 1 ? '_self' : '_blank'
+                  "
                   class="nav-1depth text-gradient-pink"
                 >
                   <AtomsIconsStarFill />
                   <span>이벤트</span>
                   <AtomsIconsStarFill />
-                </BlocksHybridLink>
+                </AtomsLocaleLink>
               </div>
             </div>
           </nav>
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 40932fd..80ab28c 100644
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -21,7 +21,8 @@ const shouldShowMetaTag = computed(() => props.pageData.meta_tag_type === 2)
 // 템플릿 표시 여부 확인
 const isTemplateVisible = (template: PageDataTemplate): boolean => {
   return Boolean(
-    template?.components && Object.keys(template.components).length > 0
+    template?.page_ver_tmpl_json &&
+      Object.keys(template?.page_ver_tmpl_json).length > 0
   )
 }
 
@@ -33,21 +34,21 @@ const visibleTemplates = computed(() =>
 // SEO 메타 태그 설정
 const setupSeoMeta = (metaTag: PageDataMetaTag) => {
   useSeoMeta({
-    title: metaTag.page_title ?? '',
-    description: metaTag.page_desc ?? '',
-    ogTitle: metaTag.og_title ?? '',
-    ogDescription: metaTag.og_desc ?? '',
-    ogImage: metaTag.og_image ?? '',
-    twitterTitle: metaTag.x_title ?? '',
-    twitterImage: metaTag.x_image ?? '',
-    twitterDescription: metaTag.x_desc ?? '',
+    title: metaTag?.page_title ?? '',
+    description: metaTag?.page_desc ?? '',
+    ogTitle: metaTag?.og_title ?? '',
+    ogDescription: metaTag?.og_desc ?? '',
+    ogImage: metaTag?.og_image ?? '',
+    twitterTitle: metaTag?.x_title ?? '',
+    twitterImage: metaTag?.x_image ?? '',
+    twitterDescription: metaTag?.x_desc ?? '',
   })
 }
 
 // 메타 태그 설정 감시
 watchEffect(() => {
-  if (shouldShowMetaTag.value && props.pageData.meta_tag) {
-    setupSeoMeta(props.pageData.meta_tag)
+  if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) {
+    setupSeoMeta(props.pageData?.meta_tag_json)
   }
 })
 </script>
@@ -60,7 +61,7 @@ watchEffect(() => {
     >
       <component
         :is="getTemplateComponent(template.template_code)"
-        :components="template.components"
+        :components="template.page_ver_tmpl_json"
         :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
       />
     </template>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index 191aaec..3da173c 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -68,7 +68,7 @@ const handleButtonClick = (
 
   const marketType = btnInfo?.detail?.market_type
   if (marketType) {
-    const url = gameData?.market[marketType]?.url
+    const url = gameData?.market_json[marketType]?.url
     window.open(url, '_blank')
     return
   }
diff --git a/layers/templates/GrDetail03/index.vue b/layers/templates/GrDetail03/index.vue
index e150beb..fcc9012 100644
--- a/layers/templates/GrDetail03/index.vue
+++ b/layers/templates/GrDetail03/index.vue
@@ -6,6 +6,7 @@ import {
   getComponentGroup,
   hasComponentGroup,
 } from '#layers/utils/dataUtil'
+import { getResponsiveSrc } from '#layers/utils/styleUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
 import type {
   PageDataTemplateComponents,
@@ -88,6 +89,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
             class="mt-2 text-left md:mt-5"
           />
           <AtomsVideo
+            v-if="hasComponentGroup(item, 'video')"
             :src="currentVideoSrc(item)"
             :autoplay="currentSlideIndex === index"
             muted
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index e073d59..7f9d0de 100644
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -22,9 +22,9 @@ export interface GameDataValue {
   ga_code: string
   design_theme: number
   lang_codes: string[]
-  key_code_codes: GameDataKeyCodeCodes
+  key_color_json: GameDataKeyColors
   use_game_font: boolean
-  comm_sns_bg_color_code: string
+  comm_sns_bg_color_json: string
   comm_multilang_filename: string
   footer_dev_ci_img_yn: boolean
   footer_dev_ci_img_path: string
@@ -34,19 +34,20 @@ export interface GameDataValue {
   gnb: GameDataGnb
   intro: GameDataIntro
   inspection: Record<string, any>
-  stove_gnb: GameDataStoveGnb
-  favicon_path: GameDataFaviconPath
-  meta_tag: GameDataMetaTag
-  sns: GameDataSns
-  footer: string // JSON 문자열로 변경
-  comm_img: GameDataCommImg
-  market: Record<string, { url: string }>
+  stove_gnb_json: GameDataStoveGnb
+  favicon_json: GameDataFavicon
+  meta_tag_json: GameDataMetaTag
+  sns_json: GameDataSns
+  footer_json: string // JSON 문자열로 변경
+  comm_img_json: GameDataCommImg
+  market_json: Record<string, { url: string }>
+  event_banner: GameDataEventBanner
 }
 
 // ===== 세부 데이터 타입들 =====
 
 // 키 코드 코드 타입
-export interface GameDataKeyCodeCodes {
+export interface GameDataKeyColors {
   primary: string
   'text-primary': string
   'text-secondary': string
@@ -62,7 +63,7 @@ export interface GameDataGameFont {
 }
 
 // 파비콘 경로 타입
-export interface GameDataFaviconPath {
+export interface GameDataFavicon {
   '16_16': string
   '32_32': string
   '72_72': string
@@ -116,7 +117,7 @@ export interface GameDataCommImg {
 // Global 설정 타입
 export interface GameDataGlobal {
   system_font: string // JSON 문자열로 변경
-  lang: string // JSON 문자열로 변경
+  lang_json: string // JSON 문자열로 변경
 }
 
 // 트래킹 타입
@@ -129,7 +130,7 @@ export interface GameDataTracking {
 // 버튼 타입
 export interface GameDataButton {
   depth_type: number
-  button: string // JSON 문자열로 변경
+  button_json: string // JSON 문자열로 변경
 }
 
 export type GameDataMenuChildren = Record<string, GameDataMenu>
@@ -144,7 +145,7 @@ export interface GameDataMenu {
   url_path: string
   link_target: string
   children: GameDataMenuChildren
-  tracking: string | GameDataTracking // JSON 문자열 또는 객체로 변경
+  tracking_json: string | GameDataTracking // JSON 문자열 또는 객체로 변경
 }
 
 // GNB 설정 타입
@@ -180,6 +181,14 @@ export interface GameDataStoveGnb {
   stove_install_button_visible: string
 }
 
+// 이벤트 배너 타입
+export interface GameDataEventBanner {
+  link_type: 1 | 2
+  page_url: string
+  page_url_type: 1 | 2
+  promotion_name: string
+}
+
 // ===== API 관련 타입들 =====
 
 // API 에러 응답 타입
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index 819a366..4b62ab4 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -36,7 +36,7 @@ export interface PageDataValue {
   lnb_text_color_code_active: string
   lnb_text_color_code_deactive: string
   lnb_menus: PageDataLnbMenu[]
-  meta_tag: PageDataMetaTag
+  meta_tag_json: PageDataMetaTag
   templates: Record<string, PageDataTemplate>
 }
 
@@ -50,7 +50,7 @@ export interface PageDataLnbMenu {
   menu_name: string
   target_type: number
   page_ver_tmpl_name_en: string
-  // tracking: Record<string, PageDataTracking>
+  tracking_json: Record<string, PageDataTracking>
 }
 
 // 메타 태그 타입
@@ -121,16 +121,19 @@ export type PageDataTemplateComponentSet = PageDataTemplateComponent & {
 // 템플릿 컴포넌트 타입 - 세 가지 패턴
 export type PageDataTemplateComponents =
   | PageDataTemplateComponent // 단일 컴포넌트 패턴
-  | { group_sets: PageDataTemplateComponentSet[], arrow: PageDataArrowComponent } // 그룹 세트 패턴
-  
+  | {
+      group_sets: PageDataTemplateComponentSet[]
+      arrow: PageDataArrowComponent
+    } // 그룹 세트 패턴
+
 // 템플릿 타입
 export interface PageDataTemplate {
   page_ver_tmpl_seq: number
-  tmpl_sort_order: number
   page_ver_tmpl_name: string
   page_ver_tmpl_name_en: string
+  page_ver_tmpl_json: PageDataTemplateComponents
+  tmpl_sort_order: number
   template_code: string
-  components: PageDataTemplateComponents
 }
 
 // ===== API 관련 타입들 =====