diff --git a/pages/test.tsx b/pages/test.tsx
index 644dc08ed..aa3fd1780 100644
--- a/pages/test.tsx
+++ b/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/> */}
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index c7b9f1ffa..41ecee010 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -1,102 +1,124 @@
 @import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius 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;
-  }
-  @screen lg {
-    padding: 0.8rem 3.2rem;
-  }
-  &:disabled {
-    filter: brightness(0.9);
-    cursor: not-allowed;
-    color: var(--disabled);
-  }
-  &:hover {
-    @apply shadow-md;
-    &:not(:disabled) {
+  @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;
+    @screen md {
+      padding: 1.6rem 1.6rem;
+    }
+    @screen lg {
+      padding: 1.6rem 3.2rem;
+    }
+    &:disabled {
+      filter: brightness(0.9);
+      cursor: not-allowed;
+      color: var(--disabled);
+    }
+    &: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);
+    }
   }
-  &:focus {
-    outline: none;
-    filter: brightness(1.05);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--text-active);
-  }
-
   &.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;
+    .inner {
+      &::after {
+        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;
+      }
     }
   }
 
   &.light {
-    @apply text-base bg-white;
-    border: 1px solid var(--text-active);
+    @apply shape-common-border;
+    &::before {
+      background-color: var(--text-active);
+    }
+    .inner {
+      @apply text-base bg-white;
+    }
     &.loading {
-      &::before {
-        border-top-color: var(--primary);
+      .inner {
+        &::after {
+          border-top-color: var(--primary);
+        }
       }
     }
   }
 
   &.lightBorderNone {
-    @apply bg-white text-primary;
+    .inner {
+      @apply bg-white text-primary;
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--primary);
       }
     }
   }
 
   &.ghost {
-    @apply bg-white text-primary;
-    border: 1px solid var(--primary);
+    @apply shape-common-border;
+    .inner {
+      @apply bg-white text-primary;
+    }
+    &::before {
+      background-color: var(--primary);
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--text-active);
       }
     }
   }
 
   &.onlyIcon {
-    padding: 0.8rem;
-    .icon {
-      margin: 0;
+    .inner {
+      padding: 1.6rem;
+      .icon {
+        margin: 0;
+      }
     }
   }
 
   &.large {
-    padding: 1rem 1.5rem;
-    &.onlyIcon {
-      padding: 1rem;
-    }
-    @screen md {
-      padding: 1.6rem 3.2rem;
+    .inner {
+      padding: 1rem 1.5rem;
       &.onlyIcon {
-        padding: 1.6rem;
+        padding: 1rem;
+      }
+      @screen md {
+        padding: 1.6rem 3.2rem;
+        &.onlyIcon {
+          padding: 1.6rem;
+        }
+      }
+      @screen lg {
+        padding: 1.6rem 4.8rem;
       }
     }
-    @screen lg {
-      padding: 1.6rem 4.8rem;
-    }
     &.loading {
-      &::before {
+      .inner::before {
         width: 2.4rem;
         height: 2.4rem;
       }
@@ -104,9 +126,11 @@
   }
 
   &.preserve {
-    flex-direction: row-reverse;
-    .icon {
-      margin: 0 0 0 1.6rem;
+    .inner {
+      flex-direction: row-reverse;
+      .icon {
+        margin: 0 0 0 1.6rem;
+      }
     }
   }
 
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 5b943f65b..965e9519e 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
             disabled={disabled}
             onClick={onClick}
         >
-            {
-                icon && <span className={s.icon}>{icon}</span>
-            }
-            <span className={s.label}>{children}</span>
+            <div className={s.inner}>
+                {
+                    icon && <span className={s.icon}>{icon}</span>
+                }
+                <span className={s.label}>{children}</span>
+            </div>
         </button>
     )
 })
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
index 9a6d3da75..c300fba38 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
+++ b/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) => {
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
index 403782c51..2119b3295 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
+++ b/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;
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index c73526a27..5ce5f24af 100644
--- a/src/styles/_utilities.scss
+++ b/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 {