fix. gnb 게임 스타트

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>