feat: ProductEditForm분리

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) => (

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>
+  );
+};