From 72af43d97e6430d1e5fde40d856ec886569cc0fe Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 20 Nov 2025 13:06:29 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20gnb=EA=B9=A8=EC=A7=80=EB=8A=94=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 | 275 +++++++++++++--------------
 1 file changed, 135 insertions(+), 140 deletions(-)

diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 8e45d20..c2ee942 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -254,43 +254,85 @@ onMounted(() => {
                 class="h-[30px]"
               />
             </AtomsLocaleLink>
-            <nav :class="['nav-list', { 'is-mounted': isMounted }]">
+          </div>
+          <nav :class="['nav-list', { 'is-mounted': isMounted }]">
+            <div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
               <div
-                v-if="gnbData?.menus"
-                class="official custom-theme-scrollbar"
+                v-for="(gnbItem, key) in gnbData?.menus"
+                :key="key"
+                class="nav-item"
+                :class="{
+                  'is-hidden':
+                    overflowNam > 0 &&
+                    Number(key) >=
+                      Object.keys(gnbData?.menus).length - overflowNam,
+                }"
               >
-                <div
-                  v-for="(gnbItem, key) in gnbData?.menus"
-                  :key="key"
-                  class="nav-item"
-                  :class="{
-                    'is-hidden':
-                      overflowNam > 0 &&
-                      Number(key) >=
-                        Object.keys(gnbData?.menus).length - overflowNam,
-                  }"
+                <AtomsLocaleLink
+                  :to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
+                  :target="gnbItem.link_target"
+                  :class="[
+                    'nav-1depth',
+                    { 'has-link': !isNotClickable(gnbItem) },
+                    { active: isNavItemActive(gnbItem) },
+                  ]"
                 >
-                  <AtomsLocaleLink
-                    :to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
-                    :target="gnbItem.link_target"
-                    :class="[
-                      'nav-1depth',
-                      { 'has-link': !isNotClickable(gnbItem) },
-                      { active: isNavItemActive(gnbItem) },
-                    ]"
+                  <span>{{ gnbItem.menu_name }}</span>
+                  <AtomsIconsArrowDownFill
+                    v-if="has2depthButton(gnbItem)"
+                    class="hidden md:block"
+                  />
+                  <AtomsIconsArrowRightLine
+                    v-if="!has2depthButton(gnbItem)"
+                    class="ml-auto md:hidden"
+                  />
+                </AtomsLocaleLink>
+                <Transition name="fade">
+                  <div v-if="has2depthButton(gnbItem)" class="nav-2depth">
+                    <ul>
+                      <li
+                        v-for="child in gnbItem.children"
+                        :key="child.menu_name"
+                      >
+                        <AtomsLocaleLink
+                          :to="child.url_path"
+                          :target="child.link_target"
+                        >
+                          <span>{{ child.menu_name }}</span>
+                          <AtomsIconsWebLinkLine
+                            v-if="child.link_target === '_blank'"
+                          />
+                        </AtomsLocaleLink>
+                      </li>
+                    </ul>
+                  </div>
+                </Transition>
+              </div>
+            </div>
+            <div v-if="gnbData?.menus && overflowNam > 0" class="more">
+              <button class="btn-more">
+                <AtomsIconsOptionHorizontalFill class="mx-auto" />
+                <span class="sr-only">more</span>
+              </button>
+              <div class="more-list">
+                <div class="list-inner">
+                  <div
+                    v-for="(gnbItem, key) in gnbData?.menus"
+                    :key="key"
+                    :class="{
+                      hidden:
+                        Number(key) <
+                        Object.keys(gnbData?.menus).length - overflowNam,
+                    }"
                   >
-                    <span>{{ gnbItem.menu_name }}</span>
-                    <AtomsIconsArrowDownFill
-                      v-if="has2depthButton(gnbItem)"
-                      class="hidden md:block"
-                    />
-                    <AtomsIconsArrowRightLine
-                      v-if="!has2depthButton(gnbItem)"
-                      class="ml-auto md:hidden"
-                    />
-                  </AtomsLocaleLink>
-                  <Transition name="fade">
-                    <div v-if="has2depthButton(gnbItem)" class="nav-2depth">
+                    <AtomsLocaleLink
+                      :to="gnbItem.url_path"
+                      :target="gnbItem.link_target"
+                      :class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
+                    >
+                      <span>{{ gnbItem.menu_name }}</span>
+                    </AtomsLocaleLink>
+                    <div v-if="gnbItem.children">
                       <ul>
                         <li
                           v-for="child in gnbItem.children"
