Feat : delete product button

Konkuk-KUIT · May 6, 2024 · c9ac483 · c9ac483
1 parent 38970d3
commit c9ac483
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/week6/turtlehwan/src/components/ProductRow.tsx b/week6/turtlehwan/src/components/ProductRow.tsx
@@ -3,15 +3,21 @@ import { Products } from "../App";
 
 interface Props {
   product: Products;
+  deleteProduct: (product: Products) => void;
 }
 
-const ProductRow: React.FC<Props> = ({ product }) => {
+const ProductRow: React.FC<Props> = ({ product, deleteProduct }) => {
+  const handleClickDelBtn = (product: Products) => deleteProduct(product);
+
   return (
     <tr>
       <td style={{ color: product.stocked ? "color" : "red" }}>
         {product.name}
       </td>
       <td>{product.price}$</td>
+      <td>
+        <button onClick={() => handleClickDelBtn(product)}>삭제</button>
+      </td>
     </tr>
   );
 };

diff --git a/week6/turtlehwan/src/components/ProductTable.tsx b/week6/turtlehwan/src/components/ProductTable.tsx
@@ -12,12 +12,14 @@ interface Props {
   products: Products[];
   filterText: string;
   inStockOnly: boolean;
+  deleteProduct: (product: Products) => void;
 }
 
 const ProductTable: React.FC<Props> = ({
   products,
   filterText,
   inStockOnly,
+  deleteProduct,
 }) => {
   const filteredProducts = products.filter(
     (product) =>
@@ -48,7 +50,11 @@ const ProductTable: React.FC<Props> = ({
             <Fragment key={productCategory.category}>
               <ProductCategoryRow category={productCategory.category} />
               {productCategory.products.map((product) => (
-                <ProductRow key={product.id} product={product} />
+                <ProductRow
+                  key={product.id}
+                  product={product}
+                  deleteProduct={deleteProduct}
+                />
               ))}
             </Fragment>
           );