[FE] feat: PB 상품 목록에서 상품 썸네일 삼김이로 수정 (#818)

woowacourse-teams · Oct 19, 2023 · 9b00964 · 9b00964
1 parent a7d28e0
commit 9b00964
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
@@ -20,7 +20,7 @@ const ProductDetailItem = ({ category, productDetail }: ProductDetailItemProps)
   return (
     <ProductDetailContainer>
       <ImageWrapper>
-        {image !== null ? (
+        {image ? (
           <img src={image} width={300} alt={name} />
         ) : category === CATEGORY_TYPE.FOOD ? (
           <PreviewImage width={300} />

diff --git a/frontend/src/components/Product/ProductItem/ProductItem.tsx b/frontend/src/components/Product/ProductItem/ProductItem.tsx
@@ -1,9 +1,12 @@
 import { Text, useTheme } from '@fun-eat/design-system';
 import { memo, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import PreviewImage from '@/assets/characters.svg';
+import PBPreviewImage from '@/assets/samgakgimbab.svg';
 import { Skeleton, SvgIcon } from '@/components/Common';
+import { CATEGORY_TYPE } from '@/constants';
 import type { Product } from '@/types/product';
 
 interface ProductItemProps {
@@ -12,12 +15,17 @@ interface ProductItemProps {
 
 const ProductItem = ({ product }: ProductItemProps) => {
   const theme = useTheme();
+  const { category } = useParams();
   const { name, price, image, averageRating, reviewCount } = product;
   const [isImageLoading, setIsImageLoading] = useState(true);
 
+  if (!category) {
+    return null;
+  }
+
   return (
     <ProductItemContainer>
-      {image !== null ? (
+      {image ? (
         <>
           <ProductImage
             src={image}
@@ -29,8 +37,10 @@ const ProductItem = ({ product }: ProductItemProps) => {
           />
           {isImageLoading && <Skeleton width={90} height={90} />}
         </>
-      ) : (
+      ) : category === CATEGORY_TYPE.FOOD ? (
         <PreviewImage width={90} height={90} />
+      ) : (
+        <PBPreviewImage width={90} height={90} />
       )}
       <ProductInfoWrapper>
         <Text size="lg" weight="bold">

diff --git a/frontend/src/mocks/data/pbProducts.json b/frontend/src/mocks/data/pbProducts.json
@@ -37,7 +37,7 @@
       "id": 5,
       "name": "PB 버터링",
       "price": 1000,
-      "image": "https://cdn.pixabay.com/photo/2016/03/23/15/00/ice-cream-1274894_1280.jpg",
+      "image": "",
       "averageRating": 4.0,
       "reviewCount": 100
     },