🎨 styles: button common with shape common

:%s

pages/test.tsx

@@ -78,6 +78,11 @@ export default function Test() {
 }
   return (
     <>
+    <div className="shape-common-border">
+      <div className="inner">
+        Lorem ipsum dolor sit amet.
+      </div>
+    </div>
       {/* <BlogDetailPage /> */}
       
       {/* <RecipeListPage/> */}

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

@@ -1,16 +1,18 @@
 @import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  @apply shape-common;
+  .inner {
+    padding: 1rem 2rem;
+    @apply bg-primary transition-all duration-200 text-white font-bold;
     display: flex;
     justify-content: center;
     align-items: center;
-  padding: 1rem 2rem;
     @screen md {
-    padding: 0.8rem 1.6rem;
+      padding: 1.6rem 1.6rem;
     }
     @screen lg {
-    padding: 0.8rem 3.2rem;
+      padding: 1.6rem 3.2rem;
     }
     &:disabled {
       filter: brightness(0.9);
@@ -30,9 +32,10 @@
     &:focus-visible {
       outline: 2px solid var(--text-active);
     }
-
+  }
   &.loading {
-    &::before {
+    .inner {
+      &::after {
         content: "";
         border-radius: 50%;
         width: 1.6rem;
@@ -44,44 +47,62 @@
         margin-right: 0.8rem;
       }
     }
+  }
 
   &.light {
-    @apply text-base bg-white;
+    @apply shape-common-border;
-    border: 1px solid var(--text-active);
-    &.loading {
     &::before {
+      background-color: var(--text-active);
+    }
+    .inner {
+      @apply text-base bg-white;
+    }
+    &.loading {
+      .inner {
+        &::after {
           border-top-color: var(--primary);
         }
       }
     }
+  }
 
   &.lightBorderNone {
+    .inner {
       @apply bg-white text-primary;
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--primary);
       }
     }
   }
 
   &.ghost {
+    @apply shape-common-border;
+    .inner {
       @apply bg-white text-primary;
-    border: 1px solid var(--primary);
+    }
-    &.loading {
     &::before {
+      background-color: var(--primary);
+    }
+    &.loading {
+      .inner::after {
         border-top-color: var(--text-active);
       }
     }
   }
 
   &.onlyIcon {
-    padding: 0.8rem;
+    .inner {
+      padding: 1.6rem;
       .icon {
         margin: 0;
       }
     }
+  }
 
   &.large {
+    .inner {
       padding: 1rem 1.5rem;
       &.onlyIcon {
         padding: 1rem;
@@ -95,8 +116,9 @@
       @screen lg {
         padding: 1.6rem 4.8rem;
       }
+    }
     &.loading {
-      &::before {
+      .inner::before {
         width: 2.4rem;
         height: 2.4rem;
       }
@@ -104,11 +126,13 @@
   }
 
   &.preserve {
+    .inner {
       flex-direction: row-reverse;
       .icon {
         margin: 0 0 0 1.6rem;
       }
     }
+  }
 
   .icon {
     margin: 0 1.6rem 0 0;

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
             disabled={disabled}
             onClick={onClick}
         >
+            <div className={s.inner}>
                 {
                     icon && <span className={s.icon}>{icon}</span>
                 }
                 <span className={s.label}>{children}</span>
+            </div>
         </button>
     )
 })

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx

@@ -25,9 +25,6 @@ const DATA = [
 
 const option = {
     slidesPerView: 1,
-    // mode: "free",
-
-
 }
 
 const ProductImgs = ({ }: Props) => {

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss

@@ -64,6 +64,9 @@
                     margin-left: 0.8rem;
                 }
             }
+            svg path {
+                fill: currentColor;
+            }
         }
         button {
             @apply w-full;

src/styles/_utilities.scss

@@ -121,12 +121,13 @@
 
     .shape-common-border {
         position: relative;
-        $border: 2px;
+        $border: 1px;
         margin: $border;
 
         .inner {
             background: var(--white);
             clip-path: url(#svg-custom-shape);
+            margin: 1px;
         }
         &::before {
             position: absolute;
@@ -152,6 +153,7 @@
 
         .inner {
             padding: 2rem;
+            margin: 1px;
             clip-path: url(#svg-custom-shape-lg);
         }
         &::before {