feat: button common

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -1,14 +1,77 @@
 @import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200 text-white;
-  padding: 1.6rem 3.6rem;
+  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.6rem 3.2rem;
+  &:disabled {
+    filter: brightness(0.9);
+    cursor: not-allowed;
+    color: var(--disabled);
+  }
+  &.loading {
+    &::before {
+      content: "";
+      border-radius: 50%;
+      width: 1.6rem;
+      height: 1.6rem;
+      border: 3px solid rgba(170, 170, 170, 0.5);
+      border-top: 3px solid var(--white);
+      -webkit-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      margin-right: 0.8rem;
+    }
+  }
+  &:hover {
+    @apply shadow-md;
+    &:not(:disabled) {
+      filter: brightness(1.05);
+    }
+  }
+
+  &:focus {
+    outline: none;
+    filter: brightness(1.05);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--text-active);
+  }
+
   &.light {
-    @apply text-base;
-    background-color: #fff !important;
-    border: 1px solid theme("textColor.active") !important;
-    
+    @apply text-base bg-white;
+    border: 1px solid var(--text-active);
+    &.loading {
+      &::before {
+        border-color: var(--primary);
+      }
+    }
   }
   &.large {
+    padding: 3.2rem 4.8rem;
+    &.loading {
+      &::before {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+  }
+
+  .icon {
+    margin-right: 0.8rem;
+    svg path {
+      fill: currentColor;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
   }
 }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -7,18 +7,26 @@ interface Props {
     children?: any,
     type?: ButonType,
     size?: ButtonSize,
-    icon?: HTMLElement,
+    icon?: any,
+    loading?: boolean,
+    disabled?: boolean,
+    onClick?: () => void,
 }
 
-const ButtonCommon = ({ type, size, icon, children }: Props) => {
+const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
+    icon, loading, disabled, children, onClick }: Props) => {
     return (
         <button className={classNames({
             [s.buttonCommon]: true,
-            [s.type]: type,
-            [s.size]: size,
-        })}>
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+            [s.loading]: loading,
+        })}
+            disabled={disabled}
+            onClick={onClick}
+        >
             {
-                icon && { icon }
+                icon && <span className={s.icon}>{icon}</span>
             }
             <span className={s.label}>{children}</span>
         </button>