fix. 코드 리팩토링

layers/components/blocks/Button/Launcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, Component } from 'vue'
 import type { PlatformTransformType } from '#layers/types/api/gameData'
 import type {
   DownloadButtonType,
@@ -13,6 +13,8 @@ interface Props {
   variant?: ButtonVariant
   backgroundColor?: string
   textColor?: string
+  iconComponent?: Component
+  iconProps?: Record<string, any>
   disabled?: boolean
 }
 
@@ -29,7 +31,8 @@ const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
 const { isProcessing, validateLauncher } = useCheckGameStart()
 
-const { gameData } = storeToRefs(gameDataStore)
+const { gameName, platformType, osType, marketJson } =
+  storeToRefs(gameDataStore)
 
 const PLATFORM_ICON_MAP: Record<Platform, string> = {
   google_play: 'AtomsIconsLogoGoogle',
@@ -55,8 +58,8 @@ const isSingle = computed(() => props.type === 'single')
 const supportedPlatforms = computed(
   () =>
     getSupportedPlatforms(
-      gameData.value?.platform_type,
-      gameData.value?.os_type
+      platformType.value,
+      osType.value
     ) as PlatformTransformType[]
 )
 const platformIcon = computed(() => PLATFORM_ICON_MAP[props.platform])
@@ -81,11 +84,7 @@ const tmWithGameName = (key: string): string => {
   const raw = tm(key)
   if (typeof raw !== 'string') return ''
 
-  const withName = raw.replace(
-    /%게임명%/g,
-    highlight(gameData.value?.game_name || '')
-  )
-
+  const withName = raw.replace(/%게임명%/g, highlight(gameName.value))
   const platformLines = supportedPlatforms.value
     .map(platform => highlight(formatSnakeToTitle(platform)))
     .filter(Boolean)
@@ -105,7 +104,8 @@ const handleClick = () => {
   }
 
   if (props.platform === 'pc') {
-    if (device.isDesktop && gameData.value?.platform_type !== '2') {
+    if (device.isDesktop && platformType.value !== '2') {
+      // 디바이스 pc 환경이면서 모바일 스토어 전용이 아니면 런처 실행
       validateLauncher()
       return
     } else {
@@ -122,14 +122,13 @@ const handleClick = () => {
         return
       }
 
-      const url = gameData.value?.market_json?.[target]?.url || ''
-
+      const url = marketJson.value?.[target]?.url ?? ''
       window.open(url, '_blank')
       return
     }
   }
 
-  const url = gameData.value?.market_json[props.platform]?.url || ''
+  const url = marketJson.value?.[props.platform]?.url ?? ''
   if (url) window.open(url, '_blank')
 }
 </script>
@@ -158,6 +157,11 @@ const handleClick = () => {
       <span class="text">
         <slot />
       </span>
+      <component
+        :is="props.iconComponent"
+        v-if="props.iconComponent"
+        v-bind="props.iconProps"
+      />
       <span
         v-if="props.platform === 'pc' && props.type === 'default'"
         class="icon-download"
@@ -170,27 +174,25 @@ const handleClick = () => {
 
 <style scoped>
 .btn-base {
-  @apply overflow-hidden inline-flex relative font-medium  rounded-lg cursor-pointer
-    before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
-    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0 after:rounded-lg;
-}
-.btn-base:hover {
-  @apply after:opacity-20;
+  @apply overflow-hidden inline-flex relative font-medium rounded-lg cursor-pointer;
 }
 .btn-content {
-  @apply relative flex items-center w-full text-left z-[1];
+  @apply relative flex items-center w-full z-[1];
 }
 .icon-platform {
   @apply w-5 h-5 flex-shrink-0;
 }
 
 .btn-base[data-variant='filled'] {
-  @apply bg-[#383838] text-[#ffffff];
+  @apply bg-[#383838] text-[#ffffff]
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0 after:rounded-lg
+  hover:after:opacity-20;
 }
+
 .btn-base[data-variant='outlined'] {
   @apply bg-white text-[#1F1F1F]
-  before:border-black/10
-  after:hidden;
+  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'][data-platform='app_store'] svg,
 .btn-base[data-variant='outlined'][data-platform='pc'] svg,
@@ -200,25 +202,23 @@ const handleClick = () => {
 
 /* default */
 .btn-base.default {
-  @apply w-[296px] py-3.5 px-5
-  md:w-[356px] md:py-4 md:px-6;
-}
-.btn-base.default .text {
-  @apply pl-2 pr-4 line-clamp-2 text-[14px]
-  md:text-[16px];
-}
-.btn-base.default .icon-download {
-  @apply ml-auto pl-4;
+  @apply justify-center py-3.5 px-5
+  md:py-4 md:px-6;
 }
 .btn-base.default .btn-content {
   @apply justify-center;
 }
-.btn-base.default[data-platform='pc'] .btn-content {
-  @apply justify-start;
+.btn-base.default .text {
+  @apply line-clamp-2 text-[14px]
+  md:text-[16px];
 }
-.btn-base.default[data-platform='stove'] {
-  @apply bg-[#FC4420];
+.btn-base.default .icon-platform + .text {
+  @apply pl-2;
 }
+.btn-base.default .icon-download {
+  @apply ml-auto pl-4;
+}
+
 .btn-base.default[data-variant='outlined'] .icon-download {
   @apply border-black/10;
 }
@@ -229,7 +229,7 @@ const handleClick = () => {
 /* duplication */
 .btn-base.duplication {
   @apply bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat backdrop-blur-[15px]
-  pt-[22px] pl-[47px] pr-[22px] pb-[7px] text-[11px]
+  pt-[25px] pl-[47px] pr-[22px] pb-[7px] text-[11px]
   md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:pb-[11px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
 }
 .btn-base.duplication[data-platform='google_play'] {
@@ -254,13 +254,17 @@ const handleClick = () => {
   h-[40px] px-3.5
   md:h-[48px];
 }
+.btn-base.single .btn-content {
+  @apply justify-center;
+}
 .btn-base.single.no-text {
   @apply min-w-[40px] px-0 md:min-w-[48px];
 }
 .btn-base.single.no-text .icon-platform {
   @apply mx-auto;
 }
-.btn-base.single .icon-platform {
-  @apply mr-1;
+
+.btn-base[data-variant='outlined'] {
+  @apply hover:before:border-[#999];
 }
 </style>

layers/components/blocks/Button/SlideArrows.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PageDataResourceGroups } from '#layers/types/api/pageData'
+
+interface Props {
+  arrowsData?: PageDataResourceGroups
+}
+
+const props = defineProps<Props>()
+
+const { locale } = useI18n()
+const { sendLog } = useAnalytics()
+
+const handleArrowClick = (direction: 'prev' | 'next') => {
+  if (props.arrowsData) {
+    const arrowIndex = direction === 'prev' ? 0 : 1
+    sendLog(locale.value, props.arrowsData[arrowIndex]?.tracking)
+  }
+}
+</script>
+
+<template>
+  <div class="splide__arrows">
+    <AtomsButtonCircle
+      sr-only="Previous"
+      class="splide-arrow splide__arrow--prev"
+      @click="handleArrowClick('prev')"
+    />
+    <AtomsButtonCircle
+      sr-only="Next"
+      class="splide-arrow splide__arrow--next"
+      @click="handleArrowClick('next')"
+    />
+  </div>
+</template>