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
+