fix. Launcher 버튼 수정

This commit is contained in:
clkim
2026-01-26 17:03:54 +09:00
parent c04a97ca3e
commit b628fbc117
2 changed files with 22 additions and 26 deletions

View File

@@ -42,7 +42,6 @@ const PLATFORM_ICON_MAP: Record<Platform, string> = {
pc: 'AtomsIconsLogoWindow',
stove: 'AtomsIconsLogoStove',
} as const
const DUP_IMAGE_MAP: Record<Platform, string> = {
google_play: '/images/common/btn_launcher/btn_logo-google.svg',
app_store: '/images/common/btn_launcher/btn_logo-app.svg',
@@ -56,7 +55,17 @@ const componentTag = computed(() => {
}
return 'button'
})
const isSingle = computed(() => props.type === 'single')
const shouldShowPlatformIcon = computed(
() =>
(props.type === 'default' && props.variant !== 'custom') ||
props.type === 'single'
)
const shouldShowDownloadIcon = computed(
() =>
props.platform === 'pc' &&
props.type === 'default' &&
props.variant !== 'custom'
)
const supportedPlatforms = computed(
() =>
getSupportedPlatforms(
@@ -151,7 +160,7 @@ const handleClick = () => {
:class="[
'btn-base',
props.type,
{ 'no-text': isSingle && !$slots.default },
{ 'no-text': props.type === 'single' && !$slots.default },
]"
:data-variant="props.variant"
:data-platform="props.platform"
@@ -160,11 +169,9 @@ const handleClick = () => {
@click="handleClick"
>
<span class="btn-content">
<component
:is="platformIcon"
v-if="props.type !== 'duplication'"
class="icon-platform"
/>
<span v-if="shouldShowPlatformIcon" class="icon-platform">
<component :is="platformIcon" />
</span>
<span class="text" :style="textStyle">
<slot />
</span>
@@ -173,10 +180,7 @@ const handleClick = () => {
v-if="props.iconComponent"
v-bind="props.iconProps"
/>
<span
v-if="props.platform === 'pc' && props.type === 'default'"
class="icon-download"
>
<span v-if="shouldShowDownloadIcon" class="icon-download">
<AtomsIconsDownloadLine />
</span>
</span>
@@ -191,7 +195,10 @@ const handleClick = () => {
@apply relative flex items-center w-full z-[1];
}
.icon-platform {
@apply w-5 h-5 flex-shrink-0;
@apply w-5 h-5 mr-2 flex-shrink-0;
}
.icon-download {
@apply ml-auto pl-4;
}
.btn-base[data-variant='filled'] {
@@ -223,12 +230,6 @@ const handleClick = () => {
@apply line-clamp-2 text-[14px]
md:text-[16px];
}
.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;

View File

@@ -378,6 +378,7 @@ onMounted(() => {
<template v-if="start1depthData">
<BlocksButtonLauncher
platform="pc"
variant="custom"
:background-color="
getColorCodeFromData(start1depthData?.btn_info, 'btn')
"
@@ -579,12 +580,9 @@ onMounted(() => {
.btn-start:hover .nav-2depth {
@apply md:block;
}
.btn-start:deep(.btn-base[data-variant='filled']) {
.btn-start:deep(.btn-base.default[data-variant='custom']) {
@apply w-full h-[48px] px-10 font-[700] text-[16px];
}
.btn-start:deep(.btn-base[data-variant='filled']) svg {
@apply hidden;
}
.btn-start .nav-2depth {
@apply left-[unset] right-[-40px];
@@ -599,9 +597,6 @@ onMounted(() => {
.btn-start .nav-2depth:deep(.btn-base) .text {
@apply pl-1.5 text-[15px] text-theme-foreground-reversal;
}
.btn-start:deep(.nav-2depth .icon-download) {
@apply hidden;
}
[data-theme='light'] {
.btn-start .nav-2depth:deep(.btn-base) .icon-platform {