fix. 버튼 아이콘 사이즈 변경

layers/assets/css/components/_button.css

@@ -19,4 +19,14 @@
     @apply px-6 h-10 text-sm rounded
     before:rounded after:rounded;
   }
+
+  /* Icon Size Classes */
+  .size-large .icon,
+  .size-medium .icon {
+    @apply w-5 h-5;
+  }
+  .size-small .icon,
+  .size-extra-small .icon {
+    @apply w-4 h-4;
+  }
 }

layers/components/atoms/Button/index.vue

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<props>(), {
 
 const componentTag = computed((): string => {
   switch (props.type) {
+    case 'link':
     case 'download':
     case 'external':
       return 'a'
@@ -66,13 +67,16 @@ const componentProps = computed(() => {
   >
     <span class="btn-content">
       <slot />
-      <AtomsIconsLongArrowRightLine v-if="props.type === 'internal'" />
+      <AtomsIconsLongArrowRightLine
+        v-if="props.type === 'internal'"
+        class="icon"
+      />
       <AtomsIconsWebLinkLine
         v-if="props.type === 'external'"
-        size="24"
         color="#ebebeb"
+        class="icon"
       />
-      <AtomsIconsDownloadLine v-if="props.type === 'download'" />
+      <AtomsIconsDownloadLine v-if="props.type === 'download'" class="icon" />
     </span>
   </component>
 </template>

layers/components/atoms/icons/DownloadLine.vue

@@ -5,7 +5,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  size: 24,
+  size: 20,
   color: '#EBEBEB',
 })
 </script>
@@ -15,15 +15,15 @@ withDefaults(defineProps<Props>(), {
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
+    viewBox="0 0 20 20"
     fill="none"
   >
     <path
-      d="M10.75 3.25L10.75 12.2322L6.88391 8.36611C6.39576 7.87796 5.6043 7.87796 5.11615 8.36611C4.62799 8.85427 4.62799 9.64573 5.11615 10.1339L11.1161 16.1339C11.3506 16.3683 11.6685 16.5 12 16.5C12.3316 16.5 12.6495 16.3683 12.8839 16.1339L18.8839 10.1339C19.3721 9.64573 19.3721 8.85427 18.8839 8.36611C18.3958 7.87796 17.6043 7.87796 17.1161 8.36611L13.25 12.2322L13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3097 2 10.75 2.55964 10.75 3.25Z"
+      d="M8.9585 2.70829L8.9585 10.1935L5.73673 6.97172C5.32993 6.56493 4.67039 6.56493 4.26359 6.97172C3.85679 7.37852 3.85679 8.03807 4.26359 8.44486L9.26359 13.4449C9.45894 13.6402 9.72389 13.75 10.0002 13.75C10.2764 13.75 10.5414 13.6402 10.7367 13.4449L15.7367 8.44486C16.1435 8.03806 16.1435 7.37852 15.7367 6.97172C15.3299 6.56493 14.6704 6.56493 14.2636 6.97172L11.0418 10.1935L11.0418 2.70829C11.0418 2.133 10.5755 1.66663 10.0002 1.66663C9.42487 1.66663 8.9585 2.133 8.9585 2.70829Z"
       :fill="color"
     />
     <path
-      d="M20 21C20.6904 21 21.25 20.4404 21.25 19.75L21.25 17.75C21.25 17.0596 20.6904 16.5 20 16.5C19.3097 16.5 18.75 17.0596 18.75 17.75L18.75 18.5L5.25003 18.5L5.25003 17.75C5.25003 17.0596 4.69039 16.5 4.00003 16.5C3.30967 16.5 2.75003 17.0596 2.75003 17.75L2.75003 19.75C2.75003 20.4404 3.30967 21 4.00003 21L20 21Z"
+      d="M16.6668 17.5C17.2421 17.5 17.7085 17.0336 17.7085 16.4583L17.7085 14.7916C17.7085 14.2163 17.2421 13.75 16.6668 13.75C16.0915 13.75 15.6252 14.2163 15.6252 14.7916L15.6252 15.4166L4.37516 15.4166L4.37516 14.7916C4.37516 14.2163 3.90879 13.75 3.33349 13.75C2.7582 13.75 2.29183 14.2163 2.29183 14.7916L2.29183 16.4583C2.29183 17.0336 2.7582 17.5 3.33349 17.5L16.6668 17.5Z"
       :fill="color"
     />
   </svg>

layers/types/components/button.ts

@@ -1,3 +1,8 @@
-export type ButtonType = 'internal' | 'external' | 'download' | 'action'
+export type ButtonType =
+  | 'internal'
+  | 'external'
+  | 'download'
+  | 'action'
+  | 'link'
 export type ButtonSize = 'large' | 'medium' | 'small' | 'extra-small'
 export type ButtonVariant = 'filled' | 'outlined'