From db9f3094fd91b5c40924e472f9c5de864f477cbd Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 30 Oct 2025 18:22:26 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20AtomsButtonLauncher=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                                   |   1 +
 .../Button/Launcher.vue}                      |   6 -
 layers/components/atoms/Button/Sns.vue        | 139 ++++++++++++++++++
 layers/components/atoms/icons/ShareLine.vue   |   5 +-
 layers/components/blocks/UtileContainer.vue   |  12 +-
 layers/components/layouts/Header.vue          |  12 +-
 layers/components/widgets/ButtonList.vue      |  89 +++++------
 .../images/common/ic-v2-logo-kakao-fill.png   | Bin 0 -> 348 bytes
 .../images/common/ic-v2-logo-kakao-fill.svg   |   3 +
 .../images/common/ic-v2-logo-twitter-fill.png | Bin 0 -> 373 bytes
 .../images/common/ic-v2-logo-twitter-fill.svg |   3 +
 layers/templates/GrVisual01/index.vue         |  33 +----
 layers/types/api/gameData.ts                  |   7 +-
 13 files changed, 218 insertions(+), 92 deletions(-)
 rename layers/components/{blocks/Button/Download.vue => atoms/Button/Launcher.vue} (98%)
 create mode 100644 layers/components/atoms/Button/Sns.vue
 create mode 100644 layers/public/images/common/ic-v2-logo-kakao-fill.png
 create mode 100644 layers/public/images/common/ic-v2-logo-kakao-fill.svg
 create mode 100644 layers/public/images/common/ic-v2-logo-twitter-fill.png
 create mode 100644 layers/public/images/common/ic-v2-logo-twitter-fill.svg

diff --git a/app/app.vue b/app/app.vue
index 20a7c09..7e3e42c 100644
--- a/app/app.vue
+++ b/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"
diff --git a/layers/components/blocks/Button/Download.vue b/layers/components/atoms/Button/Launcher.vue
similarity index 98%
rename from layers/components/blocks/Button/Download.vue
rename to layers/components/atoms/Button/Launcher.vue
index 38a52aa..8918489 100644
--- a/layers/components/blocks/Button/Download.vue
+++ b/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>
diff --git a/layers/components/atoms/Button/Sns.vue b/layers/components/atoms/Button/Sns.vue
new file mode 100644
index 0000000..5ec4a1b
--- /dev/null
+++ 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>
diff --git a/layers/components/atoms/icons/ShareLine.vue b/layers/components/atoms/icons/ShareLine.vue
index 5f4822b..68998ef 100644
--- 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>
diff --git a/layers/components/blocks/UtileContainer.vue b/layers/components/blocks/UtileContainer.vue
index 86a3fde..7e269c6 100644
--- 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 {
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 8f3443b..22c5800 100644
--- 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>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index 46c8739..fbbcd31 100644
--- 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>
diff --git a/layers/public/images/common/ic-v2-logo-kakao-fill.png b/layers/public/images/common/ic-v2-logo-kakao-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ccfba4c0bead2a7d6ae5ddf2f8acf9c761265eb
GIT binary patch
literal 348
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#kDe}$Ar*{or#uvFGT><qKF@gLz$QlN6C6DU
z)GWIE9#}H=9ALY`S<pPg!RB@46{Uyr_hT0XRIFE2WstTvSm^0;=4Hu}2b-rR$cd~y
za#Z5-A(@C7i;h+Nh?Lfjd-y*jyQ|$dW08w(*YtHCd8{hL3pM+==6_01f3$OvMY3zL
ziGtAu_0POQ7t}xU%Di~|!$4%_KJndO7kGQMmN~PTJc!@VXnRiQUt#;E2dBR8n8UaH
z7MpJhx9^X;ANr0MPUd?aoSbu5c=2nVheclL@*g(boALW^?<0ll<r3QyKZl+<aWy)>
qRsBMn3-?NAzH9}_H5cu^R5HyD_R;+5#lr;jJcFmJpUXO@geCx~9Epwq

literal 0
HcmV?d00001

diff --git a/layers/public/images/common/ic-v2-logo-kakao-fill.svg b/layers/public/images/common/ic-v2-logo-kakao-fill.svg
new file mode 100644
index 0000000..e5050ef
--- /dev/null
+++ b/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>
diff --git a/layers/public/images/common/ic-v2-logo-twitter-fill.png b/layers/public/images/common/ic-v2-logo-twitter-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..aebc1852d62cc3043b138ca2201ff46421ae7d40
GIT binary patch
literal 373
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(AT%InDAr*{oLjwhy4S0H6JXf@MIxz9gV3FZr
zU)_9`QAmxEb7}x*Wc88>&oq`ExL;9j`_A##q<szyJ2r@RtSFSc&s%+8XP+<Y-8)hm
zC#n*+pLw;c@c!h^@(C+lChmwYf28O+Rq*--R=o|&c-#C!4cA4)1Sc)_5&Cse`27xn
zxqOw10bH*RKCyqSpB7!R>JrPu|0&ZGr{2E%NXHW>C}%o{F@NF*`$y@jFPr~+|5>p^
z=-%~3^1s&#IZe}bUBAlqO3oa2_Z2oj>;pb^I%^ix+-J5bi|?+h*|0@^htYwS+_evU
zSMKmTqQiT%#=bzVBr^W)XZCYv%}ZQ;&Z>pEas*AV&wZs{`seo#`9BQ)>Fe)%nSK%j
Ph7yCPtDnm{r-UW|0PK@`

literal 0
HcmV?d00001

diff --git a/layers/public/images/common/ic-v2-logo-twitter-fill.svg b/layers/public/images/common/ic-v2-logo-twitter-fill.svg
new file mode 100644
index 0000000..72b5b75
--- /dev/null
+++ b/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>
diff --git a/layers/templates/GrVisual01/index.vue b/layers/templates/GrVisual01/index.vue
index 165e28b..4dd8f34 100644
--- a/layers/templates/GrVisual01/index.vue
+++ b/layers/templates/GrVisual01/index.vue
@@ -59,33 +59,12 @@ const handleSendLog = (index: number) => {
         :resources-data="videoPlayData"
         :page-ver-tmpl-seq="props.pageVerTmplSeq"
       />
-      <div
-        v-if="buttonListData.length > 0"
-        class="flex flex-wrap justify-center gap-3 mt-[22px] md:gap-4 md:mt-[52px]"
-      >
-        <BlocksButtonDownload
-          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>
+      <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="props.pageVerTmplSeq"
+        class="mt-[22px] md:mt-[52px]"
+      />
     </div>
   </section>
 </template>
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index 145c87d..56c7cc8 100644
--- a/layers/types/api/gameData.ts
+++ b/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