feat. 해더 기획 기능 구현 (해상도에 맞춰 리스트 더보기 생성)

2025-10-01 21:38:12 +09:00
parent 517d2b233b
commit a70b3c8795
5 changed files with 253 additions and 247 deletions
--- a/layers/components/blocks/StoveGnb.vue
+++ b/layers/components/blocks/StoveGnb.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="header-stove" class="relative z-[5]" />
+  <div id="stove-wrapper" class="relative z-[5]" />
 </template>

 <script setup lang="ts">
@@ -26,7 +26,7 @@ function loadGnb(locale: string) {
  locale = locale.toLowerCase()

  const gnbOption = {
-    wrapper: '#header-stove',
+    wrapper: '#stove-wrapper',
    isResponsive: true,
    skin: gnbData?.skin_type || 'gnb-dark-mini',
    widget: {
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGameDataStore } from '#layers/stores/useGameDataStore'
 import { useScrollStore } from '#layers/stores/useScrollStore'
-import { useWindowScroll, onClickOutside } from '@vueuse/core'
+import { useWindowScroll, onClickOutside, useWindowSize } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import type {
  GameDataValue,
@@ -11,15 +11,21 @@ import type {

 const route = useRoute()
 const { y: windowY } = useWindowScroll()
+const gameDataStore = useGameDataStore()
 const scrollStore = useScrollStore()
+const _breakpoints = useResponsiveBreakpointsReliable()
+
 const { isPassedStoveGnb } = storeToRefs(scrollStore)

-const gameDataStore = useGameDataStore()
 const gameData = gameDataStore.gameData as GameDataValue
-const gnbList = (gameData?.gnb?.menus ?? []) as GameDataMenuChildren
-
+const gnbList = (gameData?.gnb?.menus ?? {}) as GameDataMenuChildren
 const isMenuOpen = ref(false)
-const contentNavRef = ref<HTMLElement>()
+const navAreaRef = ref<HTMLElement>()
+const startRef = ref<HTMLElement>()
+const navWidth = ref(0)
+const startWidth = ref(0)
+const officialItemWidths = ref<number[]>([])
+const overflowNam = ref<number>(0)

 const currentPath = computed(() => formatPathWithoutLocale(route.path))

@@ -29,12 +35,12 @@ const pathMatches = (base: string, current: string) => {
 }

 /** header overlay 높이 계산 (re-compute 최소화) */
-const scrollPositionPX = computed(() => {
+const scrollPositionHeight = computed(() => {
  const gnbHeight = scrollStore.stoveGnbHeight
  const y = windowY.value
  if (y === 0) return `${gnbHeight}px`
  if (y >= gnbHeight) return '0px'
-  return `${gnbHeight - y}px`
+  return `${gnbHeight - y}`
 })

 /** 자식 중 활성 링크 존재 여부 */
@@ -60,46 +66,135 @@ const isNavItemActive = (gnbItem: GameDataMenu): boolean => {
 const handleMenuOpen = () => (isMenuOpen.value = true)
 const handleMenuClose = () => (isMenuOpen.value = false)

-onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
+// navAreaRef의 넓이를 구하는 함수
+const calculateNavWidth = () => {
+  if (!navAreaRef.value) return 0
+
+  const navAreaWidth = navAreaRef.value.offsetWidth
+  return navAreaWidth
+}
+
+// startRef의 넓이를 구하는 함수
+const calculateStartWidth = () => {
+  if (!startRef.value) return 0
+
+  const startWidth = startRef.value.offsetWidth
+  return startWidth + 40
+}
+
+// official 자식들의 넓이를 구하는 함수 (뒤에서부터 순서대로)
+const calculateOfficialItemWidths = () => {
+  if (!navAreaRef.value) return
+
+  const officialItems = navAreaRef.value.querySelectorAll('.official .nav-item')
+  const widths: number[] = []
+
+  // 뒤에서부터 순서대로 넓이 계산
+  for (let i = officialItems.length - 1; i >= 0; i--) {
+    const item = officialItems[i] as HTMLElement
+    if (item) {
+      widths.push(item.offsetWidth)
+    }
+  }
+
+  officialItemWidths.value = widths
+
+  // 해상도 체크 및 오버플로우 계산
+  calculateOverflow()
+}
+
+console.log(0, Object.keys(gnbList).length)
+
+// 오버플로우 계산 함수
+const calculateOverflow = () => {
+  if (!navAreaRef.value) return
+
+  const totalNavWidth = navWidth.value + startWidth.value
+  const screenWidth = width.value
+
+  console.log('calculateOverflow called:', {
+    screenWidth,
+    totalNavWidth,
+    navWidth: navWidth.value,
+    startWidth: startWidth.value,
+    officialItemWidths: officialItemWidths.value,
+  })
+
+  // 모바일(1024px 미만)에서는 overflowNam을 0으로 설정
+  if (screenWidth < 1024) {
+    overflowNam.value = 0
+    console.log('Mobile view - overflowNam set to 0')
+    return
+  }
+
+  // 해상도가 navWidth + startWidth보다 작은 경우
+  if (screenWidth < totalNavWidth) {
+    let removedCount = 0
+    let currentTotal = totalNavWidth
+
+    // officialItemWidths를 하나씩 빼면서 해상도보다 작아지는지 확인
+    for (let i = 0; i < officialItemWidths.value.length; i++) {
+      currentTotal -= officialItemWidths.value[i]
+      removedCount++
+
+      // 해상도보다 작아지면 중단
+      if (currentTotal <= screenWidth) {
+        break
+      }
+    }
+
+    overflowNam.value = removedCount
+    console.log('Overflow calculated:', overflowNam.value)
+  } else {
+    overflowNam.value = 0
+    console.log('No overflow needed, setting to 0')
+  }
+}
+
+// 컴포넌트 마운트 후 한 번만 계산
+onMounted(() => {
+  // 초기화
+  overflowNam.value = 0
+  console.log('onMounted - overflowNam 초기화:', overflowNam.value)
+
+  nextTick(() => {
+    if (navAreaRef.value && startRef.value) {
+      navWidth.value = calculateNavWidth()
+      startWidth.value = calculateStartWidth()
+      calculateOfficialItemWidths()
+    }
+  })
+})
+
+// 화면 크기 변경 시 오버플로우 재계산
+const { width } = useWindowSize()
+watch(width, () => {
+  calculateOverflow()
+})
+
+onClickOutside(navAreaRef, () => (isMenuOpen.value = false))
 </script>

 <template>
  <header class="header">
    <BlocksStoveGnb class="min-h-[48px]" />

-    <div class="header-game" :class="{ 'game-fixed': isPassedStoveGnb }">
-      <!-- 로고 -->
-      <div class="header-logo">
-        <AtomsLocaleLink to="/brand">
-          <img
-            :src="gameData?.gnb?.bi_path"
-            :alt="gameData?.game_name"
-            class="h-[30px]"
-          />
-        </AtomsLocaleLink>
-      </div>
-      <button
-        class="btn-open"
-        aria-controls="site-menu"
-        :aria-expanded="isMenuOpen"
-        @click="handleMenuOpen"
-      >
+    <div class="game-wrapper" :class="{ 'is-fixed': isPassedStoveGnb }">
+      <AtomsLocaleLink to="/brand" class="mx-auto md:hidden">
+        <img
+          :src="gameData?.gnb?.bi_path"
+          :alt="gameData?.game_name"
+          class="h-[30px]"
+        />
+      </AtomsLocaleLink>
+      <button class="btn-open" @click="handleMenuOpen">
        <span class="sr-only">menu open</span>
      </button>
      <div
-        class="header-content"
-        :class="{ 'menu-open': isMenuOpen }"
-        :style="{ '--scroll-position': scrollPositionPX }"
+        :class="['gnb-game', { 'is-open': isMenuOpen }]"
+        :style="{ '--scroll-position': scrollPositionHeight }"
      >
-        <div id="site-menu" ref="contentNavRef" class="content-nav">
-          <button
-            class="btn-close"
-            aria-controls="site-menu"
-            :aria-expanded="isMenuOpen"
-            @click="handleMenuClose"
-          >
-            <span class="sr-only">menu close</span>
-          </button>
+        <div ref="navAreaRef" class="nav-area">
          <div class="nav-logo">
            <AtomsLocaleLink to="/brand">
              <img
@@ -109,23 +204,27 @@ onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
              />
            </AtomsLocaleLink>
          </div>
-          <nav class="nav-main">
-            <div v-if="gnbList" class="main-official">
+          <nav class="nav-list">
+            <div v-if="gnbList" class="official">
              <div
                v-for="(gnbItem, key) in gnbList"
                :key="key"
                class="nav-item"
+                :class="{
+                  'is-hidden':
+                    overflowNam > 0 &&
+                    Number(key) >= Object.keys(gnbList).length - overflowNam,
+                }"
              >
                <BlocksHybridLink
                  :to="gnbItem.url_path"
                  :target="gnbItem.link_target"
-                  :class="`item-1depth ${isNavItemActive(gnbItem) ? 'active' : ''}`"
+                  :class="`nav-1depth ${isNavItemActive(gnbItem) ? 'active' : ''}`"
                >
                  <span>{{ gnbItem.menu_name }}</span>
                  <AtomsIconsArrowDown v-if="gnbItem.children" />
                </BlocksHybridLink>
-
-                <div v-if="gnbItem.children" class="item-2depth">
+                <div v-if="gnbItem.children" class="nav-2depth">
                  <ul>
                    <li
                      v-for="child in gnbItem.children"
@@ -145,19 +244,68 @@ onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
                </div>
              </div>
            </div>
-            <div class="main-event">
-              <a href="#" class="item-1depth text-gradient-pink">
-                <AtomsIconsStar />
-                <span>이벤트</span>
-                <AtomsIconsStar />
-              </a>
+            <div v-if="gnbList && overflowNam > 0" class="more">
+              <button class="btn-more">
+                <span class="sr-only">more</span>
+              </button>
+              <div class="more-list">
+                <div
+                  v-for="(gnbItem, key) in gnbList"
+                  :key="key"
+                  :class="{
+                    hidden:
+                      Number(key) < Object.keys(gnbList).length - overflowNam,
+                  }"
+                >
+                  <BlocksHybridLink
+                    :to="gnbItem.url_path"
+                    :target="gnbItem.link_target"
+                    :class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
+                  >
+                    <span>{{ gnbItem.menu_name }}</span>
+                    <AtomsIconsArrowDown v-if="gnbItem.children" />
+                  </BlocksHybridLink>
+                  <div v-if="gnbItem.children">
+                    <ul>
+                      <li
+                        v-for="child in gnbItem.children"
+                        :key="child.menu_name"
+                      >
+                        <BlocksHybridLink
+                          :to="child.url_path"
+                          :target="child.link_target"
+                        >
+                          <span>{{ child.menu_name }}</span>
+                          <AtomsIconsLinkOut
+                            v-if="child.link_target === '_blank'"
+                          />
+                        </BlocksHybridLink>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="event">
+              <div class="nav-item">
+                <BlocksHybridLink
+                  :to="'/event'"
+                  :target="'_self'"
+                  class="nav-1depth text-gradient-pink"
+                >
+                  <span>이벤트</span>
+                </BlocksHybridLink>
+              </div>
            </div>
          </nav>
-          <div class="btn-start">
+          <div ref="startRef" class="btn-start">
            <AtomsButton size="small" class="w-full md:w-auto">
              게임 시작
            </AtomsButton>
          </div>
+          <button class="btn-close" @click="handleMenuClose">
+            <span class="sr-only">menu close</span>
+          </button>
        </div>
      </div>
    </div>
@@ -168,14 +316,14 @@ onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
 .header {
  @apply bg-theme-foreground text-theme-foreground-reversal relative z-50;
 }
-.header-game {
-  @apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[64px] bg-theme-foreground md:h-16 md:px-[40px]
+.game-wrapper {
+  @apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[64px] bg-theme-foreground md:h-16 md:pl-0 md:pr-[40px]
  before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-px before:bg-theme-foreground-reversal-6;
 }
-.game-fixed {
+.game-wrapper.is-fixed {
  @apply fixed top-0 left-0;
 }
-.header-logo {
+.game-logo {
  @apply mx-auto shrink-0 md:mx-0;
 }

@@ -190,52 +338,38 @@ onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
  @apply top-[11px] left-[12px];
 }
 .btn-start {
-  @apply relative mt-2 px-5 md:ml-auto md:mt-0 md:px-0;
+  @apply relative mt-2 px-5 md:absolute md:right-0 md:mt-0 md:px-0;
+}
+.btn-more {
+  @apply w-[40px] h-[40px] bg-[red];
 }

-.header-content {
-  @apply overflow-hidden absolute top-0 left-0 w-0 md:overflow-visible md:static md:w-full md:h-full;
+.gnb-game {
+  @apply absolute top-0 left-0 w-0 md:relative md:w-full md:!h-full;
  height: calc(100vh - var(--scroll-position));
 }
-.header-content.menu-open {
+.gnb-game.is-open {
  @apply w-full;
 }
-.header-content.menu-open::before {
+.gnb-game.is-open::before {
  @apply content-[''] absolute inset-0 w-[100vw] h-full bg-[rgba(0,0,0,0.6)] md:hidden;
 }
-.header-content.menu-open .content-nav {
-  @apply relative h-full translate-x-0 transition-transform duration-300 md:translate-x-0;
+.gnb-game.is-open .nav-area {
+  @apply h-full translate-x-0 transition-transform duration-300 md:translate-x-0;
 }

-.content-nav {
-  @apply relative flex flex-col w-[360px] bg-theme-foreground-10 translate-x-[-100%]
-  md:flex-row md:w-full md:items-center md:h-full md:bg-transparent md:translate-x-0;
-}
-
-.nav-main {
-  @apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-4 px-2
-  md:overflow-visible md:flex-row md:order-none md:h-full md:my-0 md:mx-10 md:px-0;
-}
-.main-official {
-  @apply overflow-y-auto pb-2 md:overflow-visible md:flex md:items-center md:space-x-8 md:pb-0;
-}
-
-.main-event {
-  @apply relative flex flex-col mb-2 md:flex-row md:mb-0 md:ml-16;
-}
-.main-event::before {
-  @apply content-[''] hidden absolute top-[23px] left-[-32px] w-px h-4 bg-theme-foreground-reversal-30 md:block;
-}
-.main-event::after {
-  @apply order-[-1] content-[''] h-px mb-2 mx-3 bg-theme-foreground-reversal-8
-  md:mb-0 md:mx-0 md:absolute md:bottom-0 md:left-0 md:w-full md:h-[2px] md:bg-theme-foreground-reversal md:opacity-0;
-}
-.main-event:hover::after {
-  @apply opacity-100;
+.nav-area {
+  @apply flex flex-col w-[360px] bg-theme-foreground-10 translate-x-[-100%]
+  md:inline-flex md:flex-row md:w-auto md:h-full md:pl-[40px] md:items-center md:bg-transparent transform-none;
 }

 .nav-logo {
-  @apply flex items-center justify-center shrink-0 h-[62px] md:hidden;
+  @apply flex items-center justify-center shrink-0 h-[62px];
+}
+
+.nav-list {
+  @apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-4 px-2
+  md:flex-row md:order-none md:h-full md:my-0 md:mx-10 md:px-0 md:overflow-visible;
 }

 .nav-item {
@@ -247,39 +381,52 @@ onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
 .nav-item::after {
  @apply content-[''] h-px my-2 mx-3 bg-theme-foreground-reversal-8 md:hidden;
 }
-.nav-item:hover .item-1depth::after,
-.item-1depth.active::after {
+.nav-item:hover .nav-1depth::after,
+.nav-1depth.active::after {
  @apply opacity-100 md:transition-opacity;
 }
-.nav-item:hover .item-2depth {
-  @apply md:opacity-100 md:visible md:pointer-events-auto md:transition-opacity md:duration-200;
+.nav-item:hover .nav-2depth {
+  @apply md:block;
 }

-.item-1depth {
+.nav-1depth {
  @apply flex items-center py-[9px] px-3 gap-1 rounded-[12px] md:h-full md:py-0 md:px-0;
 }
-.item-1depth::after {
+.nav-1depth::after {
  @apply md:content-[''] md:absolute md:bottom-0 md:left-0 md:w-full md:h-[2px] md:bg-theme-foreground-reversal md:opacity-0;
 }
-.item-1depth.active {
+.nav-1depth.active {
  @apply bg-theme-foreground-reversal-8 md:bg-transparent;
 }

-.item-2depth {
-  @apply block text-[15px] md:opacity-0 md:absolute md:top-full md:left-[-28px] md:min-w-[190px] md:pt-1 md:pointer-events-none;
+.nav-2depth {
+  @apply block text-[15px] md:hidden md:absolute md:top-[64px] md:left-[-28px] md:min-w-[190px] md:pt-1 md:z-50;
 }
-.item-2depth ul {
+.nav-2depth ul {
  @apply bg-theme-foreground-10 rounded-[20px] md:shadow-lg md:p-3;
 }
-.item-2depth a {
+.nav-2depth a {
  @apply flex items-center gap-1 px-5 py-[9px] rounded-[12px] transition-colors
  hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10
  md:px-4 md:py-[11px];
 }

-@media (min-width: 1024px) {
-  .header-content {
-    height: 100%;
-  }
+.official {
+  @apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
+}
+
+.more {
+  @apply relative hidden md:block;
+}
+.more-list {
+  @apply absolute;
+}
+
+.event {
+  @apply ml-[100px];
+}
+
+.is-hidden {
+  @apply hidden;
 }
 </style>