styles: fix product detail img

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

@@ -0,0 +1,8 @@
+.productImgItem {
+    @apply w-full h-full;
+    min-height: 30rem;
+    img {
+        object-fit: contain;
+    }
+}
+

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ImgWithLink } from 'src/components/common'
+import s from './ProductImgItem.module.scss'
+
+export interface ProductImgItemProps {
+    src: string
+    alt?: string
+}
+
+
+const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
+    return (
+        <section className={s.productImgItem}>
+            <ImgWithLink src={src} alt={alt} />
+        </section >
+    )
+}
+
+export default ProductImgItem

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

@@ -6,4 +6,7 @@
     @screen lg {
         max-width: 60rem;
     }
+    > div {
+        width: 100%;
+    }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { CarouselCommon, ImgWithLink } from 'src/components/common'
+import { CarouselCommon } from 'src/components/common'
-import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
+import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
 import s from './ProductImgs.module.scss'
 
 interface Props {
@@ -9,6 +9,10 @@ interface Props {
 }
 
 const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
+        alt: 'Meat',
+    },
     {
         src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
         alt: 'Broccoli',
@@ -21,15 +25,18 @@ const DATA = [
 
 const option = {
     slidesPerView: 1,
+    // mode: "free",
+
+
 }
 
 const ProductImgs = ({ }: Props) => {
     return (
         <section className={s.productImgs}>
-            <CarouselCommon<ImgWithLinkProps>
+            <CarouselCommon<ProductImgItemProps>
                 data={DATA}
                 itemKey="product-detail-img"
-                Component={ImgWithLink}
+                Component={ProductImgItem}
                 option={option}
                 isDot={true}
             />
@@ -38,3 +45,4 @@ const ProductImgs = ({ }: Props) => {
 }
 
 export default ProductImgs
+