From 9b00964e75f7e742e2d2e0f24ab89de439d599f7 Mon Sep 17 00:00:00 2001
From: Leejin Yang <ejin1996@gmail.com>
Date: Thu, 19 Oct 2023 21:08:40 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20PB=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EC=82=BC=EA=B9=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20(#818)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductDetailItem/ProductDetailItem.tsx        |  2 +-
 .../components/Product/ProductItem/ProductItem.tsx | 14 ++++++++++++--
 frontend/src/mocks/data/pbProducts.json            |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
index ab7437f17..b91b97e2b 100644
--- 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
index 32300d2bc..b1e935dd8 100644
--- 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
index e25f1dc48..cd4491c33 100644
--- 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
     },