Merge pull request #302 from KakaoFunding/bug/299

Bug/299
KakaoFunding · May 26, 2024 · 0649d1e · 0649d1e
2 parents 7fa29be + 6369ad7
commit 0649d1e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/src/layouts/Product/DetailMain/ProductCarousel.tsx b/src/layouts/Product/DetailMain/ProductCarousel.tsx
@@ -9,13 +9,10 @@ import styles from './ProductCarousel.module.scss';
 import './ProductCarousel.css';
 
 type ProductCarouselProps = {
-  // TODO : 타입
-  // imgs : [{id : number; url : 'string'}]
   thumbnails: string[];
   className: string;
 };
 
-// TODO : 타입
 const ProductCarousel = ({ thumbnails, className }: ProductCarouselProps) => {
   const [target, setTarget] = useState(0);
 
@@ -45,14 +42,7 @@ const ProductCarousel = ({ thumbnails, className }: ProductCarouselProps) => {
         className={className}
       >
         {thumbnails.map((img) => (
-          <img
-            // TODO : 타입
-            // key : img.id
-            key={img}
-            // key : img.url
-            src={img}
-            alt="상품 대표 이미지"
-          />
+          <img key={img} src={img} alt="상품 대표 이미지" />
         ))}
       </Slider>
     )

diff --git a/src/layouts/Product/DetailMain/index.tsx b/src/layouts/Product/DetailMain/index.tsx
@@ -23,10 +23,19 @@ const DetailMain = ({ productDescription }: DetailMainProps) => {
   } = productDescription;
   return (
     <section className={styles.area_main}>
-      <ProductCarousel
-        thumbnails={productThumbnails}
-        className={styles.carousel}
-      />
+      {productThumbnails.length > 1 && (
+        <ProductCarousel
+          thumbnails={productThumbnails}
+          className={styles.carousel}
+        />
+      )}
+      {productThumbnails.length === 1 && (
+        <img
+          src={productThumbnails[0]}
+          alt={`${productName}상품이미지`}
+          className={styles.carousel}
+        />
+      )}
       <section className={styles.wrapper_info}>
         <section className={styles.desc_prod}>
           <div className={styles.title}>{productName}</div>