From b3775466fa34e366301e0b31625fcffbd076f3b3 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 3 Dec 2025 10:51:44 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20gnb=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/layouts/Header.vue | 31 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 3ea429b..ac082a6 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useThrottleFn } from '@vueuse/core'
 import { useGameDataStore } from '#layers/stores/useGameDataStore'
 import type {
   GameDataMenu,
@@ -81,6 +82,7 @@ const isNavItemActive = (gnbItem: GameDataMenu): boolean => {
 
 // navAreaRef의 넓이를 구하는 함수
 const calculateNavWidth = () => {
+  if (!import.meta.client) return
   if (!navAreaRef.value || !gnbData.value) return 0
 
   const navAreaWidth = navAreaRef.value.offsetWidth
@@ -89,6 +91,7 @@ const calculateNavWidth = () => {
 
 // official 자식들의 넓이를 구하는 함수
 const calculateOfficialItemWidths = () => {
+  if (!import.meta.client) return
   if (!navAreaRef.value) return
 
   const officialItems = navAreaRef.value.querySelectorAll('.official .nav-item')
@@ -107,6 +110,7 @@ const calculateOfficialItemWidths = () => {
 
 // 오버플로우 계산 함수
 const calculateOverflow = () => {
+  if (!import.meta.client) return
   if (!navAreaRef.value || !startRef.value) return
 
   if (breakpoints.value.isMobile) {
@@ -137,6 +141,11 @@ const calculateOverflow = () => {
   }
 }
 
+// 100ms마다 최대 1회 실행
+const throttledCalculateOverflow = useThrottleFn(() => {
+  calculateOverflow()
+}, 100)
+
 const handleMenuOpen = () => {
   isMenuOpen.value = true
   scrollStore.controlScrollLock(true)
@@ -200,26 +209,26 @@ const handleStartClick = () => {
   window.open(url, '_blank')
 }
 
-watchEffect(() => {
-  if (!startWidth.value) return // 0, null, undefined면 스킵
-  calculateOverflow()
-})
-
-// 화면 크기 변경 시 오버플로우 재계산
-watch(width, () => {
-  calculateOverflow()
-})
-
 onMounted(() => {
   overflowNam.value = 0
   isMounted.value = true
 
-  // 초기 계산 시도
+  // 초기 계산
   nextTick(() => {
     calculateNavWidth()
     calculateOfficialItemWidths()
     calculateOverflow()
   })
+
+  watchEffect(() => {
+    if (!startWidth.value) return
+    throttledCalculateOverflow()
+  })
+
+  // 화면 크기 변경 시 오버플로우 재계산
+  watch(width, () => {
+    throttledCalculateOverflow()
+  })
 })
 </script>