fix. gnb 코드 리팩토링

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>