🎨 styles: product detail imgs

:%s

src/components/common/ImgWithLink/ImgWithLink.module.scss

@@ -0,0 +1,4 @@
+.imgWithLink {
+    @apply w-full h-full;
+    object-fit: cover;
+}

src/components/common/ImgWithLink/ImgWithLink.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import s from './ImgWithLink.module.scss'
+
+export interface ImgWithLinkProps {
+    src: string,
+    alt?: string,
+}
+
+const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
+    return (
+        <img className={s.imgWithLink} src={src} alt={alt} />
+
+    )
+}
+
+export default ImgWithLink

src/components/common/index.ts

@@ -30,3 +30,4 @@ export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
+export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'

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>  /> */}
+            <CarouselCommon<ImgWithLinkProps>
-            <img className={s.img} src="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png" alt="" />
+                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 {