fix. 임시 데이터 맞춰 수정

layers/components/layout/default/Header.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+import type { GameDataValue, GameDataGnb } from "#layers/types/api/gameData";
+
 const gameDataStore = useGameDataStore();
-const gameData = computed(() => gameDataStore.gameData);
+
+const gameData = gameDataStore.gameData as GameDataValue;
+const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
 </script>
 
 <template>
-  <header class="bg-black text-white relative z-50">
+  <header
+    class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
+  >
     <LayoutStoveGnb />
-    <div class="px-[40px] h-16 flex items-center">
+    <div data-name="header-game" class="px-[40px] h-16 flex items-center">
       <!-- 로고 -->
-      <div class="mr-[40px]">
+      <div data-name="header-logo" class="mr-[40px]">
         <img
           :src="gameData?.gnb?.bi_path"
           :alt="gameData?.game_name"
@@ -17,126 +23,64 @@ const gameData = computed(() => gameDataStore.gameData);
       </div>
 
       <!-- 메인 네비게이션 -->
-      <nav class="flex items-center space-x-[32px]">
-        <!-- 동적 메뉴 (비활성화) -->
-        <template v-if="false">
+      <nav data-name="header-nav" class="flex items-center space-x-[32px]">
+        <template v-if="gnbList">
           <div
-            v-for="menuList in gameData?.gnb?.menus"
-            :key="menuList.path_code"
+            v-for="(gnbItem, key) in gnbList"
+            :key="key"
+            class="relative group"
           >
-            <a
-              v-if="menuList.depth === 1"
-              :href="menuList.url_path"
-              :target="menuList.link_target"
-              class="hover:text-yellow-400 transition-colors"
+            <!-- Link 컴포넌트 사용 -->
+            <MoleculesLink
+              :to="gnbItem.url_path"
+              :target="gnbItem.link_target"
+              class="relative flex items-center h-[64px]"
             >
-              {{ menuList.menu_name }}
-            </a>
+              {{ gnbItem.menu_name }}
+              <AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
+              <span
+                class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
+              ></span>
+            </MoleculesLink>
+            <div
+              v-if="gnbItem.children"
+              class="absolute top-full left-[-28px] min-w-[190px] pt-[4px]"
+            >
+              <ul
+                class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
+              >
+                <li v-for="child in gnbItem.children" :key="child.menu_name">
+                  <!-- Link 컴포넌트 사용 -->
+                  <MoleculesLink
+                    :to="child.url_path"
+                    :target="child.link_target"
+                    class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
+                  >
+                    {{ child.menu_name }}
+                    <AtomsIconsLinkOut
+                      v-if="child.link_target === '_blank'"
+                      class="ml-1"
+                    />
+                  </MoleculesLink>
+                </li>
+              </ul>
+            </div>
           </div>
         </template>
 
-        <!-- 고객지원 (2단계 드롭다운) -->
-        <div class="relative group">
-          <button
-            class="flex items-center space-x-1 hover:text-yellow-400 transition-colors"
-          >
-            <span>고객지원</span>
-            <svg
-              class="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              ></path>
-            </svg>
-          </button>
-
-          <!-- 2단계 드롭다운 메뉴 -->
-          <div
-            class="absolute top-full left-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
-          >
-            <div class="py-2">
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-                >다운로드</a
-              >
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors bg-gray-700 text-yellow-400"
-                >쿠폰 등록</a
-              >
-              <a
-                href="#"
-                class="flex items-center justify-between px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-              >
-                <span>고객센터</span>
-                <svg
-                  class="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="#"
-                class="flex items-center justify-between px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-              >
-                <span>확률 정보</span>
-                <svg
-                  class="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="#"
-                class="block px-4 py-2 hover:bg-gray-700 hover:text-yellow-400 transition-colors"
-                >보안 강화 캠페인</a
-              >
-            </div>
-          </div>
-        </div>
-
-        <!-- 기부 -->
-        <a href="#" class="hover:text-yellow-400 transition-colors">기부</a>
-
         <!-- 구분선 -->
-        <div class="w-px h-6 bg-gray-600"></div>
+        <div class="w-px h-4 bg-theme-foreground-reversal-30"></div>
 
         <!-- 이벤트 -->
-        <a
-          href="#"
-          class="flex items-center space-x-1 text-pink-400 hover:text-pink-300 transition-colors"
-        >
-          <span class="text-pink-400">•</span>
+        <a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
+          <AtomsIconsStar />
           <span>이벤트</span>
-          <span class="text-pink-400">•</span>
+          <AtomsIconsStar />
         </a>
       </nav>
 
-      <!-- 게임 시작 버튼 (2단계 드롭다운) -->
-      <div class="relative group ml-auto">
+      <!-- 오른쪽 영역 -->
+      <div data-name="header-right" class="relative group ml-auto">
         <button
           class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
         >
@@ -145,12 +89,12 @@ const gameData = computed(() => gameDataStore.gameData);
 
         <!-- 2단계 드롭다운 메뉴 -->
         <div
-          class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
+          class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
         >
-          <div class="py-2">
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <div
                 class="w-8 h-8 bg-orange-500 rounded flex items-center justify-center"
@@ -159,9 +103,11 @@ const gameData = computed(() => gameDataStore.gameData);
               </div>
               <span>PC 버전 다운로드</span>
             </a>
+          </div>
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                 <path
@@ -170,9 +116,11 @@ const gameData = computed(() => gameDataStore.gameData);
               </svg>
               <span>Google Store</span>
             </a>
+          </div>
+          <div class="px-4 py-2">
             <a
               href="#"
-              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
+              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
             >
               <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                 <path