refactor: productItem에 CartItem을 props로 넘겨주는 방식으로 변경

xodms0309 · Jun 8, 2023 · 656dc6d · 656dc6d
1 parent 1917799
commit 656dc6d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/components/Product/ProductItem/index.tsx b/src/components/Product/ProductItem/index.tsx
@@ -6,17 +6,13 @@ import { Cart, Product } from 'types';
 import { calculateSalePercentage, formatPrice } from 'utils';
 
 interface ProductItemProps {
-  cartList: Cart[];
+  cartItem?: Cart;
   product: Product;
 }
 
-const ProductItem = ({ cartList, product }: ProductItemProps) => {
+const ProductItem = ({ cartItem, product }: ProductItemProps) => {
   const { decreaseItemQuantity, addItem, increaseItemQuantity } = useCart();
 
-  const cartItem = cartList.find(
-    (cartItem) => cartItem.product.id === product.id
-  );
-
   const increase = () => {
     if (!cartItem) return;
     increaseItemQuantity(cartItem.id);

diff --git a/src/components/Product/ProductItemList/index.tsx b/src/components/Product/ProductItemList/index.tsx
@@ -10,9 +10,14 @@ const ProductItemList = () => {
 
   const fetchedProductList =
     data &&
-    data.map((product) => (
-      <ProductItem key={product.id} cartList={cartList} product={product} />
-    ));
+    data.map((product) => {
+      const cartItem = cartList.find(
+        (cartItem) => cartItem.product.id === product.id
+      );
+      return (
+        <ProductItem key={product.id} cartItem={cartItem} product={product} />
+      );
+    });
 
   return <S.ProductListWrapper>{fetchedProductList}</S.ProductListWrapper>;
 };