🎨 styles: product detail imgs

:%s

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

@@ -1,13 +1,9 @@
 .productImgs {
-    @apply w-full;
+    @apply w-full flex justify-between items-center;
     @screen sm-only {
         margin-bottom: 2rem;
     }
     @screen lg {
         max-width: 60rem;
     }
-    .img {
-        @apply w-full h-full;
-        object-fit: cover;
-    }
 }

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

@@ -1,22 +1,38 @@
 import React from 'react'
-import { CarouselCommon } from 'src/components/common'
+import { CarouselCommon, ImgWithLink } from 'src/components/common'
+import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
 import s from './ProductImgs.module.scss'
 
-interface ImgProps {
-    src: string, alt?: string
-}
-
 interface Props {
     className?: string
     children?: any,
-    // data: ImgProps[]
+}
+
+const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    },
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    }
+]
+
+const option = {
+    slidesPerView: 1,
 }
 
 const ProductImgs = ({ }: Props) => {
     return (
         <section className={s.productImgs}>
-            {/* <CarouselCommon<ImgProps>  /> */}
-            <img className={s.img} src="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png" alt="" />
+            <CarouselCommon<ImgWithLinkProps>
+                data={DATA}
+                itemKey="product-detail-img"
+                Component={ImgWithLink}
+                option={option}
+                isDot={true}
+            />
         </section >
     )
 }

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

@@ -25,7 +25,7 @@
                 }
             }
             .current {
-                @apply text-active;
+                @apply text-active font-bold sm-headline;
             }
         }
         .description {