@@ -308,117 +350,70 @@ onMounted(() => {
                         </li>
                       </ul>
                     </div>
-                  </Transition>
-                </div>
-              </div>
-              <div v-if="gnbData?.menus && overflowNam > 0" class="more">
-                <button class="btn-more">
-                  <AtomsIconsOptionHorizontalFill class="mx-auto" />
-                  <span class="sr-only">more</span>
-                </button>
-                <div class="more-list">
-                  <div class="list-inner">
-                    <div
-                      v-for="(gnbItem, key) in gnbData?.menus"
-                      :key="key"
-                      :class="{
-                        hidden:
-                          Number(key) <
-                          Object.keys(gnbData?.menus).length - overflowNam,
-                      }"
-                    >
-                      <AtomsLocaleLink
-                        :to="gnbItem.url_path"
-                        :target="gnbItem.link_target"
-                        :class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
-                      >
-                        <span>{{ gnbItem.menu_name }}</span>
-                      </AtomsLocaleLink>
-                      <div v-if="gnbItem.children">
-                        <ul>
-                          <li
-                            v-for="child in gnbItem.children"
-                            :key="child.menu_name"
-                          >
-                            <AtomsLocaleLink
-                              :to="child.url_path"
-                              :target="child.link_target"
-                            >
-                              <span>{{ child.menu_name }}</span>
-                              <AtomsIconsWebLinkLine
-                                v-if="child.link_target === '_blank'"
-                              />
-                            </AtomsLocaleLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
-              <div v-if="gameData?.event_banner" class="event">
-                <div class="nav-item">
-                  <AtomsLocaleLink
-                    :to="gameData.event_banner?.page_url"
-                    :target="
-                      gameData.event_banner?.link_type === 1
-                        ? '_self'
-                        : '_blank'
-                    "
-                    class="nav-1depth text-gradient-pink"
-                  >
-                    <AtomsIconsStarFill />
-                    <span>{{ tm('Gnb_Event') }}</span>
-                    <AtomsIconsStarFill />
-                  </AtomsLocaleLink>
+            </div>
+            <div v-if="gameData?.event_banner" class="event">
+              <div class="nav-item">
+                <AtomsLocaleLink
+                  :to="gameData.event_banner?.page_url"
+                  :target="
+                    gameData.event_banner?.link_type === 1 ? '_self' : '_blank'
+                  "
+                  class="nav-1depth text-gradient-pink"
+                >
+                  <AtomsIconsStarFill />
+                  <span>{{ tm('Gnb_Event') }}</span>
+                  <AtomsIconsStarFill />
+                </AtomsLocaleLink>
+              </div>
+            </div>
+          </nav>
+          <ClientOnly>
+            <div ref="startRef" class="btn-start">
+              <template v-if="gnb1depthButtonData">
+                <component
+                  :is="
+                    breakpoints.isDesktop
+                      ? 'BlocksButtonLauncher'
+                      : 'AtomsButton'
+                  "
+                  type="custom"
+                  platform="pc"
+                  :background-color="
+                    getColorCodeFromData(gnb1depthButtonData?.btn_info, 'btn')
+                  "
+                  :text-color="
+                    getColorCodeFromData(gnb1depthButtonData?.btn_info, 'txt')
+                  "
+                  @click="handleStartClick"
+                >
+                  {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
+                </component>
+                <div
+                  v-if="breakpoints.isDesktop && gnb2depthButtonData"
+                  class="nav-2depth"
+                >
+                  <ul>
+                    <li v-for="(item, key) in gnb2depthButtonData" :key="key">
+                      <BlocksButtonLauncher type="custom" :platform="key">
+                        {{ item.btn_info?.txt_btn_name }}
+                      </BlocksButtonLauncher>
+                    </li>
+                  </ul>
                 </div>
-              </div>
-            </nav>
-            <ClientOnly>
-              <div ref="startRef" class="btn-start">
-                <template v-if="gnb1depthButtonData">
-                  <component
-                    :is="
-                      breakpoints.isDesktop
-                        ? 'BlocksButtonLauncher'
-                        : 'AtomsButton'
-                    "
-                    type="custom"
-                    platform="pc"
-                    :background-color="
-                      getColorCodeFromData(gnb1depthButtonData?.btn_info, 'btn')
-                    "
-                    :text-color="
-                      getColorCodeFromData(gnb1depthButtonData?.btn_info, 'txt')
-                    "
-                    @click="handleStartClick"
-                  >
-                    {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
-                  </component>
-                  <div
-                    v-if="breakpoints.isDesktop && gnb2depthButtonData"
-                    class="nav-2depth"
-                  >
-                    <ul>
-                      <li v-for="(item, key) in gnb2depthButtonData" :key="key">
-                        <BlocksButtonLauncher type="custom" :platform="key">
-                          {{ item.btn_info?.txt_btn_name }}
-                        </BlocksButtonLauncher>
-                      </li>
-                    </ul>
-                  </div>
-                </template>
-              </div>
-            </ClientOnly>
-            <button class="btn-close" @click="handleMenuClose">
-              <AtomsIconsCloseLine
-                size="24"
-                color="var(--foreground-reversal)"
-                class="mx-auto"
-              />
-              <span class="sr-only">menu close</span>
-            </button>
-          </div>
+              </template>
+            </div>
+          </ClientOnly>
+          <button class="btn-close" @click="handleMenuClose">
+            <AtomsIconsCloseLine
+              size="24"
+              color="var(--foreground-reversal)"
+              class="mx-auto"
+            />
+            <span class="sr-only">menu close</span>
+          </button>
         </div>
       </div>
     </div>