From 05b47e7c372786a929949e313f690793bd06b311 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 16 Oct 2025 21:01:41 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20=EB=A7=88=EC=BC=93=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Button/index.vue      | 27 ++++--------
 layers/components/blocks/HybridLink.vue       |  2 +-
 layers/components/widgets/ButtonList.vue      | 41 +++++++++++++++++++
 layers/types/api/gameData.ts                  |  1 +
 .../{btn_logo-apple.svg => btn_logo-app.svg}  |  0
 5 files changed, 50 insertions(+), 21 deletions(-)
 rename public/images/common/{btn_logo-apple.svg => btn_logo-app.svg} (100%)

diff --git a/layers/components/atoms/Button/index.vue b/layers/components/atoms/Button/index.vue
index 2fcc8aa..465b635 100644
--- a/layers/components/atoms/Button/index.vue
+++ b/layers/components/atoms/Button/index.vue
@@ -8,14 +8,13 @@ interface props {
   href?: string
   rel?: string
   backgroundColor?: string
-  backgroundImage?: string
   textColor?: string
   disabled?: boolean
 }
 
 const props = withDefaults(defineProps<props>(), {
   type: 'action',
-  buttonSize: 'size-extra-small md:size-medium',
+  buttonSize: 'size-extra-small md:size-large',
   backgroundColor: 'var(--primary)',
   textColor: 'var(--alternative-02)',
   disabled: false,
@@ -53,29 +52,17 @@ const componentProps = computed(() => {
 
   return baseProps
 })
-const buttonStyles = computed(() => {
-  const styles: Record<string, string> = {
-    backgroundColor: props.backgroundColor,
-    color: props.textColor,
-  }
-
-  if (props.backgroundImage) {
-    styles.backgroundImage = `url(${props.backgroundImage})`
-    styles.backgroundSize = 'contain'
-    styles.backgroundPosition = 'center'
-    styles.backgroundRepeat = 'no-repeat'
-  }
-
-  return styles
-})
 </script>
 
 <template>
   <component
     :is="componentTag"
-    v-bind="{ ...componentProps, ...$attrs }"
-    :class="['btn-base', props.buttonSize, $attrs?.class]"
-    :style="buttonStyles"
+    v-bind="{ ...componentProps }"
+    :class="['btn-base', props.buttonSize]"
+    :style="{
+      backgroundColor: props.backgroundColor,
+      color: props.textColor,
+    }"
   >
     <span class="btn-content">
       <slot />
diff --git a/layers/components/blocks/HybridLink.vue b/layers/components/blocks/HybridLink.vue
index 26cd7d7..892b7b5 100644
--- a/layers/components/blocks/HybridLink.vue
+++ b/layers/components/blocks/HybridLink.vue
@@ -33,7 +33,7 @@ const componentProps = computed(() => {
 </script>
 
 <template>
-  <component :is="componentTag" v-bind="{ ...$attrs, ...componentProps }">
+  <component :is="componentTag" v-bind="{ ...componentProps }">
     <slot />
   </component>
 </template>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index 5bffbb2..d9a9da8 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -11,6 +11,8 @@ interface ButtonListProps {
 
 const props = defineProps<ButtonListProps>()
 
+const { gameData } = useGameDataStore()
+
 const BUTTON_TYPE_MAP = {
   URL: {
     _self: 'internal' as const,
@@ -34,6 +36,32 @@ const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
 
   return DEFAULT_BUTTON_TYPE
 }
+
+const getButtonBackgroundImage = (
+  btnInfo: PageDataResourceGroupBtnInfo
+): string => {
+  const marketType = btnInfo?.detail?.market_type
+  const marketImageMap: Record<string, string> = {
+    google_play: '/images/common/btn_logo-google.svg',
+    app_store: '/images/common/btn_logo-app.svg',
+    pc: '/images/common/btn_logo-pc.svg',
+  }
+
+  if (marketType && marketImageMap[marketType]) {
+    return marketImageMap[marketType]
+  }
+
+  return ''
+}
+
+const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo) => {
+  const marketType = btnInfo?.detail?.market_type
+  if (marketType) {
+    const url = gameData?.market[marketType]?.url
+    window.open(url, '_blank')
+    return
+  }
+}
 </script>
 
 <template>
@@ -61,8 +89,21 @@ const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
         })
       "
       :disabled="button.btn_info?.disabled"
+      :class="button.btn_info?.detail?.market_type ? 'btn-market' : ''"
+      :style="{
+        backgroundImage: `url(${getButtonBackgroundImage(button.btn_info)})`,
+      }"
+      @click="handleButtonClick(button.btn_info)"
     >
       {{ button.btn_info?.txt_btn_name }}
     </AtomsButton>
   </div>
 </template>
+
+<style scoped>
+:deep(.btn-market) {
+  @apply flex items-start bg-[16px_50%] bg-[length:auto_34px] bg-no-repeat
+  min-w-[113px] pt-[23px] pl-[44px] pr-[22px] text-[11px]
+  md:min-w-[150px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
+}
+</style>
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index 220efae..e073d59 100644
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -40,6 +40,7 @@ export interface GameDataValue {
   sns: GameDataSns
   footer: string // JSON 문자열로 변경
   comm_img: GameDataCommImg
+  market: Record<string, { url: string }>
 }
 
 // ===== 세부 데이터 타입들 =====
diff --git a/public/images/common/btn_logo-apple.svg b/public/images/common/btn_logo-app.svg
similarity index 100%
rename from public/images/common/btn_logo-apple.svg
rename to public/images/common/btn_logo-app.svg