feat. 마켓 버튼 구현

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 }"
+    v-bind="{ ...componentProps }"
-    :class="['btn-base', props.buttonSize, $attrs?.class]"
+    :class="['btn-base', props.buttonSize]"
-    :style="buttonStyles"
+    :style="{
+      backgroundColor: props.backgroundColor,
+      color: props.textColor,
+    }"
   >
     <span class="btn-content">
       <slot />

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>

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>

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 }>
 }
 
 // ===== 세부 데이터 타입들 =====