관리자 페이지
-
-
- 상품 관리
- - {showNewProductForm && ( -
-
- )}
- 새 상품 추가
-
-
- setNewProduct({ ...newProduct, name: e.target.value })}
- className="w-full p-2 border rounded"
- />
-
-
-
- setNewProduct({ ...newProduct, price: parseInt(e.target.value) })}
- className="w-full p-2 border rounded"
- />
-
-
-
- setNewProduct({ ...newProduct, stock: parseInt(e.target.value) })}
- className="w-full p-2 border rounded"
- />
-
-
-
- {products.map((product, index) => (
-
-
-
- {openProductIds.has(product.id) && (
-
- ))}
-
- {editingProduct && editingProduct.id === product.id ? (
-
- )}
-
-
- ) : (
-
-
- handleProductNameUpdate(product.id, e.target.value)}
- className="w-full p-2 border rounded"
- />
-
-
-
- handlePriceUpdate(product.id, parseInt(e.target.value))}
- className="w-full p-2 border rounded"
- />
-
-
-
- handleStockUpdate(product.id, parseInt(e.target.value))}
- className="w-full p-2 border rounded"
- />
-
- {/* 할인 정보 수정 부분 */}
-
-
-
- 할인 정보
- {editingProduct.discounts.map((discount, index) => ( -
- {discount.quantity}개 이상 구매 시 {discount.rate * 100}% 할인
-
-
- ))}
-
- setNewDiscount({ ...newDiscount, quantity: parseInt(e.target.value) })}
- className="w-1/3 p-2 border rounded"
- />
- setNewDiscount({ ...newDiscount, rate: parseInt(e.target.value) / 100 })}
- className="w-1/3 p-2 border rounded"
- />
-
-
-
- {product.discounts.map((discount, index) => (
-
- )}
-
- {discount.quantity}개 이상 구매 시 {discount.rate * 100}% 할인
-
- ))}
-
-
-
+ 쿠폰 관리
-
-
-
- setNewCoupon({ ...newCoupon, name: e.target.value })}
- className="w-full p-2 border rounded"
- />
- setNewCoupon({ ...newCoupon, code: e.target.value })}
- className="w-full p-2 border rounded"
- />
-
-
-
- setNewCoupon({ ...newCoupon, discountValue: parseInt(e.target.value) })}
- className="w-full p-2 border rounded"
- />
-
-
-
-
- 현재 쿠폰 목록
-
- {coupons.map((coupon, index) => (
-
-
- {coupon.name} ({coupon.code}):
- {coupon.discountType === 'amount' ? `${coupon.discountValue}원` : `${coupon.discountValue}%`} 할인
-
- ))}
- 장바구니
@@ -47,92 +29,27 @@ export const CartPage = ({ products, coupons }: Props) => {상품 목록
- {products.map(product => {
- const remainingStock = getRemainingStock(product);
- return (
-
-
- );
- })}
+ {products.map((product) =>
+
- {product.name}
- {product.price.toLocaleString()}원
-
-
- 0 ? 'text-green-600' : 'text-red-600'}`}>
- 재고: {remainingStock}개
-
- {product.discounts.length > 0 && (
-
- 최대 {(getMaxDiscount(product.discounts) * 100).toFixed(0)}% 할인
-
- )}
-
- {product.discounts.length > 0 && (
- -
- {product.discounts.map((discount, index) => (
-
- - {discount.quantity}개 이상: {(discount.rate * 100).toFixed(0)}% 할인 - - ))} -
장바구니 내역
-
- {cart.map(item => {
- const appliedDiscount = getAppliedDiscount(item);
- return (
-
-
- );
- })}
+ {cart.map(item =>
+
- {item.product.name}
-
- - {item.product.price}원 x {item.quantity} - {appliedDiscount > 0 && ( - - ({(appliedDiscount * 100).toFixed(0)}% 할인 적용) - - )} - -
- - - {item.product.price}원 x {item.quantity} - {appliedDiscount > 0 && ( - - ({(appliedDiscount * 100).toFixed(0)}% 할인 적용) - - )} - -
-
-
-
-
-
diff --git a/src/refactoring/components/admin/ManageCoupon.tsx b/src/refactoring/components/admin/ManageCoupon.tsx
new file mode 100644
index 00000000..217b9b25
--- /dev/null
+++ b/src/refactoring/components/admin/ManageCoupon.tsx
@@ -0,0 +1,73 @@
+import { Coupon } from "../../../types";
+import { useAdmin } from "../../hooks/useAdmin";
+
+interface Props {
+ coupons: Coupon[];
+ onCouponAdd: (coupon: Coupon) => void;
+}
+
+export const ManageCoupon = ({ coupons, onCouponAdd }: Props) => {
+ const {
+ newCoupon,
+ setNewCoupon,
+ handleAddCoupon
+ } = useAdmin();
+
+ return (
+ >(new Set());
+ const [editingProduct, setEditingProduct] = useState(null);
+ const [newDiscount, setNewDiscount] = useState({ quantity: 0, rate: 0 });
+ const [showNewProductForm, setShowNewProductForm] = useState(false);
+ const [newProduct, setNewProduct] = useState>({
+ name: '',
+ price: 0,
+ stock: 0,
+ discounts: []
+ });
+ const [newCoupon, setNewCoupon] = useState({
+ name: '',
+ code: '',
+ discountType: 'percentage',
+ discountValue: 0
+ });
+
+ const handleAddCoupon = (onCouponAdd: (coupon: Coupon) => void) => {
+ onCouponAdd(newCoupon);
+ setNewCoupon({
+ name: '',
+ code: '',
+ discountType: 'percentage',
+ discountValue: 0
+ });
+ };
+
+ // handleEditProduct 함수 수정
+ const handleEditProduct = (product: Product) => 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 editComplete = (onProductUpdate: (product: Product) => void) => {
+ if (editingProduct) {
+ onProductUpdate(editingProduct);
+ setEditingProduct(null);
+ }
+ };
+
+ const handleStockUpdate = (products: Product[], productId: string, newStock: number, onProductUpdate: (product: Product) => void) => {
+ const updatedProduct = products.find(p => p.id === productId);
+ if (updatedProduct) {
+ const newProduct = { ...updatedProduct, stock: newStock };
+ onProductUpdate(newProduct);
+ setEditingProduct(newProduct);
+ }
+ };
+
+ const handleAddDiscount = (products: Product[], productId: string, onProductUpdate: (product: Product) => void) => {
+ const updatedProduct = products.find(p => p.id === productId);
+ if (updatedProduct && editingProduct) {
+ const newProduct = {
+ ...updatedProduct,
+ discounts: [...updatedProduct.discounts, newDiscount]
+ };
+ onProductUpdate(newProduct);
+ setEditingProduct(newProduct);
+ setNewDiscount({ quantity: 0, rate: 0 });
+ }
+ };
+
+ const handleRemoveDiscount = (products: Product[], productId: string, index: number, onProductUpdate: (product: Product) => void) => {
+ const updatedProduct = products.find(p => p.id === productId);
+ if (updatedProduct) {
+ const newProduct = {
+ ...updatedProduct,
+ discounts: updatedProduct.discounts.filter((_, i) => i !== index)
+ };
+ onProductUpdate(newProduct);
+ setEditingProduct(newProduct);
+ }
+ };
+
+ const handleAddNewProduct = (onProductAdd: (product: Product) => void) => {
+ const productWithId = { ...newProduct, id: Date.now().toString() };
+ onProductAdd(productWithId);
+ setNewProduct({
+ name: '',
+ price: 0,
+ stock: 0,
+ discounts: []
+ });
+ setShowNewProductForm(false);
+ };
+
+ const toggleProductAccordion = (productId: string) => {
+ setOpenProductIds(prev => {
+ const newSet = new Set(prev);
+ if (newSet.has(productId)) {
+ newSet.delete(productId);
+ } else {
+ newSet.add(productId);
+ }
+ return newSet;
+ });
+ };
+
+ return {
+ newProduct,
+ showNewProductForm,
+ newDiscount,
+ newCoupon,
+
+ setNewProduct,
+ setShowNewProductForm,
+ setNewDiscount,
+ setNewCoupon,
+
+ editingProduct,
+ openProductIds,
+
+ editComplete,
+ handlePriceUpdate,
+ handleStockUpdate,
+ handleAddDiscount,
+ handleEditProduct,
+ handleAddNewProduct,
+ handleProductNameUpdate,
+ handleRemoveDiscount,
+ handleAddCoupon,
+
+ toggleProductAccordion
+ }
+}
\ No newline at end of file
diff --git a/src/refactoring/hooks/useCart.ts b/src/refactoring/hooks/useCart.ts
index 67bf9208..3a010c74 100644
--- a/src/refactoring/hooks/useCart.ts
+++ b/src/refactoring/hooks/useCart.ts
@@ -1,33 +1,68 @@
-// useCart.ts
import { useState } from "react";
-import { CartItem, Coupon, Product } from "../../types";
-import { calculateCartTotal, updateCartItemQuantity } from "../models/cart";
+import { CartItem, Coupon, Product } from "../../types.ts";
+import { calculateCartTotal, updateCartItemQuantity } from "../utils/cart.ts";
export const useCart = () => {
const [cart, setCart] = useState([]);
const [selectedCoupon, setSelectedCoupon] = useState(null);
- const addToCart = (product: Product) => {};
+ // 카트 물품 추가 로직
+ const addToCart = (product: Product) => {
+ const remainingStock = getRemainingStock(product);
+ if (remainingStock <= 0) return;
- const removeFromCart = (productId: string) => {};
+ setCart(prevCart => {
+ const existingItem = prevCart.find(item => item.product.id === product.id);
+ if (existingItem) {
+ return prevCart.map(item =>
+ item.product.id === product.id
+ ? { ...item, quantity: Math.min(item.quantity + 1, product.stock) }
+ : item
+ );
+ }
+ return [...prevCart, { product, quantity: 1 }];
+ });
+ };
+
+ // 카트 물품 삭제 로직
+ const removeFromCart = (productId: string) => {
+ setCart(prevCart => prevCart.filter(item => item.product.id !== productId));
+ };
- const updateQuantity = (productId: string, newQuantity: number) => {};
+ // 카트 물품 업데이트 로직
+ const updateQuantity = (productId: string, newQuantity: number) => {
+ setCart(prevCart => updateCartItemQuantity(prevCart, productId, newQuantity));
+ };
- const applyCoupon = (coupon: Coupon) => {};
+ const calculateTotal = () => {
+ return calculateCartTotal(cart, selectedCoupon);
+ }
+
+ const { totalBeforeDiscount, totalAfterDiscount, totalDiscount } = calculateTotal();
+
+ // 물품 쿠폰 추가 로직
+ const applyCoupon = (coupon: Coupon) => {
+ setSelectedCoupon(coupon);
+ };
- const calculateTotal = () => ({
- totalBeforeDiscount: 0,
- totalAfterDiscount: 0,
- totalDiscount: 0,
- });
+ const getRemainingStock = (product: Product): number => {
+ const cartItem = cart.find(item => item.product.id === product.id);
+ return product.stock - (cartItem?.quantity || 0);
+ };
return {
cart,
+ selectedCoupon,
+
+ totalBeforeDiscount,
+ totalAfterDiscount,
+ totalDiscount,
+
addToCart,
+ applyCoupon,
removeFromCart,
updateQuantity,
- applyCoupon,
calculateTotal,
- selectedCoupon,
+ getRemainingStock
};
};
diff --git a/src/refactoring/hooks/useCoupon.ts b/src/refactoring/hooks/useCoupon.ts
index dc1b9078..ee879c7f 100644
--- a/src/refactoring/hooks/useCoupon.ts
+++ b/src/refactoring/hooks/useCoupon.ts
@@ -1,6 +1,17 @@
import { Coupon } from "../../types.ts";
-import { useState } from "react";
+import { useState, useEffect } from "react";
export const useCoupons = (initialCoupons: Coupon[]) => {
- return { coupons: [], addCoupon: () => undefined };
+ const [coupons, setCoupons] = useState(initialCoupons);
+
+ useEffect(() => {
+ if (initialCoupons) setCoupons(initialCoupons);
+ }, [initialCoupons]);
+
+ const addCoupon = (coupon: Coupon) => setCoupons([...coupons, coupon])
+
+ return {
+ coupons,
+ addCoupon
+ };
};
diff --git a/src/refactoring/hooks/useProduct.ts b/src/refactoring/hooks/useProduct.ts
index 028bacb6..feffcee2 100644
--- a/src/refactoring/hooks/useProduct.ts
+++ b/src/refactoring/hooks/useProduct.ts
@@ -1,6 +1,30 @@
-import { useState } from 'react';
-import { Product } from '../../types.ts';
+import { useEffect, useState } from "react";
+import { Product } from "../../types.ts";
+// useProducts : 상품의 엔티티 상태(init/update/add)를 담당하는 커스텀 훅
export const useProducts = (initialProducts: Product[]) => {
- return { products: [], updateProduct: () => undefined, addProduct: () => undefined };
+ const [products, setProducts] = useState(initialProducts);
+
+ useEffect(() => {
+ // 예외처리 및 상태 init
+ if (initialProducts) setProducts(initialProducts);
+ }, [initialProducts]);
+
+ // 상품 업데이트
+ const updateProduct = (product: Product) => {
+ setProducts((prevProducts) =>
+ prevProducts.map((prod) =>
+ prod.id === product.id ? { ...prod, ...product } : prod
+ )
+ );
+ };
+
+ // 상품 추가
+ const addProduct = (product: Product) => setProducts([...products, product])
+
+ return {
+ products,
+ updateProduct,
+ addProduct
+ };
};
diff --git a/src/refactoring/main.tsx b/src/refactoring/main.tsx
index e63eef4a..1f17221f 100644
--- a/src/refactoring/main.tsx
+++ b/src/refactoring/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
,
+
)
diff --git a/src/refactoring/models/cart.ts b/src/refactoring/models/cart.ts
deleted file mode 100644
index d8f4c2ea..00000000
--- a/src/refactoring/models/cart.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { CartItem, Coupon } from "../../types";
-
-export const calculateItemTotal = (item: CartItem) => {
- return 0;
-};
-
-export const getMaxApplicableDiscount = (item: CartItem) => {
- return 0;
-};
-
-export const calculateCartTotal = (
- cart: CartItem[],
- selectedCoupon: Coupon | null
-) => {
- return {
- totalBeforeDiscount: 0,
- totalAfterDiscount: 0,
- totalDiscount: 0,
- };
-};
-
-export const updateCartItemQuantity = (
- cart: CartItem[],
- productId: string,
- newQuantity: number
-): CartItem[] => {
- return [];
-};
diff --git a/src/refactoring/models/datas.ts b/src/refactoring/models/datas.ts
new file mode 100644
index 00000000..3504805d
--- /dev/null
+++ b/src/refactoring/models/datas.ts
@@ -0,0 +1,40 @@
+import { Coupon, Product } from "../../types";
+
+export const initialProducts: Product[] = [
+ {
+ id: 'p1',
+ name: '상품1',
+ price: 10000,
+ stock: 20,
+ discounts: [{ quantity: 10, rate: 0.1 }, { quantity: 20, rate: 0.2 }]
+ },
+ {
+ id: 'p2',
+ name: '상품2',
+ price: 20000,
+ stock: 20,
+ discounts: [{ quantity: 10, rate: 0.15 }]
+ },
+ {
+ id: 'p3',
+ name: '상품3',
+ price: 30000,
+ stock: 20,
+ discounts: [{ quantity: 10, rate: 0.2 }]
+ }
+];
+
+export const initialCoupons: Coupon[] = [
+ {
+ name: '5000원 할인 쿠폰',
+ code: 'AMOUNT5000',
+ discountType: 'amount',
+ discountValue: 5000
+ },
+ {
+ name: '10% 할인 쿠폰',
+ code: 'PERCENT10',
+ discountType: 'percentage',
+ discountValue: 10
+ }
+];
\ No newline at end of file
diff --git a/src/refactoring/utils/cart.ts b/src/refactoring/utils/cart.ts
new file mode 100644
index 00000000..9074dc49
--- /dev/null
+++ b/src/refactoring/utils/cart.ts
@@ -0,0 +1,110 @@
+import { CartItem, Coupon } from "../../types.ts";
+
+export const calculateItemTotal = (item: CartItem) => {
+ if (!item) return 0;
+
+ const { discounts } = item.product;
+ const { quantity } = item;
+
+ // 요구사항 1: 할인 없이 총액을 계산해야 합니다 | price * quantity
+ const total = item.product.price * item.quantity;
+
+ // 요구사항 2: 수량에 따라 올바른 할인을 적용해야 합니다 | reduce
+ const rateByQuantity = discounts.reduce((acc, prevProduct) => {
+ // 수량과 일치하는 할인율을 찾아서 해당 할인율 적용
+ if (quantity === prevProduct.quantity) {
+ const discount = prevProduct.rate;
+ return acc * (1 - discount); // 할인율 적용 로직
+ }
+ return acc;
+ }, total)
+
+ return rateByQuantity;
+};
+
+export const getMaxApplicableDiscount = (item: CartItem) => {
+ if (!item) return 0;
+
+ const { discounts } = item.product;
+ const { quantity } = item;
+
+ // return Math.max(...discounts.map(prevRate => prevRate.rate));
+ // 위 방법도 간결하고 좋지만 0을 반환하지 못해 요구사항 1을 충족시키지 못한다
+
+ // 요구사항 2: 적용 가능한 가장 높은 할인율을 반환해야 합니다 | reduce
+ return discounts.reduce((max, prevProduct) => {
+ if (prevProduct.quantity === quantity) {
+ return Math.max(max, prevProduct.rate);
+ }
+ return max;
+ }, 0); // 요구사항 1: 할인이 적용되지 않으면 0을 반환해야 합니다 | reduce
+};
+
+export const calculateCartTotal = (
+ cart: CartItem[],
+ selectedCoupon: Coupon | null
+) => {
+ // 기본값을 const로 설정
+ const { totalBeforeDiscount, totalAfterDiscount } = cart.reduce(
+ (acc, item) => {
+ const { price } = item.product;
+ const { quantity } = item;
+
+ const itemTotal = price * quantity;
+ const maxDiscountRate = item.product.discounts.reduce((maxRate, d) =>
+ quantity >= d.quantity && d.rate > maxRate ? d.rate : maxRate, 0
+ );
+
+ const discountAmount = itemTotal * maxDiscountRate;
+ acc.totalBeforeDiscount += itemTotal;
+ acc.totalAfterDiscount += itemTotal - discountAmount;
+ acc.totalDiscount += discountAmount;
+
+ return acc;
+ },
+ { totalBeforeDiscount: 0, totalAfterDiscount: 0, totalDiscount: 0 }
+ );
+
+ // 쿠폰 적용 로직 개선
+ const finalTotalAfterDiscount = selectedCoupon
+ ? calculateCoupon(totalAfterDiscount, selectedCoupon.discountType, selectedCoupon.discountValue)
+ : totalAfterDiscount;
+
+ const finalTotalDiscount = totalBeforeDiscount - finalTotalAfterDiscount;
+
+ return {
+ totalBeforeDiscount: Math.round(totalBeforeDiscount),
+ totalAfterDiscount: Math.round(finalTotalAfterDiscount),
+ totalDiscount: Math.round(finalTotalDiscount)
+ };
+}
+
+const calculateCoupon = (initValue: number, discountType: 'amount' | 'percentage', discountValue: number): number => {
+ // 요구사항 2. 금액쿠폰을 올바르게 적용해야 합니다
+ // 요구사항 3. 퍼센트 쿠폰을 올바르게 적용해야 합니다
+ return discountType === 'amount'
+ ? Math.max(0, initValue - discountValue)
+ : initValue * (1 - discountValue / 100);
+};
+
+export const updateCartItemQuantity = (
+ cart: CartItem[],
+ productId: string,
+ newQuantity: number
+): CartItem[] => {
+ if (!cart || !productId || newQuantity < 0) return cart;
+
+ // 요구사항 1: 수량을 올바르게 업데이트해야 합니다
+ const newCart = cart
+ .map((value) => {
+ if (value.product.id === productId && value.quantity !== newQuantity) {
+ // 요구사항 3: 재고 한도를 초과해서는 안 됩니다
+ const maxQuantity = Math.min(newQuantity, value.product.stock);
+ return { ...value, quantity: maxQuantity};
+ }
+ return value;
+ })
+ .filter(value => value.quantity !== 0); // 요구사항 2: 수량이 0으로 설정된 경우 항목을 제거해야 합니다
+
+ return newCart;
+};
\ No newline at end of file
diff --git a/src/refactoring/utils/discount.ts b/src/refactoring/utils/discount.ts
new file mode 100644
index 00000000..74f401cc
--- /dev/null
+++ b/src/refactoring/utils/discount.ts
@@ -0,0 +1,16 @@
+import { CartItem } from "../../types.ts";
+
+export const getMaxDiscount = (discounts: { quantity: number; rate: number }[]): number => {
+ return discounts.reduce((max, discount) => Math.max(max, discount.rate), 0);
+}
+
+export const getAppliedDiscount = (item: CartItem): number => {
+ const { discounts } = item.product;
+ const { quantity } = item;
+ const appliedDiscount = 0;
+
+ // reduce 개선
+ return discounts.reduce((maxDiscount, discount) => {
+ return quantity >= discount.quantity ? Math.max(maxDiscount, discount.rate) : maxDiscount;
+ }, appliedDiscount);
+};
\ No newline at end of file
+
+ )
+}
\ No newline at end of file
diff --git a/src/refactoring/components/admin/ManageProduct.tsx b/src/refactoring/components/admin/ManageProduct.tsx
new file mode 100644
index 00000000..bfe52f0c
--- /dev/null
+++ b/src/refactoring/components/admin/ManageProduct.tsx
@@ -0,0 +1,192 @@
+import { Product } from "../../../types.ts";
+import { useAdmin } from "../../hooks/useAdmin.ts";
+
+interface Props {
+ products: Product[];
+ onProductUpdate: (product: Product) => void;
+ onProductAdd: (product: Product) => void;
+}
+
+export const ManageProduct = ({products, onProductAdd, onProductUpdate}: Props) => {
+ const {
+ newProduct,
+ showNewProductForm,
+ newDiscount,
+
+ setNewProduct,
+ setShowNewProductForm,
+ setNewDiscount,
+
+ editingProduct,
+ openProductIds,
+
+ editComplete,
+ handlePriceUpdate,
+ handleStockUpdate,
+ handleAddDiscount,
+ handleEditProduct,
+ handleAddNewProduct,
+ handleProductNameUpdate,
+ handleRemoveDiscount,
+ toggleProductAccordion
+ } = useAdmin();
+
+ return (
+ 쿠폰 관리
+
+
+
+ setNewCoupon({ ...newCoupon, name: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+ setNewCoupon({ ...newCoupon, code: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ setNewCoupon({ ...newCoupon, discountValue: parseInt(e.target.value) })}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+
+ 현재 쿠폰 목록
+
+ {coupons.map((coupon, index) => (
+
+
+ {coupon.name} ({coupon.code}):
+ {coupon.discountType === 'amount' ? `${coupon.discountValue}원` : `${coupon.discountValue}%`} 할인
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/refactoring/components/carts/CartList.tsx b/src/refactoring/components/carts/CartList.tsx
new file mode 100644
index 00000000..802bf3e9
--- /dev/null
+++ b/src/refactoring/components/carts/CartList.tsx
@@ -0,0 +1,53 @@
+import { Product } from "../../../types";
+import { getMaxDiscount } from "../../utils/discount";
+
+interface Props {
+ product: Product;
+ addToCart: (product: Product) => void;
+ getRemainingStock: (product: Product) => number;
+}
+
+export const CartList = ({
+ product,
+ addToCart,
+ getRemainingStock
+}: Props) => {
+ return (
+ 상품 관리
+ + {showNewProductForm && ( +
+
+ )}
+ 새 상품 추가
+
+
+ setNewProduct({ ...newProduct, name: e.target.value })}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ setNewProduct({ ...newProduct, price: parseInt(e.target.value) })}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ setNewProduct({ ...newProduct, stock: parseInt(e.target.value) })}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ {products.map((product, index) => (
+
+
+
+ {openProductIds.has(product.id) && (
+
+ ))}
+
+ {editingProduct && editingProduct.id === product.id ? (
+
+ )}
+
+
+ ) : (
+
+
+ handleProductNameUpdate(product.id, e.target.value)}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ handlePriceUpdate(product.id, parseInt(e.target.value))}
+ className="w-full p-2 border rounded"
+ />
+
+
+
+ handleStockUpdate(products, product.id, parseInt(e.target.value), onProductUpdate)}
+ className="w-full p-2 border rounded"
+ />
+
+ {/* 할인 정보 수정 부분 */}
+
+
+
+ 할인 정보
+ {editingProduct.discounts.map((discount, index) => ( +
+ {discount.quantity}개 이상 구매 시 {discount.rate * 100}% 할인
+
+
+ ))}
+
+ setNewDiscount({ ...newDiscount, quantity: parseInt(e.target.value) })}
+ className="w-1/3 p-2 border rounded"
+ />
+ setNewDiscount({ ...newDiscount, rate: parseInt(e.target.value) / 100 })}
+ className="w-1/3 p-2 border rounded"
+ />
+
+
+
+ {product.discounts.map((discount, index) => (
+
+ )}
+
+ {discount.quantity}개 이상 구매 시 {discount.rate * 100}% 할인
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/refactoring/components/carts/CartProduct.tsx b/src/refactoring/components/carts/CartProduct.tsx
new file mode 100644
index 00000000..196855c2
--- /dev/null
+++ b/src/refactoring/components/carts/CartProduct.tsx
@@ -0,0 +1,52 @@
+import { CartItem } from "../../../types.ts";
+import { getAppliedDiscount } from "../../utils/discount.ts";
+
+interface Props {
+ item: CartItem;
+ onUpdateQuantity: (productId: string, newQuantity: number) => void;
+ onRemoveFromCart: (productId: string) => void;
+}
+
+export const CartProduct = ({
+ item,
+ onUpdateQuantity,
+ onRemoveFromCart
+}: Props) => {
+ return (
+
+ {product.name}
+ {product.price.toLocaleString()}원
+
+
+ 0 ? 'text-green-600' : 'text-red-600'}`}>
+ 재고: {getRemainingStock(product)}개
+
+ {product.discounts.length > 0 && (
+
+ 최대 {(getMaxDiscount(product.discounts) * 100).toFixed(0)}% 할인
+
+ )}
+
+ {product.discounts.length > 0 && (
+ -
+ {product.discounts.map((discount, index) => (
+
- + {discount.quantity}개 이상: {(discount.rate * 100).toFixed(0)}% 할인 + + ))} +
+
+ );
+}
\ No newline at end of file
diff --git a/src/refactoring/hooks/useAdmin.ts b/src/refactoring/hooks/useAdmin.ts
new file mode 100644
index 00000000..7585f226
--- /dev/null
+++ b/src/refactoring/hooks/useAdmin.ts
@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { Discount, Product, Coupon } from "../../types.ts";
+
+export const useAdmin = () => {
+ const [openProductIds, setOpenProductIds] = useState
+ {item.product.name}
+
+ + {item.product.price}원 x {item.quantity} + + {getAppliedDiscount(item) > 0 && ( + + ({(getAppliedDiscount(item) * 100).toFixed(0)}% 할인 적용) + + )} + +
+ + + {item.product.price}원 x {item.quantity} + + {getAppliedDiscount(item) > 0 && ( + + ({(getAppliedDiscount(item) * 100).toFixed(0)}% 할인 적용) + + )} + +
+
+
+
+
+