fix. AtomsButtonLauncher 컴포넌트 수정

2025-10-30 18:22:26 +09:00
parent 74ce5a0714
commit db9f3094fd
13 changed files with 218 additions and 92 deletions
--- a/layers/components/blocks/Button/Download.vue
+++ b/layers/components/blocks/Button/Download.vue
@@ -113,12 +113,6 @@ const handleClick = () => {
      </span>
    </span>
  </component>
-
-  <ClientOnly>
-    <Teleport to="#teleports">
-      <WidgetsModalClient />
-    </Teleport>
-  </ClientOnly>
 </template>

 <style scoped>
--- a/layers/components/atoms/Button/Sns.vue
+++ b/layers/components/atoms/Button/Sns.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const showSnsList = ref(false)
+const isForceClosed = ref(false)
+
+const { gameData } = useGameDataStore()
+
+const snsBackgroundColor = computed(() => {
+  const colorData = gameData?.comm_sns_bg_color_json?.display
+  const colorCode = getColorCode({
+    colorName: colorData?.color_name,
+    colorCode: colorData?.color_code,
+  })
+  return colorCode
+})
+const snsList = computed(() => {
+  return gameData?.sns_json
+})
+
+const handleMouseEnter = () => {
+  if (isForceClosed.value) return
+  showSnsList.value = true
+}
+
+const handleMouseLeave = () => {
+  if (isForceClosed.value) return
+  showSnsList.value = false
+}
+
+const handleForceClose = () => {
+  isForceClosed.value = true
+  showSnsList.value = false
+
+  // 일정 시간 뒤 다시 hover 가능하도록 초기화
+  setTimeout(() => {
+    isForceClosed.value = false
+  }, 500)
+}
+
+const handleCopy = async () => {
+  if (!import.meta.client) return
+
+  try {
+    const url = window.location.href
+    await navigator.clipboard.writeText(url)
+    console.log('✅ 복사 성공:', url)
+  } catch (err) {
+    console.error('❌ 복사 실패:', err)
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="Object.keys(snsList).length > 0"
+    class="sns-container"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleMouseEnter"
+  >
+    <button class="btn-sns" :style="{ backgroundColor: snsBackgroundColor }">
+      <AtomsIconsShareLine class="icon-share" />
+      <span class="sr-only">sns</span>
+    </button>
+    <transition name="fade">
+      <div
+        v-if="showSnsList"
+        class="sns-list"
+        :style="{ backgroundColor: snsBackgroundColor }"
+      >
+        <template v-for="(item, key) in snsList" :key="key">
+          <a
+            v-if="item?.url"
+            :href="item?.url"
+            target="_blank"
+            class="sns-item"
+            :style="{
+              backgroundImage: `url(/images/common/ic-v2-logo-${key}-fill.svg)`,
+            }"
+          >
+            <span class="sr-only">{{ key }}</span>
+          </a>
+        </template>
+        <button
+          type="button"
+          class="sns-item"
+          :style="{
+            backgroundImage: `url(/images/common/ic-v2-community-link-line.svg)`,
+          }"
+          @click="handleCopy"
+        >
+          <span class="sr-only">copy</span>
+        </button>
+        <div class="close-container">
+          <button
+            type="button"
+            class="opacity-50 z-[1] hover:opacity-100"
+            @click="handleForceClose"
+          >
+            <span class="sr-only">close</span>
+            <AtomsIconsCloseLine size="24" />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.btn-sns {
+  @apply relative rounded-full flex items-center justify-center
+  w-[40px] h-[40px] md:w-[48px] md:h-[48px]
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
+}
+.btn-sns:hover {
+  @apply after:opacity-10;
+}
+.btn-sns:hover .icon-share {
+  @apply fill-white;
+}
+
+.sns-list {
+  @apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full
+  h-[40px] md:h-[48px] pl-4 pr-3
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
+}
+.sns-item {
+  @apply w-[24px] h-[24px] bg-center bg-cover bg-no-repeat opacity-50 z-[1]
+  hover:opacity-100;
+}
+.sns-item:hover {
+  @apply opacity-100;
+}
+
+.close-container {
+  @apply relative flex pl-4
+  before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-[1px] before:h-[20px] before:bg-[rgba(255,255,255,0.1)] before:translate-y-[-50%];
+}
+</style>
--- a/layers/components/atoms/icons/ShareLine.vue
+++ b/layers/components/atoms/icons/ShareLine.vue
@@ -6,7 +6,7 @@ interface Props {

 withDefaults(defineProps<Props>(), {
  size: 24,
-  color: 'white',
+  color: 'rgba(255,255,255,0.5)',
 })
 </script>

@@ -16,13 +16,12 @@ withDefaults(defineProps<Props>(), {
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
-    fill="none"
+    :fill="color"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M16.75 2C14.6789 2 13 3.67893 13 5.75C13 6.04651 13.0344 6.33499 13.0995 6.61165C13.06 6.6295 13.0213 6.65017 12.9836 6.67375L8.98359 9.17375C8.93046 9.20696 8.88163 9.24445 8.83728 9.2855C8.16435 8.64391 7.25318 8.25 6.25 8.25C4.17893 8.25 2.5 9.92893 2.5 12C2.5 14.0711 4.17893 15.75 6.25 15.75C7.25317 15.75 8.16434 15.3561 8.83728 14.7145C8.88163 14.7556 8.93046 14.793 8.98359 14.8263L12.9836 17.3263C12.996 17.334 13.0086 17.3415 13.0212 17.3486C13.0072 17.4805 13 17.6144 13 17.75C13 19.8211 14.6789 21.5 16.75 21.5C18.8211 21.5 20.5 19.8211 20.5 17.75C20.5 15.6789 18.8211 14 16.75 14C15.521 14 14.43 14.5912 13.7461 15.5048L10.0164 13.1737C9.95959 13.1382 9.90054 13.1093 9.84012 13.0867C9.9441 12.7428 10 12.3779 10 12C10 11.6221 9.9441 11.2572 9.84012 10.9133C9.90054 10.8907 9.95959 10.8618 10.0164 10.8263L14.0164 8.32626L14.0218 8.32286C14.7056 9.04763 15.675 9.5 16.75 9.5C18.8211 9.5 20.5 7.82107 20.5 5.75C20.5 3.67893 18.8211 2 16.75 2ZM15 5.75C15 4.7835 15.7835 4 16.75 4C17.7165 4 18.5 4.7835 18.5 5.75C18.5 6.7165 17.7165 7.5 16.75 7.5C15.7835 7.5 15 6.7165 15 5.75ZM6.25 10.25C5.2835 10.25 4.5 11.0335 4.5 12C4.5 12.9665 5.2835 13.75 6.25 13.75C7.2165 13.75 8 12.9665 8 12C8 11.0335 7.2165 10.25 6.25 10.25ZM16.75 16C15.7835 16 15 16.7835 15 17.75C15 18.7165 15.7835 19.5 16.75 19.5C17.7165 19.5 18.5 18.7165 18.5 17.75C18.5 16.7835 17.7165 16 16.75 16Z"
-      :fill="color"
    />
  </svg>
 </template>
--- a/layers/components/blocks/UtileContainer.vue
+++ b/layers/components/blocks/UtileContainer.vue
@@ -22,15 +22,17 @@ const pinToParent = computed(() => {
 </script>

 <template>
-  <div :class="['utile-container', { 'is-fixed': pinToParent }]">
-    <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
-    <AtomsButtonSns v-if="props.isShowSnsBtn" />
-  </div>
+  <ClientOnly>
+    <div :class="['utile-container', { 'is-fixed': pinToParent }]">
+      <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
+      <AtomsButtonSns v-if="props.isShowSnsBtn" />
+    </div>
+  </ClientOnly>
 </template>

 <style scoped>
 .utile-container {
-  @apply fixed flex flex-col
+  @apply fixed flex flex-col z-[100]
  bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
 }
 .utile-container.is-fixed {
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -176,7 +176,7 @@ onBeforeUnmount(() => {
    <div class="game-wrapper" :class="{ 'is-fixed': isPassedStoveGnb }">
      <AtomsLocaleLink to="/brand" class="mx-auto md:hidden">
        <img
-          :src="gnbData?.bi_path"
+          :src="getResolvedHost(gnbData?.bi_path)"
          :alt="gameData?.game_name"
          class="h-[30px]"
        />
@@ -193,7 +193,7 @@ onBeforeUnmount(() => {
          <div class="nav-logo">
            <AtomsLocaleLink to="/brand" @click="handleMenuClose">
              <img
-                :src="gnbData?.bi_path"
+                :src="getResolvedHost(gnbData?.bi_path)"
                :alt="gameData?.game_name"
                class="h-[30px]"
              />
@@ -307,7 +307,7 @@ onBeforeUnmount(() => {
            </div>
          </nav>
          <div ref="startRef" class="btn-start">
-            <BlocksButtonDownload
+            <AtomsButtonLauncher
              type="custom"
              platform="pc"
              :background-color="
@@ -325,13 +325,13 @@ onBeforeUnmount(() => {
              class="nav-1depth"
            >
              {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
-            </BlocksButtonDownload>
+            </AtomsButtonLauncher>
            <div v-if="gnb2depthButtonData" class="nav-2depth">
              <ul>
                <li v-for="(item, key) in gnb2depthButtonData" :key="key">
-                  <BlocksButtonDownload type="custom" :platform="key">
+                  <AtomsButtonLauncher type="custom" :platform="key">
                    {{ item.btn_info?.txt_btn_name }}
-                  </BlocksButtonDownload>
+                  </AtomsButtonLauncher>
                </li>
              </ul>
            </div>
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -5,73 +5,74 @@ import type {
 } from '#layers/types/api/pageData'
 import type { ButtonType } from '#layers/types/components/button'

-interface ButtonListProps {
+interface Props {
  resourcesData: PageDataResourceGroup[]
  pageVerTmplSeq: number
 }
-
-const props = defineProps<ButtonListProps>()
+const props = defineProps<Props>()

 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

-const BUTTON_TYPE_MAP = {
-  URL: {
-    _self: 'internal' as const,
-    _blank: 'external' as const,
-  },
-  DOWNLOAD: 'download' as const,
-} as const
-const DEFAULT_BUTTON_TYPE: ButtonType = 'action'
-
-const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
-  const btnType = btnInfo?.detail?.btn_type
-  const btnTarget = btnInfo?.detail?.action?.link_target
-
-  if (btnType === 'URL' && btnTarget) {
-    return BUTTON_TYPE_MAP.URL[btnTarget] || DEFAULT_BUTTON_TYPE
-  }
-
-  if (btnType === 'DOWNLOAD') {
-    return BUTTON_TYPE_MAP.DOWNLOAD
-  }
-
-  return DEFAULT_BUTTON_TYPE
+const getBtnType = (item?: PageDataResourceGroupBtnInfo): ButtonType => {
+  const t = item?.detail?.btn_type
+  const target = item?.detail?.action?.link_target
+  if (t === 'URL' && target)
+    return target === '_blank' ? 'external' : 'internal'
+  if (t === 'DOWNLOAD') return 'download'
+  return 'action'
 }

-const handleSendLog = (index: number) => {
+const getBgColor = (item?: PageDataResourceGroupBtnInfo): string =>
+  getColorCode({
+    colorName: item?.color_name_btn,
+    colorCode: item?.color_code_btn,
+  })
+
+const getTextColor = (item?: PageDataResourceGroupBtnInfo): string =>
+  getColorCode({
+    colorName: item?.color_name_txt,
+    colorCode: item?.color_code_txt,
+  })
+
+const handleLogClick = (index: number) => {
  sendLog(
    locale.value,
    useAnalyticsLogDataDirect(props.resourcesData[index], props.pageVerTmplSeq)
  )
 }
+
+// 편의상
+const buttonList = computed(() => props.resourcesData || [])
 </script>

 <template>
  <div
-    v-if="props.resourcesData?.length"
+    v-if="buttonList.length"
    class="flex flex-wrap justify-center gap-3 md:gap-4"
  >
-    <template v-for="(button, index) in props.resourcesData" :key="index">
+    <template v-for="(button, index) in buttonList" :key="index">
+      <AtomsButtonLauncher
+        v-if="button.btn_info?.detail?.btn_type === 'RUN'"
+        type="duplication"
+        :platform="button.btn_info?.detail?.market_type"
+        :background-color="getBgColor(button.btn_info)"
+        :text-color="getTextColor(button.btn_info)"
+        :disabled="button?.btn_info?.disabled"
+        @click="handleLogClick(index)"
+      >
+        {{ button.btn_info?.txt_btn_name }}
+      </AtomsButtonLauncher>
      <AtomsButton
-        :type="getButtonType(button.btn_info)"
-        :target="button.btn_info?.detail?.action?.link_target"
+        v-else
+        :type="getBtnType(button.btn_info)"
        :href="button.btn_info?.detail?.action?.url"
+        :target="button.btn_info?.detail?.action?.link_target"
        :rel="button.btn_info?.detail?.action?.rel"
-        :background-color="
-          getColorCode({
-            colorName: button.btn_info?.color_name_btn,
-            colorCode: button.btn_info?.color_code_btn,
-          })
-        "
-        :text-color="
-          getColorCode({
-            colorName: button.btn_info?.color_name_txt,
-            colorCode: button.btn_info?.color_code_txt,
-          })
-        "
-        :disabled="button.btn_info?.disabled"
-        @click="handleSendLog(index)"
+        :background-color="getBgColor(button.btn_info)"
+        :text-color="getTextColor(button.btn_info)"
+        :disabled="button?.btn_info?.disabled"
+        @click="handleLogClick(index)"
      >
        {{ button.btn_info?.txt_btn_name }}
      </AtomsButton>