fix. 액션 버튼 그라데이션 적용

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>