Merge branch 'feature/202501107-all' into feature/20251001-gil

2025-11-25 20:09:07 +09:00
parent 3eccb19b1b f98c7051f3
commit 12a871538c
49 changed files with 945 additions and 343 deletions
--- a/layers/components/layouts/EventNavigation.vue
+++ b/layers/components/layouts/EventNavigation.vue
@@ -85,6 +85,9 @@ onMounted(async () => {
 </template>

 <style scoped>
+.empty-game + main .event-navigation {
+  @apply mt-[var(--scroll-position,48px)];
+}
 .event-navigation {
  @apply fixed top-0 left-0 bottom-0 mt-[calc(var(--scroll-position,48px)+48px)] md:mt-[calc(var(--scroll-position,64px)+64px)] z-[100] transition-transform duration-300 ease-in-out;
 }
--- a/layers/components/layouts/Footer.vue
+++ b/layers/components/layouts/Footer.vue
@@ -174,7 +174,7 @@
          <a href="https://www.smilegate.com" target="_blank" class="smilegate">
            <img
              :src="
-                getImageHost(`/images/common/logo_smilegate.png`, {
+                getResourceHost(`/images/common/logo_smilegate.png`, {
                  imageType: 'common',
                })
              "
@@ -190,7 +190,7 @@
          >
            <img
              :src="
-                getImageHost(`${setDevCi.dev_ci_img_path}`, {
+                getResourceHost(`${setDevCi.dev_ci_img_path}`, {
                  imageType: 'game',
                })
              "
@@ -242,7 +242,7 @@ const getGameRatingImage = computed((): string[] => {
  }
  return contentInfo.map(item => {
    const type = ageTypeMap[item] || 'TypeTest'
-    return getImageHost(`/images/common/grades_age/${locale.value}/${type}.svg`, {
+    return getResourceHost(`/images/common/grades_age/${locale.value}/${type}.svg`, {
      imageType: 'common',
    })
  })
@@ -266,7 +266,7 @@ const getContentInfoImage = computed((): string[] => {
    .map(item => {
      const type = contentTypeMap[item]
      return type
-        ? getImageHost(`/images/common/grades_use/${type}.svg`, {
+        ? getResourceHost(`/images/common/grades_use/${type}.svg`, {
            imageType: 'common',
          })
        : ''
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -61,8 +61,6 @@ const pathMatches = (base: string, current: string) => {

 /** 자식 중 활성 링크 존재 여부 */
 const hasActiveChild = (children?: GameDataMenuChildren) => {
-  if(!import.meta.client) return false
-  
  const cur = currentPath.value
  return formatToArray(children).some(child => {
    if (!child?.url_path || !isInternalUrl(child.url_path)) return false
@@ -72,8 +70,6 @@ const hasActiveChild = (children?: GameDataMenuChildren) => {

 /** 1Depth 활성화 여부 */
 const isNavItemActive = (gnbItem: GameDataMenu): boolean => {
-  if(!import.meta.client) return false
-
  const cur = currentPath.value
  const base = gnbItem?.url_path
  const selfActive =
@@ -228,16 +224,19 @@ onMounted(() => {
 </script>

 <template>
-  <header class="header">
+  <header :class="['header', { 'empty-game': !gnbData }]">
    <BlocksStoveGnbNew class="h-[48px]" />
-    <div :class="['game-wrap', { 'is-fixed': isPassedStoveGnb }]">
+    <div
+      v-if="gnbData"
+      :class="['game-wrap', { 'is-fixed': isPassedStoveGnb }]"
+    >
      <AtomsLocaleLink to="/" class="mx-auto md:hidden">
        <img
-          :src="getImageHost(gnbData?.bi_path)"
+          :src="getResourceHost(gnbData?.bi_path)"
          :alt="gameData?.game_name"
          class="h-[30px]"
        />
-      </atomslocalelink>
+      </AtomsLocaleLink>
      <button class="btn-open" @click="handleMenuOpen">
        <AtomsIconsMenuBoldLine class="mx-auto" />
        <span class="sr-only">menu open</span>
@@ -250,11 +249,12 @@ onMounted(() => {
          <div class="nav-logo">
            <AtomsLocaleLink to="/" @click="handleMenuClose">
              <img
-                :src="getImageHost(gnbData?.bi_path)"
+                :src="getResourceHost(gnbData?.bi_path)"
                :alt="gameData?.game_name"
                class="h-[30px]"
              />
-          </AtomsLocaleLink>
+            </AtomsLocaleLink>
+          </div>
          <nav :class="['nav-list', { 'is-mounted': isMounted }]">
            <div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
              <div
@@ -276,8 +276,12 @@ onMounted(() => {
                    { 'has-link': !isNotClickable(gnbItem) },
                    { active: isNavItemActive(gnbItem) },
                  ]"
+                  @click="handleMenuClose"
                >
                  <span>{{ gnbItem.menu_name }}</span>
+                  <AtomsIconsWebLinkLine
+                    v-if="gnbItem.link_target === '_blank'"
+                  />
                  <AtomsIconsArrowDownFill
                    v-if="has2depthButton(gnbItem)"
                    class="hidden md:block"
@@ -297,6 +301,7 @@ onMounted(() => {
                        <AtomsLocaleLink
                          :to="child.url_path"
                          :target="child.link_target"
+                          @click="handleMenuClose"
                        >
                          <span>{{ child.menu_name }}</span>
                          <AtomsIconsWebLinkLine
@@ -329,6 +334,7 @@ onMounted(() => {
                      :to="gnbItem.url_path"
                      :target="gnbItem.link_target"
                      :class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
+                      @click="handleMenuClose"
                    >
                      <span>{{ gnbItem.menu_name }}</span>
                    </AtomsLocaleLink>
@@ -362,10 +368,12 @@ onMounted(() => {
                    gameData.event_banner?.link_type === 1 ? '_self' : '_blank'
                  "
                  class="nav-1depth text-gradient-pink"
+                  @click="handleMenuClose"
                >
                  <AtomsIconsStarFill />
                  <span>{{ tm('Gnb_Event') }}</span>
                  <AtomsIconsStarFill />
+                  <AtomsIconsArrowRightLine class="ml-auto md:hidden" />
                </AtomsLocaleLink>
              </div>
            </div>
@@ -417,7 +425,7 @@ onMounted(() => {
        </div>
      </div>
    </div>
-  </div></header>
+  </header>
 </template>

 <style scoped>
@@ -470,7 +478,7 @@ onMounted(() => {
 }

 .nav-list {
-  @apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-4 px-2
+  @apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-6 pl-2 pr-1
  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 {
@@ -520,7 +528,7 @@ onMounted(() => {
 }

 .official {
-  @apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
+  @apply overflow-x-hidden overflow-y-scroll 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;
@@ -553,7 +561,9 @@ onMounted(() => {
 }

 .event {
-  @apply relative md:ml-[64px] md:after:content-[''] md:after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-gray-750 md:after:translate-y-[-50%];
+  @apply relative pr-1 md:ml-[64px] md:pr-0
+  before:content-[''] before:block before:h-px before:mb-2 before:mx-3 before:bg-theme-foreground-reversal-8 md:before:hidden
+  after:content-[''] after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-gray-750 md:after:translate-y-[-50%];
 }

 .is-hidden {
@@ -561,13 +571,13 @@ onMounted(() => {
 }

 .btn-start {
-  @apply relative mt-2 px-5 md:absolute md:top-[0] md:right-0 md:flex md:items-center md:h-full md:mt-0 md:px-0;
+  @apply relative py-2 px-5 md:absolute md:top-[0] md:right-0 md:flex md:items-center md:h-full md:py-0 md:px-0;
 }
 .btn-start:hover .nav-2depth {
  @apply md:block;
 }
 .btn-start:deep(> .btn-base) {
-  @apply w-full h-[48px] px-10;
+  @apply w-full h-[48px] px-10 font-[700];
 }
 .btn-start:deep(> .btn-base) .icon-platform {
  @apply hidden;
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -112,6 +112,9 @@ onMounted(() => {
 </template>

 <style scoped>
+.empty-game + main .main-content {
+  @apply pt-0;
+}
 .main-content {
  @apply relative pt-[48px] md:pt-[64px];
 }