From 5cb2f492984186bab8934c38ae3eae25433795e4 Mon Sep 17 00:00:00 2001
From: YeongseoYoon <l112xpla@gmail.com>
Date: Fri, 17 Jan 2025 00:38:01 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ProductEditForm=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/product/components/Accordion.tsx | 50 ++-----------------
 .../features/product/components/EditForm.tsx  | 40 +++++++++++++++
 2 files changed, 45 insertions(+), 45 deletions(-)
 create mode 100644 src/refactoring/features/product/components/EditForm.tsx

diff --git a/src/refactoring/features/product/components/Accordion.tsx b/src/refactoring/features/product/components/Accordion.tsx
index 640a4b37..e7b0e0b9 100644
--- a/src/refactoring/features/product/components/Accordion.tsx
+++ b/src/refactoring/features/product/components/Accordion.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Product, Discount } from '../../../../types';
 import { useAccordion } from '../../../hooks/useAccordion';
+import { ProductEditForm } from './EditForm';
 
 interface ProductAccordionProps {
   product: Product;
@@ -18,17 +19,9 @@ export const ProductAccordion = ({ product, onProductUpdate }: ProductAccordionP
     setEditingProduct({ ...product });
   };
 
-  const handleProductNameUpdate = (productId: string, newName: string) => {
-    if (editingProduct && editingProduct.id === productId) {
-      const updatedProduct = { ...editingProduct, name: newName };
-      setEditingProduct(updatedProduct);
-    }
-  };
-
-  const handlePriceUpdate = (productId: string, newPrice: number) => {
-    if (editingProduct && editingProduct.id === productId) {
-      const updatedProduct = { ...editingProduct, price: newPrice };
-      setEditingProduct(updatedProduct);
+  const handleUpdateProduct = <K extends keyof Product>(field: K, value: Product[K]) => {
+    if (editingProduct) {
+      setEditingProduct({ ...editingProduct, [field]: value });
     }
   };
 
@@ -39,13 +32,6 @@ export const ProductAccordion = ({ product, onProductUpdate }: ProductAccordionP
     }
   };
 
-  const handleStockUpdate = (productId: string, newStock: number) => {
-    if (editingProduct && editingProduct.id === productId) {
-      const updatedProduct = { ...editingProduct, stock: newStock };
-      setEditingProduct(updatedProduct);
-    }
-  };
-
   const handleAddDiscount = () => {
     if (editingProduct) {
       const newProduct = {
@@ -82,33 +68,7 @@ export const ProductAccordion = ({ product, onProductUpdate }: ProductAccordionP
         <div className="mt-2">
           {editingProduct ? (
             <div>
-              <div className="mb-4">
-                <label className="block mb-1">상품명: </label>
-                <input
-                  type="text"
-                  value={editingProduct.name}
-                  onChange={(e) => handleProductNameUpdate(product.id, e.target.value)}
-                  className="w-full p-2 border rounded"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block mb-1">가격: </label>
-                <input
-                  type="number"
-                  value={editingProduct.price}
-                  onChange={(e) => handlePriceUpdate(product.id, parseInt(e.target.value))}
-                  className="w-full p-2 border rounded"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block mb-1">재고: </label>
-                <input
-                  type="number"
-                  value={editingProduct.stock}
-                  onChange={(e) => handleStockUpdate(product.id, parseInt(e.target.value))}
-                  className="w-full p-2 border rounded"
-                />
-              </div>
+              <ProductEditForm product={editingProduct} onUpdate={handleUpdateProduct} />
               <div>
                 <h4 className="text-lg font-semibold mb-2">할인 정보</h4>
                 {editingProduct.discounts.map((discount, index) => (
diff --git a/src/refactoring/features/product/components/EditForm.tsx b/src/refactoring/features/product/components/EditForm.tsx
new file mode 100644
index 00000000..2291cbc7
--- /dev/null
+++ b/src/refactoring/features/product/components/EditForm.tsx
@@ -0,0 +1,40 @@
+import { Product } from '../../../../types';
+
+interface ProductEditFormProps {
+  product: Product;
+  onUpdate: <K extends keyof Product>(field: K, value: Product[K]) => void;
+}
+
+export const ProductEditForm = ({ product, onUpdate }: ProductEditFormProps) => {
+  return (
+    <div>
+      <div className="mb-4">
+        <label className="block mb-1">상품명: </label>
+        <input
+          type="text"
+          value={product.name}
+          onChange={(e) => onUpdate('name', e.target.value)}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block mb-1">가격: </label>
+        <input
+          type="number"
+          value={product.price}
+          onChange={(e) => onUpdate('price', parseInt(e.target.value))}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block mb-1">재고: </label>
+        <input
+          type="number"
+          value={product.stock}
+          onChange={(e) => onUpdate('stock', parseInt(e.target.value))}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+    </div>
+  );
+};