fix. gnb 게임 스타트

2025-10-29 20:02:03 +09:00
parent ffac118378
commit 8229235704
4 changed files with 106 additions and 23 deletions
--- a/layers/components/atoms/icons/LogoApple.vue
+++ b/layers/components/atoms/icons/LogoApple.vue
@@ -6,7 +6,7 @@ interface Props {

 withDefaults(defineProps<Props>(), {
  size: 20,
-  color: '#ffffff',
+  color: 'white',
 })
 </script>

@@ -15,14 +15,14 @@ withDefaults(defineProps<Props>(), {
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
-    viewBox="0 0 36 36"
+    viewBox="0 0 20 20"
    :fill="color"
  >
    <path
-      d="M22.0265 6.77515C22.9737 5.57867 23.6003 3.90666 23.4254 2.25C22.0702 2.31136 20.4381 3.20105 19.4618 4.39753C18.5874 5.45595 17.8297 7.15864 18.0337 8.78462C19.5346 8.90734 21.0793 7.97163 22.0265 6.77515Z"
+      d="M12.237 3.76397C12.7632 3.09926 13.1113 2.17037 13.0142 1.25C12.2613 1.28409 11.3545 1.77836 10.8121 2.44307C10.3264 3.03109 9.90542 3.97702 10.0188 4.88035C10.8526 4.94852 11.7108 4.42868 12.237 3.76397Z"
    />
    <path
-      d="M24.1784 9.38534L23.8464 9.35745C22.5604 9.25719 21.3837 9.62957 20.3897 10.0069L19.3814 10.3981C18.917 10.5722 18.5149 10.6972 18.1869 10.6972C17.8232 10.6972 17.3973 10.5679 16.9256 10.3916L15.7142 9.92036C14.9662 9.64193 14.1546 9.40031 13.3246 9.42125C10.8217 9.45315 8.526 10.8727 7.23469 13.1216C4.63612 17.6354 6.56512 24.3024 9.09991 27.9708L9.53965 28.5946L9.84388 29.0098L10.1578 29.4174C11.1678 30.689 12.3337 31.7497 13.755 31.703C14.523 31.6702 15.0938 31.4589 15.6575 31.2216L16.1434 31.0155C16.8008 30.7416 17.5202 30.4909 18.5855 30.4909C19.511 30.4909 20.1636 30.6964 20.7491 30.9348L21.4811 31.246C22.0469 31.481 22.6338 31.6749 23.4478 31.6552C25.1351 31.6284 26.305 30.3637 27.3637 28.8914L27.6635 28.466L28.1083 27.8128C28.254 27.5914 28.3903 27.3714 28.5175 27.1552L28.76 26.7285C28.7984 26.6584 28.8359 26.5889 28.8723 26.5201L29.0796 26.1159C29.1123 26.0501 29.144 25.9851 29.1747 25.921L29.3482 25.5483L29.4998 25.2015L29.6302 24.8848L29.7873 24.4749L29.9 24.155L30 23.8398L29.8843 23.7918L29.5934 23.6516L29.2859 23.4809L29.0483 23.3338L28.7907 23.1589C27.6392 22.3393 26.0767 20.7067 26.0464 17.8746C26.0241 15.2734 27.512 13.6173 28.4644 12.8256L28.6993 12.6386C28.736 12.6106 28.7714 12.5843 28.8052 12.5597L29.0641 12.3809L29.2348 12.2763C28.0657 10.5643 26.4786 9.86607 25.2717 9.57188L24.9218 9.49514L24.5996 9.43898L24.3097 9.39975C24.2644 9.39442 24.2206 9.38964 24.1784 9.38534Z"
+      d="M13.4325 5.21408L13.248 5.19858C12.5336 5.14288 11.8799 5.34976 11.3277 5.55942L10.7675 5.77674C10.5095 5.87346 10.2861 5.9429 10.1039 5.9429C9.90183 5.9429 9.66519 5.87108 9.40315 5.77314L8.73016 5.51131C8.31461 5.35663 7.86368 5.2224 7.40258 5.23403C6.01207 5.25175 4.73671 6.04037 4.01931 7.28977C2.57567 9.79743 3.64733 13.5013 5.05555 15.5393L5.29985 15.8859L5.46886 16.1166L5.64325 16.343C6.20438 17.0495 6.8521 17.6387 7.64171 17.6128C8.06839 17.5946 8.38546 17.4772 8.69864 17.3454L8.96859 17.2308C9.33383 17.0787 9.73346 16.9394 10.3253 16.9394C10.8395 16.9394 11.2021 17.0535 11.5273 17.186L11.934 17.3589C12.2483 17.4894 12.5744 17.5972 13.0266 17.5862C13.964 17.5713 14.6139 16.8687 15.2021 16.0508L15.3687 15.8144L15.6157 15.4515C15.6967 15.3285 15.7724 15.2063 15.8431 15.0862L15.9778 14.8492C15.9992 14.8102 16.02 14.7716 16.0402 14.7334L16.1554 14.5088C16.1735 14.4723 16.1911 14.4361 16.2082 14.4006L16.3046 14.1935L16.3888 14.0008L16.4613 13.8249L16.5485 13.5971L16.6111 13.4194L16.6667 13.2443L16.6024 13.2177L16.4408 13.1398L16.27 13.0449L16.138 12.9632L15.9949 12.8661C15.3552 12.4107 14.4871 11.5037 14.4702 9.93034C14.4579 8.4852 15.2845 7.56519 15.8136 7.12531L15.9441 7.02142C15.9645 7.00591 15.9841 6.9913 16.0029 6.97759L16.1467 6.87828L16.2416 6.82014C15.5921 5.86906 14.7104 5.48115 14.0399 5.31771L13.8455 5.27508L13.6665 5.24388L13.5054 5.22208C13.4803 5.21912 13.4559 5.21647 13.4325 5.21408Z"
    />
  </svg>
 </template>
--- a/layers/components/blocks/Button/Download.vue
+++ b/layers/components/blocks/Button/Download.vue
@@ -48,7 +48,6 @@ const componentTag = computed(() => {
 })
 const isDuplication = computed(() => props.type === 'duplication')
 const isSingle = computed(() => props.type === 'single')
-const isCustom = computed(() => props.type === 'custom')
 const platformIcon = computed(() => PLATFORM_ICON_MAP[props.platform])
 const duplicationImage = computed(() =>
  isDuplication.value ? DUP_IMAGE_MAP[props.platform] : ''
@@ -80,8 +79,8 @@ const handleClick = () => {
    return
  }

-  const url = gameData?.market_json[props.platform]?.url || ''
-  window.open(url, '_blank')
+  const url = gameData?.market_json[props.platform]?.url
+  if (url) window.open(url, '_blank')
 }
 </script>

@@ -103,7 +102,7 @@ const handleClick = () => {
    <span class="btn-content">
      <component
        :is="platformIcon"
-        v-if="!isDuplication && !isCustom"
+        v-if="!isDuplication"
        class="icon-platform"
      />
      <span class="text">
@@ -124,7 +123,7 @@ const handleClick = () => {

 <style scoped>
 .btn-base {
-  @apply overflow-hidden inline-block relative font-medium cursor-pointer
+  @apply overflow-hidden inline-flex relative font-medium cursor-pointer
    before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
 }
@@ -132,7 +131,7 @@ const handleClick = () => {
  @apply after:opacity-20;
 }
 .btn-content {
-  @apply relative flex items-center z-[1] text-left;
+  @apply relative flex items-center w-full text-left z-[1];
 }
 .icon-platform {
  @apply w-5 h-5 flex-shrink-0;
@@ -177,7 +176,7 @@ const handleClick = () => {

 /* duplication */
 .btn-base.duplication {
-  @apply items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat rounded-[4px]
+  @apply bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat rounded-[4px]
  before:rounded-[4px] after:rounded-[4px]
  pt-[22px] pl-[47px] pr-[22px] pb-[7px] text-[11px]
  md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:pb-[11px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { onClickOutside, useWindowSize } from '@vueuse/core'
 import { useGameDataStore } from '#layers/stores/useGameDataStore'
 import { useScrollStore } from '#layers/stores/useScrollStore'
-import { onClickOutside, useWindowSize } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
 import type {
  GameDataValue,
  GameDataMenu,
  GameDataMenuChildren,
+  GameDataResourceGroup,
+  GameDataResourceGroupSet,
 } from '#layers/types/api/gameData'

 const route = useRoute()
@@ -27,6 +28,12 @@ const startWidth = ref(0)
 const officialItemWidths = ref<number[]>([])
 const overflowNam = ref<number>(0)

+const gnb1depthButtonData = computed(
+  () => gnbData?.buttons[0]?.button_json as GameDataResourceGroup
+)
+const gnb2depthButtonData = computed(
+  () => gnbData?.buttons[1]?.button_json as GameDataResourceGroupSet
+)
 const currentPath = computed(() => formatPathWithoutLocale(route.path))

 const pathMatches = (base: string, current: string) => {
@@ -134,6 +141,10 @@ const stopClickOutside = onClickOutside(
  () => (isMenuOpen.value = false)
 )

+const has2depthButton = (gnbItem: GameDataMenu) => {
+  return gnbItem.children && Object.keys(gnbItem.children).length > 0
+}
+
 // 화면 크기 변경 시 오버플로우 재계산
 watch(width, () => {
  calculateOverflow()
@@ -208,12 +219,12 @@ onBeforeUnmount(() => {
                >
                  <span>{{ gnbItem.menu_name }}</span>
                  <AtomsIconsArrowDownFill
-                    v-if="gnbItem.children"
+                    v-if="has2depthButton(gnbItem)"
                    class="hidden md:block"
                  />
                </AtomsLocaleLink>
                <Transition name="fade">
-                  <div v-if="gnbItem.children" class="nav-2depth">
+                  <div v-if="has2depthButton(gnbItem)" class="nav-2depth">
                    <ul>
                      <li
                        v-for="child in gnbItem.children"
@@ -299,11 +310,31 @@ onBeforeUnmount(() => {
            <BlocksButtonDownload
              type="custom"
              platform="pc"
-              class="w-full md:w-auto"
-              style="font-size: 16px"
+              :background-color="
+                getColorCode({
+                  colorName: gnb1depthButtonData?.btn_info?.color_name_btn,
+                  colorCode: gnb1depthButtonData?.btn_info?.color_code_btn,
+                })
+              "
+              :text-color="
+                getColorCode({
+                  colorName: gnb1depthButtonData?.btn_info?.color_name_txt,
+                  colorCode: gnb1depthButtonData?.btn_info?.color_code_txt,
+                })
+              "
+              class="nav-1depth"
            >
-              게임 시작
+              {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
            </BlocksButtonDownload>
+            <div v-if="gnb2depthButtonData" class="nav-2depth">
+              <ul>
+                <li v-for="(item, key) in gnb2depthButtonData" :key="key">
+                  <BlocksButtonDownload type="custom" :platform="key">
+                    {{ item.btn_info?.txt_btn_name }}
+                  </BlocksButtonDownload>
+                </li>
+              </ul>
+            </div>
          </div>
          <button class="btn-close" @click="handleMenuClose">
            <AtomsIconsMenuCloseLine class="mx-auto" />
@@ -340,9 +371,6 @@ onBeforeUnmount(() => {
 .btn-close {
  @apply top-[11px] left-[12px];
 }
-.btn-start {
-  @apply relative mt-2 px-5 md:absolute md:right-0 md:mt-0 md:px-0;
-}

 .gnb-game {
  @apply absolute top-0 left-0 w-0 md:relative md:w-full md:!h-full;
@@ -445,4 +473,36 @@ onBeforeUnmount(() => {
 .is-hidden {
  @apply hidden;
 }
+
+.btn-start {
+  @apply relative mt-2 px-5 md:absolute md:top-[0] md:right-0 md:flex md:items-center md:h-full md:mt-0 md:px-0;
+}
+.btn-start:hover .nav-2depth {
+  @apply md:block;
+}
+.btn-start:deep(.nav-1depth) {
+  @apply w-full h-[48px] px-10 rounded-[8px] md:w-auto;
+}
+.btn-start:deep(.nav-1depth) .icon-platform {
+  @apply hidden;
+}
+.btn-start:deep(.nav-1depth) .btn-content {
+  @apply justify-center text-center;
+}
+.btn-start .nav-2depth {
+  @apply left-[unset] right-[-40px];
+}
+.btn-start .nav-2depth:deep(.btn-base) {
+  @apply w-full h-[48px] px-4 bg-transparent rounded-xl before:hidden after:hidden
+  hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10;
+}
+.btn-start .nav-2depth:deep(.btn-base) .text {
+  @apply ml-1.5 text-[15px] text-theme-foreground-reversal;
+}
+
+[data-theme='light'] {
+  .btn-start .nav-2depth:deep(.btn-base) .icon-platform {
+    @apply fill-[#1F1F1F];
+  }
+}
 </style>
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -121,6 +121,16 @@ export interface GameDataGlobal {
  lang_json: string // JSON 문자열로 변경
 }

+export interface GameDataResourceGroupBtnInfo {
+  color_code_btn: string
+  color_name_btn: string
+  color_code_txt: string
+  color_name_txt: string
+  disabled: boolean
+  txt_btn_name: string
+  detail: Record<string, any>
+}
+
 // 트래킹 타입
 export interface GameDataTracking {
  viewType: string
@@ -128,10 +138,24 @@ export interface GameDataTracking {
  clickSarea: string
 }

+export interface GameDataResourceGroup {
+  btn_info?: GameDataResourceGroupBtnInfo
+  tracking: GameDataTracking
+}
+
+type MarketPlatform = 'pc' | 'app_store' | 'google_play'
+export type GameDataResourceGroupSet = Partial<
+  Record<MarketPlatform, GameDataResourceGroup>
+>
+
+export type GameDataButtonJson =
+  | GameDataResourceGroup
+  | GameDataResourceGroupSet
+
 // 버튼 타입
 export interface GameDataButton {
-  depth_type: number
-  button_json: string // JSON 문자열로 변경
+  depth_type: 1 | 2
+  button_json: GameDataButtonJson
 }

 export type GameDataMenuChildren = Record<string, GameDataMenu>