diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss new file mode 100644 index 000000000..5ce5cc0ce --- /dev/null +++ b/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; + } +} + diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx new file mode 100644 index 000000000..95236266c --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default ProductImgItem diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index a10eb5865..94ce13cc1 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -6,4 +6,7 @@ @screen lg { max-width: 60rem; } + > div { + width: 100%; + } } 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 325c6b453..9a6d3da75 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/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 { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink' +import { CarouselCommon } from 'src/components/common' +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 (
- + data={DATA} itemKey="product-detail-img" - Component={ImgWithLink} + Component={ProductImgItem} option={option} isDot={true} /> @@ -38,3 +45,4 @@ const ProductImgs = ({ }: Props) => { } export default ProductImgs +