From a67028bab966216163a4d6934d699ff34b305384 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 21 Jan 2026 17:31:00 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=EC=95=A1=EC=85=98=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Button/index.vue | 12 ++++++++++++
 layers/components/widgets/ButtonList.vue |  1 +
 2 files changed, 13 insertions(+)

diff --git a/layers/components/atoms/Button/index.vue b/layers/components/atoms/Button/index.vue
index 146ead8..6547678 100644
--- a/layers/components/atoms/Button/index.vue
+++ b/layers/components/atoms/Button/index.vue
@@ -10,6 +10,7 @@ interface props {
   backgroundColor?: string
   textColor?: string
   disabled?: boolean
+  gradient?: boolean
 }
 
 const props = withDefaults(defineProps<props>(), {
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<props>(), {
   target: '_self',
   textColor: 'var(--alternative-02)',
   disabled: false,
+  gradient: false,
 })
 
 const componentTag = computed((): string => {
@@ -85,6 +87,7 @@ const componentProps = computed(() => {
     }"
     :disabled="props.disabled"
   >
+    <i v-if="props.gradient" class="btn-gradient"></i>
     <span class="btn-content">
       <slot />
       <AtomsIconsLongArrowRightLine
@@ -146,4 +149,13 @@ const componentProps = computed(() => {
 .btn-base.size-extra-small .btn-content {
   @apply gap-0.5;
 }
+
+.btn-gradient {
+  @apply absolute top-0 left-0 w-full h-full opacity-[0.7] mix-blend-soft-light;
+  background: radial-gradient(
+    68.19% 81.25% at 50.35% 100%,
+    #fff 20%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
 </style>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index ab5b7ee..13d32f0 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -148,6 +148,7 @@ const handleButtonClick = (button: PageDataResourceGroup) => {
         :background-color="getColorCodeFromData(button.btn_info, 'btn')"
         :text-color="getColorCodeFromData(button.btn_info, 'txt')"
         :disabled="button.btn_info?.detail?.btn_type === 'DEACTIVE'"
+        :gradient="true"
         @click="handleButtonClick(button)"
       >
         {{ button.btn_info?.txt_btn_name }}