fix. AtomsButtonLauncher 컴포넌트 수정

app/app.vue

@@ -145,6 +145,7 @@ onBeforeUnmount(() => {
   <h1 class="sr-only">{{ gameData?.game_name }}</h1>
   <NuxtPage />
 
+  <WidgetsModalClient />
   <!-- 공통 모달 컴포넌트 -->
   <BlocksModalYouTube
     v-model:is-open="youtube.storeIsOpen"

layers/components/atoms/Button/Launcher.vue

@@ -113,12 +113,6 @@ const handleClick = () => {
       </span>
     </span>
   </component>
-
-  <ClientOnly>
-    <Teleport to="#teleports">
-      <WidgetsModalClient />
-    </Teleport>
-  </ClientOnly>
 </template>
 
 <style scoped>

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>

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>

layers/components/blocks/UtileContainer.vue

@@ -22,15 +22,17 @@ const pinToParent = computed(() => {
 </script>
 
 <template>
+  <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 {

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>

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<Props>()
-const props = defineProps<ButtonListProps>()
 
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
-const BUTTON_TYPE_MAP = {
+const getBtnType = (item?: PageDataResourceGroupBtnInfo): ButtonType => {
-  URL: {
+  const t = item?.detail?.btn_type
-    _self: 'internal' as const,
+  const target = item?.detail?.action?.link_target
-    _blank: 'external' as const,
+  if (t === 'URL' && target)
-  },
+    return target === '_blank' ? 'external' : 'internal'
-  DOWNLOAD: 'download' as const,
+  if (t === 'DOWNLOAD') return 'download'
-} as const
+  return 'action'
-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 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)"
+        v-else
-        :target="button.btn_info?.detail?.action?.link_target"
+        :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="
+        :background-color="getBgColor(button.btn_info)"
-          getColorCode({
+        :text-color="getTextColor(button.btn_info)"
-            colorName: button.btn_info?.color_name_btn,
+        :disabled="button?.btn_info?.disabled"
-            colorCode: button.btn_info?.color_code_btn,
+        @click="handleLogClick(index)"
-          })
-        "
-        :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)"
       >
         {{ button.btn_info?.txt_btn_name }}
       </AtomsButton>

layers/public/images/common/ic-v2-logo-kakao-fill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C6.2008 3 1.5 6.71613 1.5 11.3008C1.5 14.2848 3.4918 16.8999 6.48115 18.363C6.26156 19.1831 5.686 21.3336 5.57041 21.7936C5.42833 22.3647 5.77994 22.357 6.01014 22.2032C6.19062 22.083 8.88744 20.2499 10.051 19.4586C10.6824 19.5521 11.3338 19.6019 12 19.6019C17.799 19.6019 22.5 15.8849 22.5 11.3008C22.5 6.71613 17.799 3 12 3Z" fill="white"/>
+</svg>

layers/public/images/common/ic-v2-logo-twitter-fill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7534 3H20.8224L14.1187 10.6246L22 21H15.8248L10.994 14.7046L5.45851 21H2.3987L9.56606 12.84L2 3H8.33287L12.7 8.75077L17.7534 3ZM16.6778 19.1723H18.3746L7.40566 4.73538H5.57904L16.6778 19.1723Z" fill="white"/>
+</svg>

layers/templates/GrVisual01/index.vue

@@ -59,33 +59,12 @@ const handleSendLog = (index: number) => {
         :resources-data="videoPlayData"
         :page-ver-tmpl-seq="props.pageVerTmplSeq"
       />
-      <div
+      <WidgetsButtonList
-        v-if="buttonListData.length > 0"
+        v-if="buttonListData"
-        class="flex flex-wrap justify-center gap-3 mt-[22px] md:gap-4 md:mt-[52px]"
+        :resources-data="buttonListData"
-      >
+        :page-ver-tmpl-seq="props.pageVerTmplSeq"
-        <BlocksButtonDownload
+        class="mt-[22px] md:mt-[52px]"
-          v-for="(button, index) in buttonListData"
+      />
-          :key="index"
-          type="duplication"
-          :platform="button.btn_info?.detail?.market_type"
-          :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)"
-        >
-          {{ button.btn_info?.txt_btn_name }}
-        </BlocksButtonDownload>
-      </div>
     </div>
   </section>
 </template>

layers/types/api/gameData.ts

@@ -24,7 +24,12 @@ export interface GameDataValue {
   lang_codes: string[]
   key_color_json: GameDataKeyColors
   use_game_font: boolean
-  comm_sns_bg_color_json: string
+  comm_sns_bg_color_json: {
+    display: {
+      color_code: string
+      color_name: string
+    }
+  }
   comm_multilang_filename: string
   footer_dev_ci_img_yn: boolean
   footer_dev_ci_img_path: string