feat. 마켓 버튼 구현

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>