From 5e67008511075b82d438e908098b5490cad6f5a7 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 19 Nov 2025 16:35:51 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20onMounted=EC=A0=84=20gnb=20=EB=84=98?=
 =?UTF-8?q?=EC=B9=98=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EA=B0=80=EB=A1=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=83=9D=EA=B8=B0=EB=8D=98=20?=
 =?UTF-8?q?=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index b1e9e7e..3c91a56 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -33,6 +33,7 @@ const startRef = ref<HTMLElement | null>(null)
 
 const { width: startWidth } = useElementSize(startRef)
 
+const isMounted = ref(false)
 const isMenuOpen = ref(false)
 const navWidth = ref(0)
 const officialItemWidths = ref<number[]>([])
@@ -211,6 +212,7 @@ watch(width, () => {
 
 onMounted(() => {
   overflowNam.value = 0
+  isMounted.value = true
 
   // 초기 계산 시도
   nextTick(() => {
@@ -250,7 +252,7 @@ onMounted(() => {
               />
             </AtomsLocaleLink>
           </div>
-          <nav class="nav-list">
+          <nav :class="['nav-list', { 'is-mounted': isMounted }]">
             <div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
               <div
                 v-for="(gnbItem, key) in gnbData?.menus"
@@ -417,7 +419,7 @@ onMounted(() => {
 
 <style scoped>
 .header {
-  @apply bg-theme-foreground text-theme-foreground-reversal relative z-[200];
+  @apply bg-theme-foreground text-theme-foreground-reversal relative font-[500] tracking-[-0.48px] z-[200];
 }
 .game-wrap {
   @apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[52px] bg-theme-foreground sm:px-[72px] md:h-16 md:pl-0 md:pr-[40px]
@@ -468,6 +470,9 @@ onMounted(() => {
   @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:ml-10 md:mr-6 md:px-0;
 }
+.nav-list.is-mounted {
+  @apply md:overflow-visible;
+}
 
 .nav-item {
   @apply relative flex flex-col text-[16px] md:items-center md:h-full;
@@ -512,7 +517,7 @@ onMounted(() => {
 }
 
 .official {
-  @apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0;
+  @apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
 }
 .custom-theme-scrollbar::-webkit-scrollbar {
   @apply w-1;