fix. onMounted전 gnb 넘치는 경우 가로스크롤 생기던 현상 수정

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;