fix. [SWV-866] 액션버튼 기능 개선 (이미지 타입 추가)

Made-with: Cursor

layers/components/blocks/Button/Launcher.vue

@@ -1,29 +1,25 @@
 <script setup lang="ts">
-import type { CSSProperties, Component } from 'vue'
+import type { CSSProperties } from 'vue'
 import type { PlatformTransformType } from '#layers/types/api/gameData'
 import type {
-  DownloadButtonType,
+  LauncherButtonType,
   ButtonVariant,
   Platform,
 } from '#layers/types/components/button'
 
 interface Props {
-  type?: DownloadButtonType
+  type?: LauncherButtonType
   platform: Platform
   variant?: ButtonVariant
   backgroundColor?: string
   textColor?: string
-  iconComponent?: Component
-  iconProps?: Record<string, any>
   disabled?: boolean
-  useGameFont?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'default',
   variant: 'filled',
   disabled: false,
-  useGameFont: false,
 })
 
 const runtimeConfig = useRuntimeConfig()
@@ -33,7 +29,7 @@ const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
 const { isProcessing, validateLauncher } = useCheckGameStart()
 
-const { gameName, platformType, osType, marketJson, fontFamily } =
+const { gameName, platformType, osType, marketJson } =
   storeToRefs(gameDataStore)
 
 const PLATFORM_ICON_MAP: Record<Platform, string> = {
@@ -55,11 +51,6 @@ const componentTag = computed(() => {
   }
   return 'button'
 })
-const shouldShowPlatformIcon = computed(
-  () =>
-    (props.type === 'default' && props.variant !== 'custom') ||
-    props.type === 'single'
-)
 const shouldShowDownloadIcon = computed(
   () =>
     props.platform === 'pc' &&
@@ -91,9 +82,6 @@ const textStyle = computed<CSSProperties>(() => {
   if (props.textColor) {
     style.color = props.textColor
   }
-  if (props.useGameFont && fontFamily.value) {
-    style.fontFamily = fontFamily.value
-  }
 
   return style
 })
@@ -158,24 +146,19 @@ const handleClick = () => {
     :is="componentTag"
     v-bind="$attrs"
     :class="['btn-base', props.type, { 'no-text': !$slots.default }]"
-    :data-variant="props.variant"
     :data-platform="props.platform"
+    :data-variant="props.variant"
     :style="buttonStyle"
     :disabled="disabled || isProcessing"
     @click="handleClick"
   >
     <span class="btn-content">
-      <span v-if="shouldShowPlatformIcon" class="icon-platform">
+      <span v-if="props.type !== 'duplication'" class="icon-platform">
         <component :is="platformIcon" />
       </span>
       <span class="text" :style="textStyle">
         <slot />
       </span>
-      <component
-        :is="props.iconComponent"
-        v-if="props.iconComponent"
-        v-bind="props.iconProps"
-      />
       <span v-if="shouldShowDownloadIcon" class="icon-download">
         <AtomsIconsDownloadLine />
       </span>
@@ -193,9 +176,6 @@ const handleClick = () => {
 .icon-platform {
   @apply w-5 h-5 mr-2 flex-shrink-0;
 }
-.icon-download {
-  @apply ml-auto pl-4;
-}
 
 .btn-base[data-variant='filled'] {
   @apply bg-[#383838] text-[#ffffff]
@@ -208,6 +188,9 @@ const handleClick = () => {
   @apply bg-white text-[#1F1F1F]
   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg;
 }
+.btn-base[data-variant='outlined']:hover {
+  @apply before:border-[#999];
+}
 .btn-base[data-variant='outlined'][data-platform='app_store'] svg,
 .btn-base[data-variant='outlined'][data-platform='pc'] svg,
 .btn-base[data-variant='outlined'][data-platform='stove'] svg {
@@ -226,13 +209,15 @@ const handleClick = () => {
   @apply line-clamp-2 text-[14px]
   md:text-[16px];
 }
-
 .btn-base.default[data-variant='outlined'] .icon-download {
   @apply border-black/10;
 }
 .btn-base.default[data-variant='outlined'] .icon-download svg {
   @apply fill-[#1F1F1F];
 }
+.icon-download {
+  @apply ml-auto pl-4;
+}
 
 /* duplication */
 .btn-base.duplication {