fix. api 변경 관련 로직 변경

2025-10-22 11:14:07 +09:00
parent dc369e8065
commit 8e0cdc9478
10 changed files with 80 additions and 98 deletions
--- 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)
    })
--- 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>
--- a/layers/components/blocks/HybridLink.vue
+++ b/layers/components/blocks/HybridLink.vue
@@ -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>
--- 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)) {
--- 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>
--- 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>
--- 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
  }
--- 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
--- 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 에러 응답 타입
--- 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 관련 타입들 =====