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

Made-with: Cursor

layers/components/blocks/Button/Home.vue

@@ -14,8 +14,8 @@ const analytics = {
 <template>
   <AtomsButtonCircle
     sr-only="home"
-    type="link"
-    to="/home"
+    type="internal"
+    href="/home"
     class="btn-home"
     background-color="rgb(0 0 0 / 0.2)"
     @click="sendLog(locale, analytics)"

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 {

layers/components/blocks/Button/ScrollTop.vue

@@ -2,7 +2,7 @@
 import type { ColorObject, TrackingObject } from '#layers/types/api/common'
 
 interface Props {
-  color: ColorObject
+  backgroundColor: ColorObject
 }
 
 const props = defineProps<Props>()
@@ -19,7 +19,7 @@ const analytics = {
 
 const showBtn = computed(() => windowY.value > 0)
 const backgroundColor = computed(
-  () => getColorCodeFromData(props.color, 'none') ?? 'var(--primary)'
+  () => getColorCodeFromData(props.backgroundColor, 'none') ?? 'var(--primary)'
 )
 
 const handleScrollToTop = () => {

layers/components/blocks/Button/SlideArrows.vue

@@ -10,7 +10,7 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
-const getArrowBgColor = (direction: 'prev' | 'next') => {
+const getArrowBackgroundColor = (direction: 'prev' | 'next') => {
   return (
     getColorCodeFromData(
       props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
@@ -32,7 +32,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
-      :background-color="getArrowBgColor('prev')"
+      :background-color="getArrowBackgroundColor('prev')"
       @click="handleArrowClick('prev')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />
@@ -40,7 +40,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
-      :background-color="getArrowBgColor('next')"
+      :background-color="getArrowBackgroundColor('next')"
       @click="handleArrowClick('next')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />