web-temp/layers/components/layout/default/Header.vue

<script setup lang="ts">
const gameDataStore = useGameDataStore();
const gameData = computed(() => gameDataStore.gameData);
</script>

<template>
  <header class="bg-gray-900 text-white relative z-50">
    <LayoutStoveGnb />
    <div class="px-[40px] h-16 flex items-center">
      <!-- 로고 -->
      <div class="mr-[40px]">
        <img :src="gameData?.gnb?.bi_path" :alt="gameData?.game_name" />
      </div>

      <!-- 메인 네비게이션 -->
      <nav class="flex items-center space-x-[32px]">
        <!-- 동적 메뉴 (비활성화) -->
        <template v-if="false">
          <div
            v-for="menuList in gameData?.gnb?.menus"
            :key="menuList.path_code"
          >
            <a
              v-if="menuList.depth === 1"
              :href="menuList.url_path"
              :target="menuList.link_target"
              class="hover:text-yellow-400 transition-colors"
            >
              {{ menuList.menu_name }}
            </a>
          </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>

        <!-- 이벤트 -->
        <a
          href="#"
          class="flex items-center space-x-1 text-pink-400 hover:text-pink-300 transition-colors"
        >
          <span class="text-pink-400">•</span>
          <span>이벤트</span>
          <span class="text-pink-400">•</span>
        </a>
      </nav>

      <!-- 게임 시작 버튼 (2단계 드롭다운) -->
      <div 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"
        >
          게임 시작
        </button>

        <!-- 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"
        >
          <div class="py-2">
            <a
              href="#"
              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
            >
              <div
                class="w-8 h-8 bg-orange-500 rounded flex items-center justify-center"
              >
                <span class="text-white font-bold text-sm">S</span>
              </div>
              <span>PC 버전 다운로드</span>
            </a>
            <a
              href="#"
              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
            >
              <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"
                />
              </svg>
              <span>Google Store</span>
            </a>
            <a
              href="#"
              class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 transition-colors"
            >
              <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"
                />
              </svg>
              <span>App Store</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>