-
-
- ) : (
-
-
- )}
-
- ) : (
-
-
- 관리자 대시보드
-상품과 쿠폰을 관리할 수 있습니다
-
-
-
-
- {activeTab === 'products' ? (
-
-
-
-
-
- 상품 목록
- -
-
-
-
-
- {showProductForm && (
- | 상품명 | -가격 | -재고 | -설명 | -작업 | -
|---|---|---|---|---|
| {product.name} | -{formatPrice(product.price, product.id)} | -- 10 ? 'bg-green-100 text-green-800' : - product.stock > 0 ? 'bg-yellow-100 text-yellow-800' : - 'bg-red-100 text-red-800' - }`}> - {product.stock}개 - - | -{product.description || '-'} | -- - - | -
-
-
- )}
-
-
- 쿠폰 관리
-
-
-
- {coupons.map(coupon => (
-
-
- {showCouponForm && (
-
-
- ))}
-
-
-
-
-
-
- {coupon.name}
-{coupon.code}
-
-
- {coupon.discountType === 'amount'
- ? `${coupon.discountValue.toLocaleString()}원 할인`
- : `${coupon.discountValue}% 할인`}
-
-
-
-
-
-
-
-
- )}
-
-
- )}
+
- {/* 상품 목록 */}
-
-
-
-
-
-
- {filteredProducts.length === 0 ? (
- 전체 상품
-
- 총 {products.length}개 상품
-
-
-
- ) : (
- "{debouncedSearchTerm}"에 대한 검색 결과가 없습니다.
-
- {filteredProducts.map(product => {
- const remainingStock = getRemainingStock(product);
-
- return (
-
- )}
-
- {/* 상품 이미지 영역 (placeholder) */}
-
- );
- })}
-
-
-
- {/* 상품 정보 */}
-
-
-
- {product.isRecommended && (
-
- BEST
-
- )}
- {product.discounts.length > 0 && (
-
- ~{Math.max(...product.discounts.map(d => d.rate)) * 100}%
-
- )}
-
-
- {product.name}
- {product.description && ( -{product.description}
- )} - - {/* 가격 정보 */} -
-
-
- {/* 재고 상태 */}
- {formatPrice(product.price, product.id)}
- {product.discounts.length > 0 && ( -- {product.discounts[0].quantity}개 이상 구매시 할인 {product.discounts[0].rate * 100}% -
- )} -
- {remainingStock <= 5 && remainingStock > 0 && (
-
-
- {/* 장바구니 버튼 */}
-
- 품절임박! {remainingStock}개 남음
- )} - {remainingStock > 5 && ( -재고 {remainingStock}개
- )} -
-
-
-
-
-
- {cart.length > 0 && (
- <>
-
-
-
-
-
-
- )}
-
- - - 장바구니 -
- {cart.length === 0 ? ( -
-
-
- ) : (
- 장바구니가 비어있습니다
-
- {cart.map(item => {
- const itemTotal = calculateItemTotal(item);
- const originalPrice = item.product.price * item.quantity;
- const hasDiscount = itemTotal < originalPrice;
- const discountRate = hasDiscount ? Math.round((1 - itemTotal / originalPrice) * 100) : 0;
-
- return (
-
- )}
-
-
- );
- })}
-
-
- {item.product.name}
- -
-
-
-
- {item.quantity}
-
-
-
- {hasDiscount && (
- -{discountRate}%
- )}
-
- - {Math.round(itemTotal).toLocaleString()}원 -
-
-
- {coupons.length > 0 && (
-
- )}
- 쿠폰 할인
- -결제 정보
-
-
-
-
-
-
- 상품 금액
- {totals.totalBeforeDiscount.toLocaleString()}원
-
- {totals.totalBeforeDiscount - totals.totalAfterDiscount > 0 && (
-
- 할인 금액
- -{(totals.totalBeforeDiscount - totals.totalAfterDiscount).toLocaleString()}원
-
- )}
-
- 결제 예정 금액
- {totals.totalAfterDiscount.toLocaleString()}원
-
-
-
- * 실제 결제는 이루어지지 않습니다
-
+ {/* 알림 시스템 */}
+ setIsAdmin(!isAdmin)} />
+ {/* 메인 컨텐츠 */}
+
+ {isAdmin ?
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/advanced/__tests__/origin.test.tsx b/src/advanced/__tests__/origin.test.tsx
index 3f5c3d55..77f24a4e 100644
--- a/src/advanced/__tests__/origin.test.tsx
+++ b/src/advanced/__tests__/origin.test.tsx
@@ -1,9 +1,18 @@
// @ts-nocheck
import { render, screen, fireEvent, within, waitFor } from '@testing-library/react';
import { vi } from 'vitest';
+import { Provider } from 'jotai';
import App from '../App';
import '../../setupTests';
+const renderWithProvider = () => {
+ return render(
+ + + 장바구니 +
+ + {cart.length === 0 ? ( +
+
+
+ ) : (
+ 장바구니가 비어있습니다
+
+ {cart.map((item) => {
+ const itemTotal = calculateItemTotal(item, cart);
+ const originalPrice = item.product.price * item.quantity;
+ const hasDiscount = itemTotal < originalPrice;
+ const discountRate = hasDiscount
+ ? Math.round((1 - itemTotal / originalPrice) * 100)
+ : 0;
+
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ + {item.product.name} +
+ +
+
+
+
+
+ {item.quantity}
+
+
+
+
+ {hasDiscount && (
+
+ -{discountRate}%
+
+ )}
+
+ + {Math.round(itemTotal).toLocaleString()}원 +
+
+
+
+ );
+}
diff --git a/src/advanced/features/coupon/admin/ui/CouponManagement.tsx b/src/advanced/features/coupon/admin/ui/CouponManagement.tsx
new file mode 100644
index 00000000..dc8b973e
--- /dev/null
+++ b/src/advanced/features/coupon/admin/ui/CouponManagement.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import CouponTable from './CouponTable';
+import CouponForm from './CouponForm';
+import { useCoupons } from '../../../../entities/coupon/hooks/useCoupons';
+
+export default function CouponManagement() {
+ const { coupons, addCoupon, deleteCoupon } = useCoupons();
+
+ const [showCouponForm, setShowCouponForm] = useState(false);
+ const [couponForm, setCouponForm] = useState({
+ name: '',
+ code: '',
+ discountType: 'amount' as 'amount' | 'percentage',
+ discountValue: 0,
+ });
+
+ const handleCouponSubmit = () => {
+ addCoupon(couponForm);
+ resetForm();
+ };
+
+ const resetForm = () => {
+ setCouponForm({
+ name: '',
+ code: '',
+ discountType: 'amount',
+ discountValue: 0,
+ });
+ setShowCouponForm(false);
+ };
+
+ const startAddCoupon = () => {
+ setShowCouponForm(true);
+ };
+
+ return (
+
+
+
+ 쿠폰 관리
+
+
+
+ {coupons.map((coupon) => (
+
+ );
+}
diff --git a/src/advanced/features/coupon/admin/ui/index.ts b/src/advanced/features/coupon/admin/ui/index.ts
new file mode 100644
index 00000000..2e9fed33
--- /dev/null
+++ b/src/advanced/features/coupon/admin/ui/index.ts
@@ -0,0 +1,3 @@
+export { default as CouponManagement } from './CouponManagement';
+export { default as CouponForm } from './CouponForm';
+export { default as CouponTable } from './CouponTable';
diff --git a/src/advanced/features/coupon/shop/ui/CouponSelector.tsx b/src/advanced/features/coupon/shop/ui/CouponSelector.tsx
new file mode 100644
index 00000000..4e1ff8cf
--- /dev/null
+++ b/src/advanced/features/coupon/shop/ui/CouponSelector.tsx
@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+import { useAtomValue, useAtom } from 'jotai';
+import { Coupon } from '../../../../../types';
+import { Button } from '../../../../shared/ui';
+import { useNotification } from '../../../../shared/utils';
+import {
+ couponsAtom,
+ selectedCouponAtom,
+ cartTotalsAtom,
+} from '../../../../shared/store';
+
+export function CouponSelector() {
+ const coupons = useAtomValue(couponsAtom);
+ const [selectedCoupon, setSelectedCoupon] = useAtom(selectedCouponAtom);
+ const cartTotals = useAtomValue(cartTotalsAtom);
+ const { addNotification } = useNotification();
+
+ const applyCoupon = useCallback(
+ (coupon: Coupon) => {
+ const currentTotal = cartTotals.totalAfterDiscount;
+
+ if (currentTotal < 10000 && coupon.discountType === 'percentage') {
+ addNotification(
+ 'percentage 쿠폰은 10,000원 이상 구매 시 사용 가능합니다.',
+ 'error'
+ );
+ return;
+ }
+
+ setSelectedCoupon(coupon);
+ addNotification('쿠폰이 적용되었습니다.', 'success');
+ },
+ [addNotification, cartTotals.totalAfterDiscount, setSelectedCoupon]
+ );
+
+ return (
+
+
+ ))}
+
+
+
+
+
+
+ {coupon.name}
++ {coupon.code} +
+
+
+ {coupon.discountType === 'amount'
+ ? `${coupon.discountValue.toLocaleString()}원 할인`
+ : `${coupon.discountValue}% 할인`}
+
+
+
+
+
+
+
+ {coupons.length > 0 && (
+
+ )}
+ 쿠폰 할인
+ +결제 정보
+
+
+
+
+
+
+ 상품 금액
+
+ {totals.totalBeforeDiscount.toLocaleString()}원
+
+
+ {totals.totalBeforeDiscount - totals.totalAfterDiscount > 0 && (
+
+ 할인 금액
+
+ -
+ {(
+ totals.totalBeforeDiscount - totals.totalAfterDiscount
+ ).toLocaleString()}
+ 원
+
+
+ )}
+
+ 결제 예정 금액
+
+ {totals.totalAfterDiscount.toLocaleString()}원
+
+
+
+
+ * 실제 결제는 이루어지지 않습니다
+
+
+
+ );
+}
diff --git a/src/advanced/features/product/admin/ui/ProductManagement.tsx b/src/advanced/features/product/admin/ui/ProductManagement.tsx
new file mode 100644
index 00000000..75da2251
--- /dev/null
+++ b/src/advanced/features/product/admin/ui/ProductManagement.tsx
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { ProductWithUI } from '../../../../entities/product';
+import { useProducts } from '../hooks';
+import { Button } from '../../../../shared/ui';
+import ProductTable from './ProductTable';
+import ProductForm from './ProductForm';
+
+export default function ProductManagement() {
+ const { products, addProduct, updateProduct, deleteProduct } = useProducts();
+
+ const [showProductForm, setShowProductForm] = useState(false);
+ const [editingProduct, setEditingProduct] = useState
+
+
+
+
+ 상품 목록
+ +
+
+
+
+
+ );
+}
diff --git a/src/advanced/features/product/admin/ui/index.ts b/src/advanced/features/product/admin/ui/index.ts
new file mode 100644
index 00000000..83093283
--- /dev/null
+++ b/src/advanced/features/product/admin/ui/index.ts
@@ -0,0 +1,3 @@
+export { default as ProductManagement } from './ProductManagement';
+export { default as ProductTable } from './ProductTable';
+export { default as ProductForm } from './ProductForm';
diff --git a/src/advanced/features/product/shop/hooks/index.ts b/src/advanced/features/product/shop/hooks/index.ts
new file mode 100644
index 00000000..57636cb8
--- /dev/null
+++ b/src/advanced/features/product/shop/hooks/index.ts
@@ -0,0 +1 @@
+export { useProductSearch } from './useProductSearch';
diff --git a/src/advanced/features/product/shop/hooks/useProductSearch.tsx b/src/advanced/features/product/shop/hooks/useProductSearch.tsx
new file mode 100644
index 00000000..b934b635
--- /dev/null
+++ b/src/advanced/features/product/shop/hooks/useProductSearch.tsx
@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { ProductWithUI } from '../../../../entities/product';
+import { useDebounce } from '../../../../shared/hooks';
+
+export function useProductSearch(
+ products: ProductWithUI[],
+ searchTerm: string
+) {
+ const debouncedSearchTerm = useDebounce(searchTerm, 500);
+
+ const filteredProducts = useMemo(() => {
+ if (!debouncedSearchTerm) {
+ return products;
+ }
+
+ return products.filter(
+ (product) =>
+ product.name
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()) ||
+ (product.description &&
+ product.description
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()))
+ );
+ }, [products, debouncedSearchTerm]);
+
+ return {
+ debouncedSearchTerm,
+ filteredProducts,
+ };
+}
diff --git a/src/advanced/features/product/shop/ui/ProductCard.tsx b/src/advanced/features/product/shop/ui/ProductCard.tsx
new file mode 100644
index 00000000..29b0d6f7
--- /dev/null
+++ b/src/advanced/features/product/shop/ui/ProductCard.tsx
@@ -0,0 +1,117 @@
+import { useAtomValue } from 'jotai';
+import { ProductWithUI } from '../../../../entities/product';
+import { Button } from '../../../../shared/ui';
+import { formatPrice, getRemainingStock, getProductStockStatus } from '../../../../shared/utils';
+import { cartAtom } from '../../../../shared/store';
+
+interface ProductCardProps {
+ product: ProductWithUI;
+ onAddToCart: (product: ProductWithUI) => void;
+}
+
+export default function ProductCard({
+ product,
+ onAddToCart,
+}: ProductCardProps) {
+ const cart = useAtomValue(cartAtom);
+
+ // 장바구니에서 현재 상품 수량 찾기
+ const cartQuantity = cart.find(item => item.product.id === product.id)?.quantity || 0;
+
+ // 남은 재고 계산
+ const remainingStock = getRemainingStock({
+ stock: product.stock,
+ cartQuantity
+ });
+
+ // 품절 상태 체크
+ const stockStatus = getProductStockStatus({
+ stock: product.stock,
+ cartQuantity
+ });
+
+ // 가격 표시 함수
+ const displayPrice = () => {
+ if (stockStatus) return stockStatus;
+ const formatted = formatPrice(product.price);
+ return `₩${formatted}`;
+ };
+ return (
+ | + 상품명 + | ++ 가격 + | ++ 재고 + | ++ 설명 + | ++ 작업 + | +
|---|---|---|---|---|
| + {product.name} + | ++ {displayAdminPrice(product.price)} + | ++ 10 + ? 'bg-green-100 text-green-800' + : product.stock > 0 + ? 'bg-yellow-100 text-yellow-800' + : 'bg-red-100 text-red-800' + }`} + > + {product.stock}개 + + | ++ {product.description || '-'} + | ++ + + | +
+ {/* 상품 이미지 영역 (placeholder) */}
+
+ );
+}
diff --git a/src/advanced/features/product/shop/ui/ProductList.tsx b/src/advanced/features/product/shop/ui/ProductList.tsx
new file mode 100644
index 00000000..49818b56
--- /dev/null
+++ b/src/advanced/features/product/shop/ui/ProductList.tsx
@@ -0,0 +1,38 @@
+import { ProductWithUI } from '../../../../entities/product';
+import ProductCard from './ProductCard';
+
+interface ProductListProps {
+ products: ProductWithUI[];
+ searchTerm: string;
+ onAddToCart: (product: ProductWithUI) => void;
+}
+
+export default function ProductList({
+ products,
+ searchTerm,
+ onAddToCart,
+}: ProductListProps) {
+ if (products.length === 0) {
+ return (
+
+
+
+ {/* 상품 정보 */}
+
+
+
+ {product.isRecommended && (
+
+ BEST
+
+ )}
+ {product.discounts.length > 0 && (
+
+ ~{Math.max(...product.discounts.map((d) => d.rate)) * 100}%
+
+ )}
+
+
+ {product.name}
+ {product.description && ( ++ {product.description} +
+ )} + + {/* 가격 정보 */} +
+
+
+ {/* 재고 상태 */}
+ + {displayPrice()} +
+ {product.discounts.length > 0 && ( ++ {product.discounts[0].quantity}개 이상 구매시 할인{' '} + {product.discounts[0].rate * 100}% +
+ )} +
+ {remainingStock <= 5 && remainingStock > 0 && (
+
+
+ {/* 장바구니 버튼 */}
+
+ + 품절임박! {remainingStock}개 남음 +
+ )} + {remainingStock > 5 && ( +재고 {remainingStock}개
+ )} +
+
+ );
+ }
+
+ return (
+ + "{searchTerm}"에 대한 검색 결과가 없습니다. +
+
+ {products.map((product) => {
+ return (
+
+ );
+}
diff --git a/src/advanced/features/product/shop/ui/index.ts b/src/advanced/features/product/shop/ui/index.ts
new file mode 100644
index 00000000..ff14cf93
--- /dev/null
+++ b/src/advanced/features/product/shop/ui/index.ts
@@ -0,0 +1,2 @@
+export { default as ProductList } from './ProductList';
+export { default as ProductCard } from './ProductCard';
diff --git a/src/advanced/main.tsx b/src/advanced/main.tsx
index e63eef4a..f88d2765 100644
--- a/src/advanced/main.tsx
+++ b/src/advanced/main.tsx
@@ -1,9 +1,12 @@
-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';
+import { Provider } from 'jotai';
ReactDOM.createRoot(document.getElementById('root')!).render(
+ {/* 관리자 대시보드 헤더 */}
+
+ );
+}
diff --git a/src/advanced/pages/ShoppingPage.tsx b/src/advanced/pages/ShoppingPage.tsx
new file mode 100644
index 00000000..b3d54860
--- /dev/null
+++ b/src/advanced/pages/ShoppingPage.tsx
@@ -0,0 +1,41 @@
+import { useAtomValue } from 'jotai';
+import { ProductList } from '../features/product/shop/ui';
+import { useCart } from '../features/cart/hooks';
+import { useProductSearch } from '../features/product/shop/hooks';
+import { ShoppingSidebar } from '../widgets/ShoppingSidebar/ui';
+import { productsAtom, searchTermAtom } from '../shared/store';
+
+export default function ShoppingPage() {
+ const products = useAtomValue(productsAtom);
+ const searchTerm = useAtomValue(searchTermAtom);
+ const { filteredProducts } = useProductSearch(products, searchTerm);
+
+ const { addToCart } = useCart();
+
+ return (
+
+
+
+ {/* 탭 네비게이션 */}
+ 관리자 대시보드
+상품과 쿠폰을 관리할 수 있습니다
+
+
+
+
+ {/* 탭 컨텐츠 */}
+ {activeTab === 'products' ? (
+
+
+ );
+}
diff --git a/src/advanced/pages/index.ts b/src/advanced/pages/index.ts
new file mode 100644
index 00000000..1cc41ff8
--- /dev/null
+++ b/src/advanced/pages/index.ts
@@ -0,0 +1,2 @@
+export { default as ShoppingPage } from './ShoppingPage';
+export { default as AdminPage } from './AdminPage';
diff --git a/src/advanced/shared/hooks/index.ts b/src/advanced/shared/hooks/index.ts
new file mode 100644
index 00000000..0af9fea2
--- /dev/null
+++ b/src/advanced/shared/hooks/index.ts
@@ -0,0 +1,5 @@
+// localStorage 훅
+export { useLocalStorage } from './useLocalStorage';
+
+// 디바운스 훅
+export { useDebounce } from './useDebounce';
diff --git a/src/advanced/shared/hooks/useDebounce.ts b/src/advanced/shared/hooks/useDebounce.ts
new file mode 100644
index 00000000..cf979960
--- /dev/null
+++ b/src/advanced/shared/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * 값의 변경을 지연시키는 디바운스 훅
+ * @param value 디바운스할 값
+ * @param delay 지연 시간 (밀리초)
+ * @returns 디바운스된 값
+ */
+export function useDebounce
+ {/* 상품 목록 섹션 */}
+
+
+
+
+ {/* ShoppingSidebar (widgets) */}
+
+
+
+ 전체 상품
+
+ 총 {products.length}개 상품
+
+
+
+
+
+
+
+
+
+
+ SHOP
+ {/* 검색창 */} + {!isAdmin && ( +
+ {notifications.map((notif) => (
+
+ );
+}
diff --git a/src/advanced/shared/ui/SearchInput.tsx b/src/advanced/shared/ui/SearchInput.tsx
new file mode 100644
index 00000000..9e9ee832
--- /dev/null
+++ b/src/advanced/shared/ui/SearchInput.tsx
@@ -0,0 +1,40 @@
+interface SearchInputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export default function SearchInput({
+ value,
+ onChange,
+ placeholder = '상품 검색...',
+ className,
+}: SearchInputProps) {
+ return (
+
+ {notif.message}
+
+
+ ))}
+
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500'
+ />
+
+ );
+}
diff --git a/src/advanced/shared/ui/index.ts b/src/advanced/shared/ui/index.ts
new file mode 100644
index 00000000..20260123
--- /dev/null
+++ b/src/advanced/shared/ui/index.ts
@@ -0,0 +1,11 @@
+// 알림 관련
+export { default as NotificationToast } from './NotificationToast';
+
+// 입력 관련
+export { default as SearchInput } from './SearchInput';
+
+// 버튼 관련
+export { default as Button } from './Button';
+
+// 레이아웃 관련
+export { default as Header } from './Header';
diff --git a/src/advanced/shared/utils/index.ts b/src/advanced/shared/utils/index.ts
new file mode 100644
index 00000000..b25a568b
--- /dev/null
+++ b/src/advanced/shared/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './priceUtils';
+export * from './stockUtils';
+export * from './notificationUtils';
\ No newline at end of file
diff --git a/src/advanced/shared/utils/notificationUtils.ts b/src/advanced/shared/utils/notificationUtils.ts
new file mode 100644
index 00000000..4dd61770
--- /dev/null
+++ b/src/advanced/shared/utils/notificationUtils.ts
@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useSetAtom } from 'jotai';
+import { notificationsAtom } from '../store';
+
+let idCounter = 0;
+
+const generateUniqueId = () => {
+ return `notification-${Date.now()}-${++idCounter}`;
+};
+
+export const useNotification = () => {
+ const setNotifications = useSetAtom(notificationsAtom);
+
+ const addNotification = useCallback((message: string, type: 'error' | 'success' | 'warning' = 'success') => {
+ const id = generateUniqueId();
+ setNotifications(prev => [...prev, { id, message, type }]);
+
+ setTimeout(() => {
+ setNotifications(prev => prev.filter(n => n.id !== id));
+ }, 3000);
+ }, [setNotifications]);
+
+ return { addNotification };
+};
\ No newline at end of file
diff --git a/src/advanced/shared/utils/priceUtils.ts b/src/advanced/shared/utils/priceUtils.ts
new file mode 100644
index 00000000..9011aea8
--- /dev/null
+++ b/src/advanced/shared/utils/priceUtils.ts
@@ -0,0 +1,8 @@
+/**
+ * 숫자를 천 단위 구분자가 있는 문자열로 포맷팅
+ * @param price 포맷팅할 가격
+ * @returns 천 단위 구분자가 포함된 문자열 (예: "10,000")
+ */
+export const formatPrice = (price: number): string => {
+ return price.toLocaleString();
+};
\ No newline at end of file
diff --git a/src/advanced/shared/utils/stockUtils.ts b/src/advanced/shared/utils/stockUtils.ts
new file mode 100644
index 00000000..b20d84f2
--- /dev/null
+++ b/src/advanced/shared/utils/stockUtils.ts
@@ -0,0 +1,31 @@
+/**
+ * 전체 재고에서 장바구니 수량을 뺀 남은 재고 계산
+ * @param stock 전체 재고 수량
+ * @param cartQuantity 장바구니에 담긴 수량
+ * @returns 남은 재고 수량
+ */
+export const getRemainingStock = ({
+ stock,
+ cartQuantity,
+}: {
+ stock: number;
+ cartQuantity: number;
+}) => {
+ return stock - cartQuantity;
+};
+
+/**
+ * 재고 상태를 확인해서 품절 여부를 문자열로 반환
+ * @param stock 전체 재고 수량
+ * @param cartQuantity 장바구니에 담긴 수량
+ * @returns 품절이면 "SOLD OUT", 아니면 빈 문자열
+ */
+export const getProductStockStatus = ({
+ stock,
+ cartQuantity,
+}: {
+ stock: number;
+ cartQuantity: number;
+}) => {
+ return getRemainingStock({ stock, cartQuantity }) <= 0 ? 'SOLD OUT' : '';
+};
\ No newline at end of file
diff --git a/src/advanced/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx b/src/advanced/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx
new file mode 100644
index 00000000..6a4692b3
--- /dev/null
+++ b/src/advanced/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx
@@ -0,0 +1,32 @@
+import { useAtomValue } from 'jotai';
+import { useCart } from '../../../features/cart/hooks';
+import { CartItemsList } from '../../../features/cart/ui';
+import { CouponSelector } from '../../../features/coupon/shop/ui';
+import { OrderSummary } from '../../../features/order/ui';
+import { cartAtom, cartTotalsAtom } from '../../../shared/store';
+
+export function ShoppingSidebar() {
+ const cart = useAtomValue(cartAtom);
+ const totals = useAtomValue(cartTotalsAtom);
+ const { removeFromCart, updateQuantity } = useCart();
+
+ return (
+
+
+
+
+ {/* 장바구니 아이템 섹션 */}
+
+ );
+}
diff --git a/src/advanced/widgets/ShoppingSidebar/ui/index.ts b/src/advanced/widgets/ShoppingSidebar/ui/index.ts
new file mode 100644
index 00000000..4f959865
--- /dev/null
+++ b/src/advanced/widgets/ShoppingSidebar/ui/index.ts
@@ -0,0 +1 @@
+export { ShoppingSidebar } from './ShoppingSidebar';
diff --git a/src/basic/App.tsx b/src/basic/App.tsx
index a4369fe1..849d5dbf 100644
--- a/src/basic/App.tsx
+++ b/src/basic/App.tsx
@@ -1,1124 +1,77 @@
-import { useState, useCallback, useEffect } from 'react';
-import { CartItem, Coupon, Product } from '../types';
-
-interface ProductWithUI extends Product {
- description?: string;
- isRecommended?: boolean;
-}
-
-interface Notification {
- id: string;
- message: string;
- type: 'error' | 'success' | 'warning';
-}
-
-// 초기 데이터
-const initialProducts: ProductWithUI[] = [
- {
- id: 'p1',
- name: '상품1',
- price: 10000,
- stock: 20,
- discounts: [
- { quantity: 10, rate: 0.1 },
- { quantity: 20, rate: 0.2 }
- ],
- description: '최고급 품질의 프리미엄 상품입니다.'
- },
- {
- id: 'p2',
- name: '상품2',
- price: 20000,
- stock: 20,
- discounts: [
- { quantity: 10, rate: 0.15 }
- ],
- description: '다양한 기능을 갖춘 실용적인 상품입니다.',
- isRecommended: true
- },
- {
- id: 'p3',
- name: '상품3',
- price: 30000,
- stock: 20,
- discounts: [
- { quantity: 10, rate: 0.2 },
- { quantity: 30, rate: 0.25 }
- ],
- description: '대용량과 고성능을 자랑하는 상품입니다.'
- }
-];
-
-const initialCoupons: Coupon[] = [
- {
- name: '5000원 할인',
- code: 'AMOUNT5000',
- discountType: 'amount',
- discountValue: 5000
- },
- {
- name: '10% 할인',
- code: 'PERCENT10',
- discountType: 'percentage',
- discountValue: 10
- }
-];
+import { useState, useCallback } from 'react';
+import { CartItem, Coupon } from '../types';
+import { initialProducts } from './entities/product';
+import { initialCoupons } from './entities/coupon';
+import { calculateCartTotal } from './entities/cart';
+import { useLocalStorage, useNotification } from './shared/hooks';
+import { NotificationToast, Header } from './shared/ui';
+import ShoppingPage from './pages/ShoppingPage';
+import AdminPage from './pages/AdminPage';
const App = () => {
+ // localStorage와 연동된 데이터 상태들
+ const [products, setProducts] = useLocalStorage('products', initialProducts);
+ const [cart, setCart] = useLocalStorage
- {notifications.length > 0 && (
-
-
-
-
+ >;
+ selectedCoupon: Coupon | null;
+ setSelectedCoupon: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+ calculateCartTotalWithCoupon: () => {
+ totalBeforeDiscount: number;
+ totalAfterDiscount: number;
+ };
+}
+
+export function useCoupons({
+ coupons,
+ setCoupons,
+ selectedCoupon,
+ setSelectedCoupon,
+ addNotification,
+ calculateCartTotalWithCoupon,
+}: UseCouponsProps) {
+ // 쿠폰 추가
+ const addCoupon = useCallback(
+ (newCoupon: Coupon) => {
+ const existingCoupon = coupons.find((c) => c.code === newCoupon.code);
+ if (existingCoupon) {
+ addNotification('이미 존재하는 쿠폰 코드입니다.', 'error');
+ return;
+ }
+ setCoupons((prev) => [...prev, newCoupon]);
+ addNotification('쿠폰이 추가되었습니다.', 'success');
+ },
+ [coupons, addNotification, setCoupons]
+ );
+
+ // 쿠폰 삭제
+ const deleteCoupon = useCallback(
+ (couponCode: string) => {
+ setCoupons((prev) => prev.filter((c) => c.code !== couponCode));
+ if (selectedCoupon?.code === couponCode) {
+ setSelectedCoupon(null);
+ }
+ addNotification('쿠폰이 삭제되었습니다.', 'success');
+ },
+ [selectedCoupon, addNotification, setCoupons, setSelectedCoupon]
+ );
+
+ // 쿠폰 적용
+ const applyCoupon = useCallback(
+ (coupon: Coupon) => {
+ const currentTotal = calculateCartTotalWithCoupon().totalAfterDiscount;
+
+ if (currentTotal < 10000 && coupon.discountType === 'percentage') {
+ addNotification(
+ 'percentage 쿠폰은 10,000원 이상 구매 시 사용 가능합니다.',
+ 'error'
+ );
+ return;
+ }
+
+ setSelectedCoupon(coupon);
+ addNotification('쿠폰이 적용되었습니다.', 'success');
+ },
+ [addNotification, calculateCartTotalWithCoupon, setSelectedCoupon]
+ );
+
+ return {
+ coupons,
+ selectedCoupon,
+ addCoupon,
+ deleteCoupon,
+ applyCoupon,
+ setSelectedCoupon,
+ };
+}
diff --git a/src/basic/entities/coupon/index.ts b/src/basic/entities/coupon/index.ts
new file mode 100644
index 00000000..5e90635a
--- /dev/null
+++ b/src/basic/entities/coupon/index.ts
@@ -0,0 +1,2 @@
+// 데이터 관련
+export { initialCoupons } from './data';
diff --git a/src/basic/entities/product/data.ts b/src/basic/entities/product/data.ts
new file mode 100644
index 00000000..cf0bfc59
--- /dev/null
+++ b/src/basic/entities/product/data.ts
@@ -0,0 +1,38 @@
+import { ProductWithUI } from './types';
+
+/**
+ * 초기 상품 데이터
+ */
+export const initialProducts: ProductWithUI[] = [
+ {
+ id: 'p1',
+ name: '상품1',
+ price: 10000,
+ stock: 20,
+ discounts: [
+ { quantity: 10, rate: 0.1 },
+ { quantity: 20, rate: 0.2 },
+ ],
+ description: '최고급 품질의 프리미엄 상품입니다.',
+ },
+ {
+ id: 'p2',
+ name: '상품2',
+ price: 20000,
+ stock: 20,
+ discounts: [{ quantity: 10, rate: 0.15 }],
+ description: '다양한 기능을 갖춘 실용적인 상품입니다.',
+ isRecommended: true,
+ },
+ {
+ id: 'p3',
+ name: '상품3',
+ price: 30000,
+ stock: 20,
+ discounts: [
+ { quantity: 10, rate: 0.2 },
+ { quantity: 30, rate: 0.25 },
+ ],
+ description: '대용량과 고성능을 자랑하는 상품입니다.',
+ },
+];
diff --git a/src/basic/entities/product/index.ts b/src/basic/entities/product/index.ts
new file mode 100644
index 00000000..0d4ee263
--- /dev/null
+++ b/src/basic/entities/product/index.ts
@@ -0,0 +1,5 @@
+// 타입 관련
+export type { ProductWithUI } from './types';
+
+// 데이터 관련
+export { initialProducts } from './data';
diff --git a/src/basic/entities/product/types.ts b/src/basic/entities/product/types.ts
new file mode 100644
index 00000000..dfa1402c
--- /dev/null
+++ b/src/basic/entities/product/types.ts
@@ -0,0 +1,6 @@
+import { Product } from '../../../types';
+
+export interface ProductWithUI extends Product {
+ description?: string;
+ isRecommended?: boolean;
+}
diff --git a/src/basic/features/cart/hooks/index.ts b/src/basic/features/cart/hooks/index.ts
new file mode 100644
index 00000000..bbe99fcd
--- /dev/null
+++ b/src/basic/features/cart/hooks/index.ts
@@ -0,0 +1 @@
+export { useCart } from './useCart';
\ No newline at end of file
diff --git a/src/basic/features/cart/hooks/useCart.ts b/src/basic/features/cart/hooks/useCart.ts
new file mode 100644
index 00000000..49bc4fb3
--- /dev/null
+++ b/src/basic/features/cart/hooks/useCart.ts
@@ -0,0 +1,121 @@
+import { useCallback } from 'react';
+import { CartItem } from '../../../../types';
+import { ProductWithUI } from '../../../entities/product';
+import { getRemainingStock } from '../../../shared/utils';
+
+interface UseCartProps {
+ cart: CartItem[];
+ setCart: React.Dispatch>;
+ products: ProductWithUI[];
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export function useCart({
+ cart,
+ setCart,
+ products,
+ addNotification,
+}: UseCartProps) {
+ // 특정 상품의 장바구니 수량 찾기
+ const getCartQuantity = useCallback(
+ (productId: string): number => {
+ const cartItem = cart.find((item) => item.product.id === productId);
+ return cartItem?.quantity || 0;
+ },
+ [cart]
+ );
+
+ // 장바구니에 상품 추가
+ const addToCart = useCallback(
+ (product: ProductWithUI) => {
+ const cartQuantity = getCartQuantity(product.id);
+ const remainingStock = getRemainingStock({
+ stock: product.stock,
+ cartQuantity
+ });
+
+ if (remainingStock <= 0) {
+ addNotification('재고가 부족합니다!', 'error');
+ return;
+ }
+
+ setCart((prevCart) => {
+ const existingItem = prevCart.find(
+ (item) => item.product.id === product.id
+ );
+
+ if (existingItem) {
+ const newQuantity = existingItem.quantity + 1;
+
+ if (newQuantity > product.stock) {
+ addNotification(
+ `재고는 ${product.stock}개까지만 있습니다.`,
+ 'error'
+ );
+ return prevCart;
+ }
+
+ return prevCart.map((item) =>
+ item.product.id === product.id
+ ? { ...item, quantity: newQuantity }
+ : item
+ );
+ }
+
+ return [...prevCart, { product, quantity: 1 }];
+ });
+
+ addNotification('장바구니에 담았습니다', 'success');
+ },
+ [addNotification, getCartQuantity, setCart]
+ );
+
+ // 장바구니에서 상품 제거
+ const removeFromCart = useCallback(
+ (productId: string) => {
+ setCart((prevCart) =>
+ prevCart.filter((item) => item.product.id !== productId)
+ );
+ },
+ [setCart]
+ );
+
+ // 장바구니 상품 수량 업데이트
+ const updateQuantity = useCallback(
+ (productId: string, newQuantity: number) => {
+ if (newQuantity <= 0) {
+ removeFromCart(productId);
+ return;
+ }
+
+ const product = products.find((p) => p.id === productId);
+ if (!product) return;
+
+ const maxStock = product.stock;
+ if (newQuantity > maxStock) {
+ addNotification(`재고는 ${maxStock}개까지만 있습니다.`, 'error');
+ return;
+ }
+
+ setCart((prevCart) =>
+ prevCart.map((item) =>
+ item.product.id === productId
+ ? { ...item, quantity: newQuantity }
+ : item
+ )
+ );
+ },
+ [products, removeFromCart, addNotification, setCart]
+ );
+
+ return {
+ cart,
+ addToCart,
+ removeFromCart,
+ updateQuantity,
+ getCartQuantity,
+ };
+}
\ No newline at end of file
diff --git a/src/basic/features/cart/ui/CartItemsList.tsx b/src/basic/features/cart/ui/CartItemsList.tsx
new file mode 100644
index 00000000..db7a3b0e
--- /dev/null
+++ b/src/basic/features/cart/ui/CartItemsList.tsx
@@ -0,0 +1,131 @@
+import { CartItem } from '../../../../types';
+import { Button } from '../../../shared/ui';
+import { calculateItemTotal } from '../../../entities/cart';
+
+interface CartItemsListProps {
+ cart: CartItem[];
+ onRemove: (productId: string) => void;
+ onUpdateQuantity: (productId: string, newQuantity: number) => void;
+}
+
+export function CartItemsList({
+ cart,
+ onRemove,
+ onUpdateQuantity,
+}: CartItemsListProps) {
+ return (
+
+
+ );
+}
diff --git a/src/basic/features/cart/ui/index.ts b/src/basic/features/cart/ui/index.ts
new file mode 100644
index 00000000..7408d52f
--- /dev/null
+++ b/src/basic/features/cart/ui/index.ts
@@ -0,0 +1 @@
+export { CartItemsList } from './CartItemsList';
diff --git a/src/basic/features/coupon/admin/ui/CouponForm.tsx b/src/basic/features/coupon/admin/ui/CouponForm.tsx
new file mode 100644
index 00000000..7ccdd871
--- /dev/null
+++ b/src/basic/features/coupon/admin/ui/CouponForm.tsx
@@ -0,0 +1,169 @@
+import { FormEvent } from 'react';
+import { Button } from '../../../../shared/ui';
+
+interface CouponFormData {
+ name: string;
+ code: string;
+ discountType: 'amount' | 'percentage';
+ discountValue: number;
+}
+
+interface CouponFormProps {
+ couponForm: CouponFormData;
+ setCouponForm: React.Dispatch>;
+ onSubmit: () => void;
+ onCancel: () => void;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export default function CouponForm({
+ couponForm,
+ setCouponForm,
+ onSubmit,
+ onCancel,
+ addNotification,
+}: CouponFormProps) {
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ onSubmit();
+ };
+
+ const handleDiscountValueChange = (
+ e: React.ChangeEvent
+ ) => {
+ const value = e.target.value;
+ if (value === '' || /^\d+$/.test(value)) {
+ setCouponForm({
+ ...couponForm,
+ discountValue: value === '' ? 0 : parseInt(value),
+ });
+ }
+ };
+
+ const handleDiscountValueBlur = (e: React.FocusEvent) => {
+ const value = parseInt(e.target.value) || 0;
+ if (couponForm.discountType === 'percentage') {
+ if (value > 100) {
+ addNotification('할인율은 100%를 초과할 수 없습니다', 'error');
+ setCouponForm({
+ ...couponForm,
+ discountValue: 100,
+ });
+ } else if (value < 0) {
+ setCouponForm({
+ ...couponForm,
+ discountValue: 0,
+ });
+ }
+ } else {
+ if (value > 100000) {
+ addNotification('할인 금액은 100,000원을 초과할 수 없습니다', 'error');
+ setCouponForm({
+ ...couponForm,
+ discountValue: 100000,
+ });
+ } else if (value < 0) {
+ setCouponForm({
+ ...couponForm,
+ discountValue: 0,
+ });
+ }
+ }
+ };
+
+ return (
+ >;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export function CouponManagement({
+ coupons,
+ setCoupons,
+ addNotification,
+}: CouponManagementProps) {
+ const { addCoupon, deleteCoupon } = useCoupons({
+ coupons,
+ setCoupons,
+ selectedCoupon: null, // Admin에서는 쿠폰 선택 불필요
+ setSelectedCoupon: () => {}, // Admin에서는 쿠폰 선택 불필요
+ addNotification,
+ calculateCartTotalWithCoupon: () => ({
+ totalBeforeDiscount: 0,
+ totalAfterDiscount: 0,
+ }),
+ });
+
+ const [showCouponForm, setShowCouponForm] = useState(false);
+ const [couponForm, setCouponForm] = useState({
+ name: '',
+ code: '',
+ discountType: 'amount' as 'amount' | 'percentage',
+ discountValue: 0,
+ });
+
+ const handleCouponSubmit = () => {
+ addCoupon(couponForm);
+ resetForm();
+ };
+
+ const resetForm = () => {
+ setCouponForm({
+ name: '',
+ code: '',
+ discountType: 'amount',
+ discountValue: 0,
+ });
+ setShowCouponForm(false);
+ };
+
+ const startAddCoupon = () => {
+ setShowCouponForm(true);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/basic/features/coupon/admin/ui/CouponTable.tsx b/src/basic/features/coupon/admin/ui/CouponTable.tsx
new file mode 100644
index 00000000..a89f3c8e
--- /dev/null
+++ b/src/basic/features/coupon/admin/ui/CouponTable.tsx
@@ -0,0 +1,79 @@
+import { Coupon } from '../../../../../types';
+import { Button } from '../../../../shared/ui';
+
+interface CouponTableProps {
+ coupons: Coupon[];
+ onDelete: (couponCode: string) => void;
+ onAddNew: () => void;
+}
+
+export default function CouponTable({
+ coupons,
+ onDelete,
+ onAddNew,
+}: CouponTableProps) {
+ return (
+ >;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+ calculateCartTotalWithCoupon: () => {
+ totalBeforeDiscount: number;
+ totalAfterDiscount: number;
+ };
+}
+
+export function CouponSelector({
+ coupons,
+ selectedCoupon,
+ setSelectedCoupon,
+ addNotification,
+ calculateCartTotalWithCoupon,
+}: CouponSelectorProps) {
+ const { applyCoupon } = useCoupons({
+ coupons,
+ setCoupons: () => {},
+ selectedCoupon,
+ setSelectedCoupon,
+ addNotification,
+ calculateCartTotalWithCoupon,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/src/basic/features/coupon/shop/ui/index.ts b/src/basic/features/coupon/shop/ui/index.ts
new file mode 100644
index 00000000..b4bb0ed2
--- /dev/null
+++ b/src/basic/features/coupon/shop/ui/index.ts
@@ -0,0 +1 @@
+export { CouponSelector } from './CouponSelector';
diff --git a/src/basic/features/order/hooks/index.ts b/src/basic/features/order/hooks/index.ts
new file mode 100644
index 00000000..caa7eff1
--- /dev/null
+++ b/src/basic/features/order/hooks/index.ts
@@ -0,0 +1 @@
+export { useOrder } from './useOrder';
\ No newline at end of file
diff --git a/src/basic/features/order/hooks/useOrder.ts b/src/basic/features/order/hooks/useOrder.ts
new file mode 100644
index 00000000..e1f8768d
--- /dev/null
+++ b/src/basic/features/order/hooks/useOrder.ts
@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { CartItem, Coupon } from '../../../../types';
+
+interface UseOrderProps {
+ setCart: React.Dispatch>;
+ setSelectedCoupon: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export function useOrder({
+ setCart,
+ setSelectedCoupon,
+ addNotification,
+}: UseOrderProps) {
+ // 주문 완료 처리
+ const completeOrder = useCallback(() => {
+ const orderNumber = `ORD-${Date.now()}`;
+ addNotification(
+ `주문이 완료되었습니다. 주문번호: ${orderNumber}`,
+ 'success'
+ );
+ setCart([]);
+ setSelectedCoupon(null);
+ }, [addNotification, setCart, setSelectedCoupon]);
+
+ return {
+ completeOrder,
+ };
+}
\ No newline at end of file
diff --git a/src/basic/features/order/ui/OrderSummary.tsx b/src/basic/features/order/ui/OrderSummary.tsx
new file mode 100644
index 00000000..da519b8b
--- /dev/null
+++ b/src/basic/features/order/ui/OrderSummary.tsx
@@ -0,0 +1,74 @@
+import { CartItem, Coupon } from '../../../../types';
+import { Button } from '../../../shared/ui';
+import { useOrder } from '../hooks';
+
+interface OrderSummaryProps {
+ totals: {
+ totalBeforeDiscount: number;
+ totalAfterDiscount: number;
+ };
+ setCart: React.Dispatch>;
+ setSelectedCoupon: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export function OrderSummary({
+ totals,
+ setCart,
+ setSelectedCoupon,
+ addNotification,
+}: OrderSummaryProps) {
+ const { completeOrder } = useOrder({
+ setCart,
+ setSelectedCoupon,
+ addNotification,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/src/basic/features/order/ui/index.ts b/src/basic/features/order/ui/index.ts
new file mode 100644
index 00000000..dd49db3a
--- /dev/null
+++ b/src/basic/features/order/ui/index.ts
@@ -0,0 +1 @@
+export { OrderSummary } from './OrderSummary';
diff --git a/src/basic/features/product/admin/hooks/index.ts b/src/basic/features/product/admin/hooks/index.ts
new file mode 100644
index 00000000..5977d886
--- /dev/null
+++ b/src/basic/features/product/admin/hooks/index.ts
@@ -0,0 +1 @@
+export { useProducts } from './useProducts';
diff --git a/src/basic/features/product/admin/hooks/useProducts.ts b/src/basic/features/product/admin/hooks/useProducts.ts
new file mode 100644
index 00000000..2ae395e3
--- /dev/null
+++ b/src/basic/features/product/admin/hooks/useProducts.ts
@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+import { ProductWithUI } from '../../../../entities/product';
+
+interface UseProductsProps {
+ products: ProductWithUI[];
+ setProducts: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export function useProducts({
+ products,
+ setProducts,
+ addNotification,
+}: UseProductsProps) {
+ // 상품 추가
+ const addProduct = useCallback(
+ (newProduct: Omit) => {
+ const product: ProductWithUI = {
+ ...newProduct,
+ id: `p${Date.now()}`,
+ };
+ setProducts((prev) => [...prev, product]);
+ addNotification('상품이 추가되었습니다.', 'success');
+ },
+ [setProducts, addNotification]
+ );
+
+ // 상품 업데이트
+ const updateProduct = useCallback(
+ (productId: string, updates: Partial) => {
+ setProducts((prev) =>
+ prev.map((product) =>
+ product.id === productId ? { ...product, ...updates } : product
+ )
+ );
+ addNotification('상품이 수정되었습니다.', 'success');
+ },
+ [setProducts, addNotification]
+ );
+
+ // 상품 삭제
+ const deleteProduct = useCallback(
+ (productId: string) => {
+ setProducts((prev) => prev.filter((p) => p.id !== productId));
+ addNotification('상품이 삭제되었습니다.', 'success');
+ },
+ [setProducts, addNotification]
+ );
+
+ return {
+ products,
+ addProduct,
+ updateProduct,
+ deleteProduct,
+ };
+}
diff --git a/src/basic/features/product/admin/ui/ProductForm.tsx b/src/basic/features/product/admin/ui/ProductForm.tsx
new file mode 100644
index 00000000..9358c8e2
--- /dev/null
+++ b/src/basic/features/product/admin/ui/ProductForm.tsx
@@ -0,0 +1,263 @@
+import { FormEvent } from 'react';
+import { Button } from '../../../../shared/ui';
+
+interface ProductFormData {
+ name: string;
+ price: number;
+ stock: number;
+ description: string;
+ discounts: Array<{ quantity: number; rate: number }>;
+}
+
+interface ProductFormProps {
+ productForm: ProductFormData;
+ setProductForm: React.Dispatch>;
+ onSubmit: () => void;
+ onCancel: () => void;
+ isEditing: boolean;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export default function ProductForm({
+ productForm,
+ setProductForm,
+ onSubmit,
+ onCancel,
+ isEditing,
+ addNotification,
+}: ProductFormProps) {
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ onSubmit();
+ };
+
+ const addDiscount = () => {
+ setProductForm({
+ ...productForm,
+ discounts: [...productForm.discounts, { quantity: 10, rate: 0.1 }],
+ });
+ };
+
+ const removeDiscount = (index: number) => {
+ const newDiscounts = productForm.discounts.filter((_, i) => i !== index);
+ setProductForm({
+ ...productForm,
+ discounts: newDiscounts,
+ });
+ };
+
+ const updateDiscount = (
+ index: number,
+ field: 'quantity' | 'rate',
+ value: number
+ ) => {
+ const newDiscounts = [...productForm.discounts];
+ newDiscounts[index][field] = value;
+ setProductForm({
+ ...productForm,
+ discounts: newDiscounts,
+ });
+ };
+
+ return (
+ >;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export default function ProductManagement({
+ products,
+ setProducts,
+ addNotification,
+}: ProductManagementProps) {
+ const { addProduct, updateProduct, deleteProduct } = useProducts({
+ products,
+ setProducts,
+ addNotification,
+ });
+
+ const [showProductForm, setShowProductForm] = useState(false);
+ const [editingProduct, setEditingProduct] = useState(null);
+ const [productForm, setProductForm] = useState({
+ name: '',
+ price: 0,
+ stock: 0,
+ description: '',
+ discounts: [] as Array<{ quantity: number; rate: number }>,
+ });
+
+ const handleProductSubmit = () => {
+ if (editingProduct && editingProduct !== 'new') {
+ updateProduct(editingProduct, productForm);
+ setEditingProduct(null);
+ } else {
+ addProduct(productForm);
+ }
+ resetForm();
+ };
+
+ const startEditProduct = (product: ProductWithUI) => {
+ setEditingProduct(product.id);
+ setProductForm({
+ name: product.name,
+ price: product.price,
+ stock: product.stock,
+ description: product.description || '',
+ discounts: product.discounts || [],
+ });
+ setShowProductForm(true);
+ };
+
+ const startAddProduct = () => {
+ setEditingProduct('new');
+ setProductForm({
+ name: '',
+ price: 0,
+ stock: 0,
+ description: '',
+ discounts: [],
+ });
+ setShowProductForm(true);
+ };
+
+ const resetForm = () => {
+ setProductForm({
+ name: '',
+ price: 0,
+ stock: 0,
+ description: '',
+ discounts: [],
+ });
+ setEditingProduct(null);
+ setShowProductForm(false);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/basic/features/product/admin/ui/ProductTable.tsx b/src/basic/features/product/admin/ui/ProductTable.tsx
new file mode 100644
index 00000000..9783bfe9
--- /dev/null
+++ b/src/basic/features/product/admin/ui/ProductTable.tsx
@@ -0,0 +1,86 @@
+import { ProductWithUI } from '../../../../entities/product';
+import { Button } from '../../../../shared/ui';
+import { formatPrice } from '../../../../shared/utils';
+
+interface ProductTableProps {
+ products: ProductWithUI[];
+ onEdit: (product: ProductWithUI) => void;
+ onDelete: (productId: string) => void;
+}
+
+export default function ProductTable({
+ products,
+ onEdit,
+ onDelete,
+}: ProductTableProps) {
+ // 관리자용 가격 표시 함수
+ const displayAdminPrice = (price: number) => {
+ const formatted = formatPrice(price);
+ return `${formatted}원`;
+ };
+ return (
+ >;
+ coupons: Coupon[];
+ setCoupons: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+}
+
+export default function AdminPage({
+ products,
+ setProducts,
+ coupons,
+ setCoupons,
+ addNotification,
+}: AdminPageProps) {
+ const [activeTab, setActiveTab] = useState<'products' | 'coupons'>(
+ 'products'
+ );
+
+ return (
+ >;
+ coupons: Coupon[];
+ selectedCoupon: Coupon | null;
+ setSelectedCoupon: React.Dispatch>;
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+ calculateCartTotalWithCoupon: () => {
+ totalBeforeDiscount: number;
+ totalAfterDiscount: number;
+ };
+}
+
+export default function ShoppingPage({
+ products,
+ searchTerm,
+ cart,
+ setCart,
+ coupons,
+ selectedCoupon,
+ setSelectedCoupon,
+ addNotification,
+ calculateCartTotalWithCoupon,
+}: ShoppingPageProps) {
+ const { filteredProducts } = useProductSearch(products, searchTerm);
+
+ const { addToCart } = useCart({
+ cart,
+ setCart,
+ products,
+ addNotification,
+ });
+
+ return (
+ (value: T, delay: number): T {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+}
diff --git a/src/basic/shared/hooks/useLocalStorage.ts b/src/basic/shared/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..5488dc7a
--- /dev/null
+++ b/src/basic/shared/hooks/useLocalStorage.ts
@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * localStorage와 연동된 상태를 관리하는 커스텀 훅
+ * @param key localStorage 키
+ * @param defaultValue 기본값
+ * @returns [상태값, 상태변경함수]
+ */
+export function useLocalStorage(
+ key: string,
+ defaultValue: T
+): [T, React.Dispatch>] {
+ // 초기값 설정 - localStorage에서 복원
+ const [state, setState] = useState(() => {
+ try {
+ const saved = localStorage.getItem(key);
+ if (saved) {
+ return JSON.parse(saved);
+ }
+ } catch (error) {
+ console.warn(`localStorage에서 ${key} 읽기 실패:`, error);
+ }
+ return defaultValue;
+ });
+
+ // 상태가 변경될 때마다 localStorage에 저장
+ useEffect(() => {
+ try {
+ if (key === 'cart' && Array.isArray(state) && state.length === 0) {
+ // 장바구니가 비어있으면 localStorage에서 제거
+ localStorage.removeItem(key);
+ } else {
+ localStorage.setItem(key, JSON.stringify(state));
+ }
+ } catch (error) {
+ console.warn(`localStorage에 ${key} 저장 실패:`, error);
+ }
+ }, [key, state]);
+
+ return [state, setState];
+}
diff --git a/src/basic/shared/hooks/useNotification.ts b/src/basic/shared/hooks/useNotification.ts
new file mode 100644
index 00000000..7b9aa844
--- /dev/null
+++ b/src/basic/shared/hooks/useNotification.ts
@@ -0,0 +1,55 @@
+import { useState, useCallback } from 'react';
+
+export interface Notification {
+ id: string;
+ message: string;
+ type: 'error' | 'success' | 'warning';
+}
+
+export interface UseNotificationReturn {
+ notifications: Notification[];
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+ removeNotification: (id: string) => void;
+}
+
+/**
+ * 알림 시스템을 관리하는 커스텀 훅
+ * 알림 추가, 자동 제거, 수동 제거 기능 제공
+ */
+export function useNotification(): UseNotificationReturn {
+ const [notifications, setNotifications] = useState([]);
+
+ /**
+ * 새 알림 추가 (3초 후 자동 제거)
+ */
+ const addNotification = useCallback(
+ (message: string, type: 'error' | 'success' | 'warning' = 'success') => {
+ const id = Date.now().toString();
+ const newNotification: Notification = { id, message, type };
+
+ setNotifications((prev) => [...prev, newNotification]);
+
+ // 3초 후 자동 제거
+ setTimeout(() => {
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
+ }, 3000);
+ },
+ []
+ );
+
+ /**
+ * 특정 알림 수동 제거
+ */
+ const removeNotification = useCallback((id: string) => {
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
+ }, []);
+
+ return {
+ notifications,
+ addNotification,
+ removeNotification,
+ };
+}
diff --git a/src/basic/shared/ui/Button.tsx b/src/basic/shared/ui/Button.tsx
new file mode 100644
index 00000000..7eae07d2
--- /dev/null
+++ b/src/basic/shared/ui/Button.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes {
+ variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'icon' | 'link';
+ size?: 'sm' | 'md' | 'lg';
+ children: React.ReactNode;
+}
+
+const Button: React.FC = ({
+ variant = 'primary',
+ size,
+ className = '',
+ children,
+ disabled,
+ ...props
+}) => {
+ const baseClasses = 'transition-colors focus:outline-none';
+
+ const variantClasses = {
+ primary:
+ 'inline-flex items-center justify-center font-medium bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-500 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed',
+ secondary:
+ 'inline-flex items-center justify-center font-medium bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed',
+ danger: 'font-medium text-red-600 hover:text-red-800 focus:ring-red-500',
+ ghost:
+ 'inline-flex items-center justify-center font-medium border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500 disabled:opacity-50 disabled:cursor-not-allowed',
+ icon: 'inline-flex items-center justify-center text-gray-400 hover:text-gray-600',
+ link: 'text-indigo-600 hover:text-indigo-800',
+ };
+
+ const sizeClasses = {
+ sm: 'px-2 py-1 text-xs rounded',
+ md: 'px-4 py-2 text-sm rounded-md',
+ lg: 'px-6 py-3 text-base rounded-lg',
+ };
+
+ const classes = `${baseClasses} ${variantClasses[variant]} ${
+ size ? sizeClasses[size] : ''
+ } ${className}`.trim();
+
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/src/basic/shared/ui/Header.tsx b/src/basic/shared/ui/Header.tsx
new file mode 100644
index 00000000..e72b5e18
--- /dev/null
+++ b/src/basic/shared/ui/Header.tsx
@@ -0,0 +1,73 @@
+import { SearchInput, Button } from '.';
+import { CartItem } from '../../../types';
+
+interface HeaderProps {
+ isAdmin: boolean;
+ searchTerm: string;
+ cart: CartItem[];
+ onToggleAdmin: () => void;
+ onSearchChange: (value: string) => void;
+}
+
+export default function Header({
+ isAdmin,
+ searchTerm,
+ cart,
+ onToggleAdmin,
+ onSearchChange,
+}: HeaderProps) {
+ const totalItemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
+ const cartLength = cart.length;
+
+ return (
+
+
+ );
+}
diff --git a/src/basic/shared/ui/NotificationToast.tsx b/src/basic/shared/ui/NotificationToast.tsx
new file mode 100644
index 00000000..ec858603
--- /dev/null
+++ b/src/basic/shared/ui/NotificationToast.tsx
@@ -0,0 +1,51 @@
+import { Notification } from '../hooks/useNotification';
+
+interface NotificationToastProps {
+ notifications: Notification[];
+ onRemove: (id: string) => void;
+}
+
+export default function NotificationToast({
+ notifications,
+ onRemove,
+}: NotificationToastProps) {
+ if (notifications.length === 0) return null;
+
+ return (
+ >;
+ coupons: Coupon[];
+ selectedCoupon: Coupon | null;
+ setSelectedCoupon: React.Dispatch>;
+ products: ProductWithUI[];
+ addNotification: (
+ message: string,
+ type?: 'error' | 'success' | 'warning'
+ ) => void;
+ calculateCartTotalWithCoupon: () => {
+ totalBeforeDiscount: number;
+ totalAfterDiscount: number;
+ };
+}
+
+export function ShoppingSidebar({
+ cart,
+ setCart,
+ coupons,
+ selectedCoupon,
+ setSelectedCoupon,
+ products,
+ addNotification,
+ calculateCartTotalWithCoupon,
+}: ShoppingSidebarProps) {
+ const { removeFromCart, updateQuantity } = useCart({
+ cart,
+ setCart,
+ products,
+ addNotification,
+ });
+
+ const totals = useMemo(() => {
+ return calculateCartTotal(cart, selectedCoupon);
+ }, [cart, selectedCoupon]);
+
+ return (
+ (() => {
const saved = localStorage.getItem('products');
if (saved) {
@@ -78,6 +85,7 @@ const App = () => {
return initialProducts;
});
+ // 장바구니 상태 (localStorage에서 복원)
const [cart, setCart] = useState(() => {
const saved = localStorage.getItem('cart');
if (saved) {
@@ -90,6 +98,7 @@ const App = () => {
return [];
});
+ // 쿠폰 목록 상태 (localStorage에서 복원)
const [coupons, setCoupons] = useState(() => {
const saved = localStorage.getItem('coupons');
if (saved) {
@@ -102,36 +111,52 @@ const App = () => {
return initialCoupons;
});
- const [selectedCoupon, setSelectedCoupon] = useState(null);
- const [isAdmin, setIsAdmin] = useState(false);
- const [notifications, setNotifications] = useState([]);
- const [showCouponForm, setShowCouponForm] = useState(false);
- const [activeTab, setActiveTab] = useState<'products' | 'coupons'>('products');
- const [showProductForm, setShowProductForm] = useState(false);
- const [searchTerm, setSearchTerm] = useState('');
- const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
-
- // Admin
- const [editingProduct, setEditingProduct] = useState(null);
+ // ============================================================================
+ // UI 상태 관리 - 화면 표시 및 사용자 인터랙션 관련 상태들
+ // ============================================================================
+
+ const [selectedCoupon, setSelectedCoupon] = useState(null); // 선택된 쿠폰
+ const [isAdmin, setIsAdmin] = useState(false); // 관리자 모드 여부
+ const [notifications, setNotifications] = useState([]); // 알림 메시지들
+ const [showCouponForm, setShowCouponForm] = useState(false); // 쿠폰 폼 표시 여부
+ const [activeTab, setActiveTab] = useState<'products' | 'coupons'>(
+ 'products'
+ ); // 관리자 탭
+ const [showProductForm, setShowProductForm] = useState(false); // 상품 폼 표시 여부
+ const [searchTerm, setSearchTerm] = useState(''); // 검색어
+ const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); // 디바운스된 검색어
+
+ // ============================================================================
+ // 관리자 폼 상태 - 상품/쿠폰 편집을 위한 폼 데이터
+ // ============================================================================
+
+ const [editingProduct, setEditingProduct] = useState(null); // 편집 중인 상품 ID
+
+ // 상품 폼 데이터
const [productForm, setProductForm] = useState({
name: '',
price: 0,
stock: 0,
description: '',
- discounts: [] as Array<{ quantity: number; rate: number }>
+ discounts: [] as Array<{ quantity: number; rate: number }>,
});
+ // 쿠폰 폼 데이터
const [couponForm, setCouponForm] = useState({
name: '',
code: '',
discountType: 'amount' as 'amount' | 'percentage',
- discountValue: 0
+ discountValue: 0,
});
+ // ============================================================================
+ // 유틸리티 함수들 - 데이터 포맷팅 및 계산 로직
+ // ============================================================================
+ // 가격 포맷팅 함수 (관리자/일반 사용자 구분, 품절 처리)
const formatPrice = (price: number, productId?: string): string => {
if (productId) {
- const product = products.find(p => p.id === productId);
+ const product = products.find((p) => p.id === productId);
if (product && getRemainingStock(product) <= 0) {
return 'SOLD OUT';
}
@@ -140,36 +165,41 @@ const App = () => {
if (isAdmin) {
return `${price.toLocaleString()}원`;
}
-
+
return `₩${price.toLocaleString()}`;
};
+ // 최대 적용 가능한 할인율 계산 (상품별 할인 + 대량구매 할인)
const getMaxApplicableDiscount = (item: CartItem): number => {
const { discounts } = item.product;
const { quantity } = item;
-
+
+ // 기본 할인율 계산
const baseDiscount = discounts.reduce((maxDiscount, discount) => {
- return quantity >= discount.quantity && discount.rate > maxDiscount
- ? discount.rate
+ return quantity >= discount.quantity && discount.rate > maxDiscount
+ ? discount.rate
: maxDiscount;
}, 0);
-
- const hasBulkPurchase = cart.some(cartItem => cartItem.quantity >= 10);
+
+ // 대량구매 시 추가 할인 (10개 이상 구매 시 5% 추가)
+ const hasBulkPurchase = cart.some((cartItem) => cartItem.quantity >= 10);
if (hasBulkPurchase) {
- return Math.min(baseDiscount + 0.05, 0.5); // 대량 구매 시 추가 5% 할인
+ return Math.min(baseDiscount + 0.05, 0.5); // 최대 50% 제한
}
-
+
return baseDiscount;
};
+ // 개별 상품의 총 금액 계산 (할인 적용)
const calculateItemTotal = (item: CartItem): number => {
const { price } = item.product;
const { quantity } = item;
const discount = getMaxApplicableDiscount(item);
-
+
return Math.round(price * quantity * (1 - discount));
};
+ // 장바구니 전체 금액 계산 (쿠폰 할인 포함)
const calculateCartTotal = (): {
totalBeforeDiscount: number;
totalAfterDiscount: number;
@@ -177,50 +207,74 @@ const App = () => {
let totalBeforeDiscount = 0;
let totalAfterDiscount = 0;
- cart.forEach(item => {
+ // 각 상품별 금액 계산
+ cart.forEach((item) => {
const itemPrice = item.product.price * item.quantity;
totalBeforeDiscount += itemPrice;
totalAfterDiscount += calculateItemTotal(item);
});
+ // 쿠폰 할인 적용
if (selectedCoupon) {
if (selectedCoupon.discountType === 'amount') {
- totalAfterDiscount = Math.max(0, totalAfterDiscount - selectedCoupon.discountValue);
+ totalAfterDiscount = Math.max(
+ 0,
+ totalAfterDiscount - selectedCoupon.discountValue
+ );
} else {
- totalAfterDiscount = Math.round(totalAfterDiscount * (1 - selectedCoupon.discountValue / 100));
+ totalAfterDiscount = Math.round(
+ totalAfterDiscount * (1 - selectedCoupon.discountValue / 100)
+ );
}
}
return {
totalBeforeDiscount: Math.round(totalBeforeDiscount),
- totalAfterDiscount: Math.round(totalAfterDiscount)
+ totalAfterDiscount: Math.round(totalAfterDiscount),
};
};
+ // 남은 재고 계산 (전체 재고 - 장바구니 수량)
const getRemainingStock = (product: Product): number => {
- const cartItem = cart.find(item => item.product.id === product.id);
+ const cartItem = cart.find((item) => item.product.id === product.id);
const remaining = product.stock - (cartItem?.quantity || 0);
-
+
return remaining;
};
- const addNotification = useCallback((message: string, type: 'error' | 'success' | 'warning' = 'success') => {
- const id = Date.now().toString();
- setNotifications(prev => [...prev, { id, message, type }]);
-
- setTimeout(() => {
- setNotifications(prev => prev.filter(n => n.id !== id));
- }, 3000);
- }, []);
+ // ============================================================================
+ // 알림 시스템 - 사용자에게 피드백 제공
+ // ============================================================================
+
+ // 알림 추가 함수 (3초 후 자동 제거)
+ const addNotification = useCallback(
+ (message: string, type: 'error' | 'success' | 'warning' = 'success') => {
+ const id = Date.now().toString();
+ setNotifications((prev) => [...prev, { id, message, type }]);
+
+ setTimeout(() => {
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
+ }, 3000);
+ },
+ []
+ );
+
+ // ============================================================================
+ // 파생 상태 - 다른 상태로부터 계산되는 값들
+ // ============================================================================
- const [totalItemCount, setTotalItemCount] = useState(0);
-
+ const [totalItemCount, setTotalItemCount] = useState(0); // 장바구니 총 아이템 수
+ // 장바구니 아이템 수 업데이트
useEffect(() => {
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
setTotalItemCount(count);
}, [cart]);
+ // ============================================================================
+ // localStorage 동기화 Effects - 상태 변경 시 localStorage에 저장
+ // ============================================================================
+
useEffect(() => {
localStorage.setItem('products', JSON.stringify(products));
}, [products]);
@@ -237,6 +291,10 @@ const App = () => {
}
}, [cart]);
+ // ============================================================================
+ // 검색 기능 - 디바운스를 통한 성능 최적화
+ // ============================================================================
+
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearchTerm(searchTerm);
@@ -244,127 +302,198 @@ const App = () => {
return () => clearTimeout(timer);
}, [searchTerm]);
- const addToCart = useCallback((product: ProductWithUI) => {
- const remainingStock = getRemainingStock(product);
- if (remainingStock <= 0) {
- addNotification('재고가 부족합니다!', 'error');
- return;
- }
+ // ============================================================================
+ // 장바구니 관련 비즈니스 로직
+ // ============================================================================
- setCart(prevCart => {
- const existingItem = prevCart.find(item => item.product.id === product.id);
-
- if (existingItem) {
- const newQuantity = existingItem.quantity + 1;
-
- if (newQuantity > product.stock) {
- addNotification(`재고는 ${product.stock}개까지만 있습니다.`, 'error');
- return prevCart;
- }
+ // 장바구니에 상품 추가
+ const addToCart = useCallback(
+ (product: ProductWithUI) => {
+ const remainingStock = getRemainingStock(product);
+ if (remainingStock <= 0) {
+ addNotification('재고가 부족합니다!', 'error');
+ return;
+ }
- return prevCart.map(item =>
- item.product.id === product.id
- ? { ...item, quantity: newQuantity }
- : item
+ setCart((prevCart) => {
+ const existingItem = prevCart.find(
+ (item) => item.product.id === product.id
);
- }
-
- return [...prevCart, { product, quantity: 1 }];
- });
-
- addNotification('장바구니에 담았습니다', 'success');
- }, [cart, addNotification, getRemainingStock]);
+ if (existingItem) {
+ const newQuantity = existingItem.quantity + 1;
+
+ if (newQuantity > product.stock) {
+ addNotification(
+ `재고는 ${product.stock}개까지만 있습니다.`,
+ 'error'
+ );
+ return prevCart;
+ }
+
+ return prevCart.map((item) =>
+ item.product.id === product.id
+ ? { ...item, quantity: newQuantity }
+ : item
+ );
+ }
+
+ return [...prevCart, { product, quantity: 1 }];
+ });
+
+ addNotification('장바구니에 담았습니다', 'success');
+ },
+ [cart, addNotification, getRemainingStock]
+ );
+
+ // 장바구니에서 상품 제거
const removeFromCart = useCallback((productId: string) => {
- setCart(prevCart => prevCart.filter(item => item.product.id !== productId));
+ setCart((prevCart) =>
+ prevCart.filter((item) => item.product.id !== productId)
+ );
}, []);
- const updateQuantity = useCallback((productId: string, newQuantity: number) => {
- if (newQuantity <= 0) {
- removeFromCart(productId);
- return;
- }
+ // 장바구니 상품 수량 업데이트
+ const updateQuantity = useCallback(
+ (productId: string, newQuantity: number) => {
+ if (newQuantity <= 0) {
+ removeFromCart(productId);
+ return;
+ }
- const product = products.find(p => p.id === productId);
- if (!product) return;
+ const product = products.find((p) => p.id === productId);
+ if (!product) return;
- const maxStock = product.stock;
- if (newQuantity > maxStock) {
- addNotification(`재고는 ${maxStock}개까지만 있습니다.`, 'error');
- return;
- }
+ const maxStock = product.stock;
+ if (newQuantity > maxStock) {
+ addNotification(`재고는 ${maxStock}개까지만 있습니다.`, 'error');
+ return;
+ }
- setCart(prevCart =>
- prevCart.map(item =>
- item.product.id === productId
- ? { ...item, quantity: newQuantity }
- : item
- )
- );
- }, [products, removeFromCart, addNotification, getRemainingStock]);
-
- const applyCoupon = useCallback((coupon: Coupon) => {
- const currentTotal = calculateCartTotal().totalAfterDiscount;
-
- if (currentTotal < 10000 && coupon.discountType === 'percentage') {
- addNotification('percentage 쿠폰은 10,000원 이상 구매 시 사용 가능합니다.', 'error');
- return;
- }
+ setCart((prevCart) =>
+ prevCart.map((item) =>
+ item.product.id === productId
+ ? { ...item, quantity: newQuantity }
+ : item
+ )
+ );
+ },
+ [products, removeFromCart, addNotification, getRemainingStock]
+ );
+
+ // ============================================================================
+ // 쿠폰 관련 비즈니스 로직
+ // ============================================================================
+
+ // 쿠폰 적용
+ const applyCoupon = useCallback(
+ (coupon: Coupon) => {
+ const currentTotal = calculateCartTotal().totalAfterDiscount;
- setSelectedCoupon(coupon);
- addNotification('쿠폰이 적용되었습니다.', 'success');
- }, [addNotification, calculateCartTotal]);
+ // 퍼센트 쿠폰 최소 주문 금액 검증
+ if (currentTotal < 10000 && coupon.discountType === 'percentage') {
+ addNotification(
+ 'percentage 쿠폰은 10,000원 이상 구매 시 사용 가능합니다.',
+ 'error'
+ );
+ return;
+ }
+ setSelectedCoupon(coupon);
+ addNotification('쿠폰이 적용되었습니다.', 'success');
+ },
+ [addNotification, calculateCartTotal]
+ );
+
+ // ============================================================================
+ // 주문 처리 로직
+ // ============================================================================
+
+ // 주문 완료 처리
const completeOrder = useCallback(() => {
const orderNumber = `ORD-${Date.now()}`;
- addNotification(`주문이 완료되었습니다. 주문번호: ${orderNumber}`, 'success');
+ addNotification(
+ `주문이 완료되었습니다. 주문번호: ${orderNumber}`,
+ 'success'
+ );
setCart([]);
setSelectedCoupon(null);
}, [addNotification]);
- const addProduct = useCallback((newProduct: Omit) => {
- const product: ProductWithUI = {
- ...newProduct,
- id: `p${Date.now()}`
- };
- setProducts(prev => [...prev, product]);
- addNotification('상품이 추가되었습니다.', 'success');
- }, [addNotification]);
+ // ============================================================================
+ // 관리자 - 상품 관리 로직
+ // ============================================================================
- const updateProduct = useCallback((productId: string, updates: Partial) => {
- setProducts(prev =>
- prev.map(product =>
- product.id === productId
- ? { ...product, ...updates }
- : product
- )
- );
- addNotification('상품이 수정되었습니다.', 'success');
- }, [addNotification]);
+ // 새 상품 추가
+ const addProduct = useCallback(
+ (newProduct: Omit) => {
+ const product: ProductWithUI = {
+ ...newProduct,
+ id: `p${Date.now()}`,
+ };
+ setProducts((prev) => [...prev, product]);
+ addNotification('상품이 추가되었습니다.', 'success');
+ },
+ [addNotification]
+ );
- const deleteProduct = useCallback((productId: string) => {
- setProducts(prev => prev.filter(p => p.id !== productId));
- addNotification('상품이 삭제되었습니다.', 'success');
- }, [addNotification]);
+ // 상품 정보 업데이트
+ const updateProduct = useCallback(
+ (productId: string, updates: Partial) => {
+ setProducts((prev) =>
+ prev.map((product) =>
+ product.id === productId ? { ...product, ...updates } : product
+ )
+ );
+ addNotification('상품이 수정되었습니다.', 'success');
+ },
+ [addNotification]
+ );
- const addCoupon = useCallback((newCoupon: Coupon) => {
- const existingCoupon = coupons.find(c => c.code === newCoupon.code);
- if (existingCoupon) {
- addNotification('이미 존재하는 쿠폰 코드입니다.', 'error');
- return;
- }
- setCoupons(prev => [...prev, newCoupon]);
- addNotification('쿠폰이 추가되었습니다.', 'success');
- }, [coupons, addNotification]);
-
- const deleteCoupon = useCallback((couponCode: string) => {
- setCoupons(prev => prev.filter(c => c.code !== couponCode));
- if (selectedCoupon?.code === couponCode) {
- setSelectedCoupon(null);
- }
- addNotification('쿠폰이 삭제되었습니다.', 'success');
- }, [selectedCoupon, addNotification]);
+ // 상품 삭제
+ const deleteProduct = useCallback(
+ (productId: string) => {
+ setProducts((prev) => prev.filter((p) => p.id !== productId));
+ addNotification('상품이 삭제되었습니다.', 'success');
+ },
+ [addNotification]
+ );
+
+ // ============================================================================
+ // 관리자 - 쿠폰 관리 로직
+ // ============================================================================
+
+ // 새 쿠폰 추가
+ const addCoupon = useCallback(
+ (newCoupon: Coupon) => {
+ const existingCoupon = coupons.find((c) => c.code === newCoupon.code);
+ if (existingCoupon) {
+ addNotification('이미 존재하는 쿠폰 코드입니다.', 'error');
+ return;
+ }
+ setCoupons((prev) => [...prev, newCoupon]);
+ addNotification('쿠폰이 추가되었습니다.', 'success');
+ },
+ [coupons, addNotification]
+ );
+
+ // 쿠폰 삭제
+ const deleteCoupon = useCallback(
+ (couponCode: string) => {
+ setCoupons((prev) => prev.filter((c) => c.code !== couponCode));
+ if (selectedCoupon?.code === couponCode) {
+ setSelectedCoupon(null);
+ }
+ addNotification('쿠폰이 삭제되었습니다.', 'success');
+ },
+ [selectedCoupon, addNotification]
+ );
+ // ============================================================================
+ // 폼 제출 핸들러들 - 관리자 페이지 폼 처리
+ // ============================================================================
+
+ // 상품 폼 제출
const handleProductSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (editingProduct && editingProduct !== 'new') {
@@ -373,14 +502,21 @@ const App = () => {
} else {
addProduct({
...productForm,
- discounts: productForm.discounts
+ discounts: productForm.discounts,
});
}
- setProductForm({ name: '', price: 0, stock: 0, description: '', discounts: [] });
+ setProductForm({
+ name: '',
+ price: 0,
+ stock: 0,
+ description: '',
+ discounts: [],
+ });
setEditingProduct(null);
setShowProductForm(false);
};
+ // 쿠폰 폼 제출
const handleCouponSubmit = (e: React.FormEvent) => {
e.preventDefault();
addCoupon(couponForm);
@@ -388,11 +524,12 @@ const App = () => {
name: '',
code: '',
discountType: 'amount',
- discountValue: 0
+ discountValue: 0,
});
setShowCouponForm(false);
};
+ // 상품 편집 시작
const startEditProduct = (product: ProductWithUI) => {
setEditingProduct(product.id);
setProductForm({
@@ -400,82 +537,126 @@ const App = () => {
price: product.price,
stock: product.stock,
description: product.description || '',
- discounts: product.discounts || []
+ discounts: product.discounts || [],
});
setShowProductForm(true);
};
- const totals = calculateCartTotal();
+ // ============================================================================
+ // 계산된 값들 - 렌더링에 필요한 파생 데이터
+ // ============================================================================
+
+ const totals = calculateCartTotal(); // 장바구니 총액 계산 결과
+ // 검색 필터링된 상품 목록
const filteredProducts = debouncedSearchTerm
- ? products.filter(product =>
- product.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
- (product.description && product.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase()))
+ ? products.filter(
+ (product) =>
+ product.name
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()) ||
+ (product.description &&
+ product.description
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()))
)
: products;
+ // ============================================================================
+ // 거대한 JSX 렌더링 - 모든 UI 컴포넌트가 인라인으로 작성됨
+ // ============================================================================
+
return (
-
- {notifications.map(notif => (
-
- )}
-
- {notif.message}
-
-
- ))}
-
-
-
-
-
-
-
- SHOP
- {/* 검색창 - 안티패턴: 검색 로직이 컴포넌트에 직접 포함 */} - {!isAdmin && ( -
- setSearchTerm(e.target.value)}
- placeholder="상품 검색..."
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
- />
-
- )}
-
+ {/* 알림 시스템 */}
+ setIsAdmin(!isAdmin)}
+ onSearchChange={setSearchTerm}
+ />
+ {/* 메인 컨텐츠 */}
+
{isAdmin ? (
-
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/basic/__tests__/origin.test.tsx b/src/basic/__tests__/origin.test.tsx
index 3f5c3d55..38dfbc80 100644
--- a/src/basic/__tests__/origin.test.tsx
+++ b/src/basic/__tests__/origin.test.tsx
@@ -1,5 +1,11 @@
// @ts-nocheck
-import { render, screen, fireEvent, within, waitFor } from '@testing-library/react';
+import {
+ render,
+ screen,
+ fireEvent,
+ within,
+ waitFor,
+} from '@testing-library/react';
import { vi } from 'vitest';
import App from '../App';
import '../../setupTests';
@@ -20,25 +26,30 @@ describe('쇼핑몰 앱 통합 테스트', () => {
describe('고객 쇼핑 플로우', () => {
test('상품을 검색하고 장바구니에 추가할 수 있다', async () => {
render(
-
-
- ) : (
-
-
- )}
-
+
-
- 관리자 대시보드
-상품과 쿠폰을 관리할 수 있습니다
-
-
-
-
- {activeTab === 'products' ? (
-
-
-
-
-
- 상품 목록
- -
-
-
-
-
- {showProductForm && (
- | 상품명 | -가격 | -재고 | -설명 | -작업 | -
|---|---|---|---|---|
| {product.name} | -{formatPrice(product.price, product.id)} | -- 10 ? 'bg-green-100 text-green-800' : - product.stock > 0 ? 'bg-yellow-100 text-yellow-800' : - 'bg-red-100 text-red-800' - }`}> - {product.stock}개 - - | -{product.description || '-'} | -- - - | -
-
-
- )}
-
-
- 쿠폰 관리
-
-
-
- {coupons.map(coupon => (
-
-
- {showCouponForm && (
-
-
- ))}
-
-
-
-
-
-
- {coupon.name}
-{coupon.code}
-
-
- {coupon.discountType === 'amount'
- ? `${coupon.discountValue.toLocaleString()}원 할인`
- : `${coupon.discountValue}% 할인`}
-
-
-
-
-
-
-
-
- )}
-
-
+
- {/* 상품 목록 */}
-
-
-
-
-
-
- {filteredProducts.length === 0 ? (
- 전체 상품
-
- 총 {products.length}개 상품
-
-
-
- ) : (
- "{debouncedSearchTerm}"에 대한 검색 결과가 없습니다.
-
- {filteredProducts.map(product => {
- const remainingStock = getRemainingStock(product);
-
- return (
-
- )}
-
- {/* 상품 이미지 영역 (placeholder) */}
-
- );
- })}
-
-
-
- {/* 상품 정보 */}
-
-
-
- {product.isRecommended && (
-
- BEST
-
- )}
- {product.discounts.length > 0 && (
-
- ~{Math.max(...product.discounts.map(d => d.rate)) * 100}%
-
- )}
-
-
- {product.name}
- {product.description && ( -{product.description}
- )} - - {/* 가격 정보 */} -
-
-
- {/* 재고 상태 */}
- {formatPrice(product.price, product.id)}
- {product.discounts.length > 0 && ( -- {product.discounts[0].quantity}개 이상 구매시 할인 {product.discounts[0].rate * 100}% -
- )} -
- {remainingStock <= 5 && remainingStock > 0 && (
-
-
- {/* 장바구니 버튼 */}
-
- 품절임박! {remainingStock}개 남음
- )} - {remainingStock > 5 && ( -재고 {remainingStock}개
- )} -
-
-
-
-
-
- {cart.length > 0 && (
- <>
-
-
-
-
-
-
- )}
-
- - - 장바구니 -
- {cart.length === 0 ? ( -
-
-
- ) : (
- 장바구니가 비어있습니다
-
- {cart.map(item => {
- const itemTotal = calculateItemTotal(item);
- const originalPrice = item.product.price * item.quantity;
- const hasDiscount = itemTotal < originalPrice;
- const discountRate = hasDiscount ? Math.round((1 - itemTotal / originalPrice) * 100) : 0;
-
- return (
-
- )}
-
-
- );
- })}
-
-
- {item.product.name}
- -
-
-
-
- {item.quantity}
-
-
-
- {hasDiscount && (
- -{discountRate}%
- )}
-
- - {Math.round(itemTotal).toLocaleString()}원 -
-
-
- {coupons.length > 0 && (
-
- )}
- 쿠폰 할인
- -결제 정보
-
-
-
-
-
-
- 상품 금액
- {totals.totalBeforeDiscount.toLocaleString()}원
-
- {totals.totalBeforeDiscount - totals.totalAfterDiscount > 0 && (
-
- 할인 금액
- -{(totals.totalBeforeDiscount - totals.totalAfterDiscount).toLocaleString()}원
-
- )}
-
- 결제 예정 금액
- {totals.totalAfterDiscount.toLocaleString()}원
-
-
-
- * 실제 결제는 이루어지지 않습니다
-+ + 장바구니 +
+ + {cart.length === 0 ? ( +
+
+
+ ) : (
+ 장바구니가 비어있습니다
+
+ {cart.map((item) => {
+ const itemTotal = calculateItemTotal(item, cart);
+ const originalPrice = item.product.price * item.quantity;
+ const hasDiscount = itemTotal < originalPrice;
+ const discountRate = hasDiscount
+ ? Math.round((1 - itemTotal / originalPrice) * 100)
+ : 0;
+
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ + {item.product.name} +
+ +
+
+
+
+
+ {item.quantity}
+
+
+
+
+ {hasDiscount && (
+
+ -{discountRate}%
+
+ )}
+
+ + {Math.round(itemTotal).toLocaleString()}원 +
+
+
+
+ );
+}
diff --git a/src/basic/features/coupon/admin/ui/CouponManagement.tsx b/src/basic/features/coupon/admin/ui/CouponManagement.tsx
new file mode 100644
index 00000000..de831b52
--- /dev/null
+++ b/src/basic/features/coupon/admin/ui/CouponManagement.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { Coupon } from '../../../../../types';
+import { useCoupons } from '../../../../entities/coupon/hooks';
+import CouponTable from './CouponTable';
+import CouponForm from './CouponForm';
+
+interface CouponManagementProps {
+ coupons: Coupon[];
+ setCoupons: React.Dispatch
+
+
+ 쿠폰 관리
+
+
+
+ {coupons.map((coupon) => (
+
+ );
+}
diff --git a/src/basic/features/coupon/admin/ui/index.ts b/src/basic/features/coupon/admin/ui/index.ts
new file mode 100644
index 00000000..d8dc0a82
--- /dev/null
+++ b/src/basic/features/coupon/admin/ui/index.ts
@@ -0,0 +1,3 @@
+export { CouponManagement } from './CouponManagement';
+export { default as CouponForm } from './CouponForm';
+export { default as CouponTable } from './CouponTable';
diff --git a/src/basic/features/coupon/shop/ui/CouponSelector.tsx b/src/basic/features/coupon/shop/ui/CouponSelector.tsx
new file mode 100644
index 00000000..c5f8a111
--- /dev/null
+++ b/src/basic/features/coupon/shop/ui/CouponSelector.tsx
@@ -0,0 +1,67 @@
+import { Coupon } from '../../../../../types';
+import { Button } from '../../../../shared/ui';
+import { useCoupons } from '../../../../entities/coupon/hooks';
+
+interface CouponSelectorProps {
+ coupons: Coupon[];
+ selectedCoupon: Coupon | null;
+ setSelectedCoupon: React.Dispatch
+
+ ))}
+
+
+
+
+
+
+ {coupon.name}
++ {coupon.code} +
+
+
+ {coupon.discountType === 'amount'
+ ? `${coupon.discountValue.toLocaleString()}원 할인`
+ : `${coupon.discountValue}% 할인`}
+
+
+
+
+
+
+
+ {coupons.length > 0 && (
+
+ )}
+ 쿠폰 할인
+ +결제 정보
+
+
+
+
+
+
+ 상품 금액
+
+ {totals.totalBeforeDiscount.toLocaleString()}원
+
+
+ {totals.totalBeforeDiscount - totals.totalAfterDiscount > 0 && (
+
+ 할인 금액
+
+ -
+ {(
+ totals.totalBeforeDiscount - totals.totalAfterDiscount
+ ).toLocaleString()}
+ 원
+
+
+ )}
+
+ 결제 예정 금액
+
+ {totals.totalAfterDiscount.toLocaleString()}원
+
+
+
+
+ * 실제 결제는 이루어지지 않습니다
+
+
+
+ );
+}
diff --git a/src/basic/features/product/admin/ui/ProductManagement.tsx b/src/basic/features/product/admin/ui/ProductManagement.tsx
new file mode 100644
index 00000000..94a08563
--- /dev/null
+++ b/src/basic/features/product/admin/ui/ProductManagement.tsx
@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { ProductWithUI } from '../../../../entities/product';
+import { useProducts } from '../hooks';
+import { Button } from '../../../../shared/ui';
+import ProductTable from './ProductTable';
+import ProductForm from './ProductForm';
+
+interface ProductManagementProps {
+ products: ProductWithUI[];
+ setProducts: React.Dispatch
+
+
+
+
+ 상품 목록
+ +
+
+
+
+
+ );
+}
diff --git a/src/basic/features/product/admin/ui/index.ts b/src/basic/features/product/admin/ui/index.ts
new file mode 100644
index 00000000..83093283
--- /dev/null
+++ b/src/basic/features/product/admin/ui/index.ts
@@ -0,0 +1,3 @@
+export { default as ProductManagement } from './ProductManagement';
+export { default as ProductTable } from './ProductTable';
+export { default as ProductForm } from './ProductForm';
diff --git a/src/basic/features/product/shop/hooks/index.ts b/src/basic/features/product/shop/hooks/index.ts
new file mode 100644
index 00000000..57636cb8
--- /dev/null
+++ b/src/basic/features/product/shop/hooks/index.ts
@@ -0,0 +1 @@
+export { useProductSearch } from './useProductSearch';
diff --git a/src/basic/features/product/shop/hooks/useProductSearch.tsx b/src/basic/features/product/shop/hooks/useProductSearch.tsx
new file mode 100644
index 00000000..b934b635
--- /dev/null
+++ b/src/basic/features/product/shop/hooks/useProductSearch.tsx
@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { ProductWithUI } from '../../../../entities/product';
+import { useDebounce } from '../../../../shared/hooks';
+
+export function useProductSearch(
+ products: ProductWithUI[],
+ searchTerm: string
+) {
+ const debouncedSearchTerm = useDebounce(searchTerm, 500);
+
+ const filteredProducts = useMemo(() => {
+ if (!debouncedSearchTerm) {
+ return products;
+ }
+
+ return products.filter(
+ (product) =>
+ product.name
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()) ||
+ (product.description &&
+ product.description
+ .toLowerCase()
+ .includes(debouncedSearchTerm.toLowerCase()))
+ );
+ }, [products, debouncedSearchTerm]);
+
+ return {
+ debouncedSearchTerm,
+ filteredProducts,
+ };
+}
diff --git a/src/basic/features/product/shop/ui/ProductCard.tsx b/src/basic/features/product/shop/ui/ProductCard.tsx
new file mode 100644
index 00000000..281167c8
--- /dev/null
+++ b/src/basic/features/product/shop/ui/ProductCard.tsx
@@ -0,0 +1,116 @@
+import { CartItem } from '../../../../../types';
+import { ProductWithUI } from '../../../../entities/product';
+import { Button } from '../../../../shared/ui';
+import { formatPrice, getRemainingStock, getProductStockStatus } from '../../../../shared/utils';
+
+interface ProductCardProps {
+ product: ProductWithUI;
+ cart: CartItem[];
+ onAddToCart: (product: ProductWithUI) => void;
+}
+
+export default function ProductCard({
+ product,
+ cart,
+ onAddToCart,
+}: ProductCardProps) {
+ // 장바구니에서 현재 상품 수량 찾기
+ const cartQuantity = cart.find(item => item.product.id === product.id)?.quantity || 0;
+
+ // 남은 재고 계산
+ const remainingStock = getRemainingStock({
+ stock: product.stock,
+ cartQuantity
+ });
+
+ // 품절 상태 체크
+ const stockStatus = getProductStockStatus({
+ stock: product.stock,
+ cartQuantity
+ });
+
+ // 가격 표시 함수
+ const displayPrice = () => {
+ if (stockStatus) return stockStatus;
+ const formatted = formatPrice(product.price);
+ return `₩${formatted}`;
+ };
+ return (
+ | + 상품명 + | ++ 가격 + | ++ 재고 + | ++ 설명 + | ++ 작업 + | +
|---|---|---|---|---|
| + {product.name} + | ++ {displayAdminPrice(product.price)} + | ++ 10 + ? 'bg-green-100 text-green-800' + : product.stock > 0 + ? 'bg-yellow-100 text-yellow-800' + : 'bg-red-100 text-red-800' + }`} + > + {product.stock}개 + + | ++ {product.description || '-'} + | ++ + + | +
+ {/* 상품 이미지 영역 (placeholder) */}
+
+ );
+}
diff --git a/src/basic/features/product/shop/ui/ProductList.tsx b/src/basic/features/product/shop/ui/ProductList.tsx
new file mode 100644
index 00000000..0764678a
--- /dev/null
+++ b/src/basic/features/product/shop/ui/ProductList.tsx
@@ -0,0 +1,42 @@
+import { CartItem } from '../../../../../types';
+import { ProductWithUI } from '../../../../entities/product';
+import ProductCard from './ProductCard';
+
+interface ProductListProps {
+ products: ProductWithUI[];
+ searchTerm: string;
+ cart: CartItem[];
+ onAddToCart: (product: ProductWithUI) => void;
+}
+
+export default function ProductList({
+ products,
+ searchTerm,
+ cart,
+ onAddToCart,
+}: ProductListProps) {
+ if (products.length === 0) {
+ return (
+
+
+
+ {/* 상품 정보 */}
+
+
+
+ {product.isRecommended && (
+
+ BEST
+
+ )}
+ {product.discounts.length > 0 && (
+
+ ~{Math.max(...product.discounts.map((d) => d.rate)) * 100}%
+
+ )}
+
+
+ {product.name}
+ {product.description && ( ++ {product.description} +
+ )} + + {/* 가격 정보 */} +
+
+
+ {/* 재고 상태 */}
+ + {displayPrice()} +
+ {product.discounts.length > 0 && ( ++ {product.discounts[0].quantity}개 이상 구매시 할인{' '} + {product.discounts[0].rate * 100}% +
+ )} +
+ {remainingStock <= 5 && remainingStock > 0 && (
+
+
+ {/* 장바구니 버튼 */}
+
+ + 품절임박! {remainingStock}개 남음 +
+ )} + {remainingStock > 5 && ( +재고 {remainingStock}개
+ )} +
+
+ );
+ }
+
+ return (
+ + "{searchTerm}"에 대한 검색 결과가 없습니다. +
+
+ {products.map((product) => {
+ return (
+
+ );
+}
diff --git a/src/basic/features/product/shop/ui/index.ts b/src/basic/features/product/shop/ui/index.ts
new file mode 100644
index 00000000..ff14cf93
--- /dev/null
+++ b/src/basic/features/product/shop/ui/index.ts
@@ -0,0 +1,2 @@
+export { default as ProductList } from './ProductList';
+export { default as ProductCard } from './ProductCard';
diff --git a/src/basic/pages/AdminPage.tsx b/src/basic/pages/AdminPage.tsx
new file mode 100644
index 00000000..b16a7814
--- /dev/null
+++ b/src/basic/pages/AdminPage.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { Coupon } from '../../types';
+import { ProductWithUI } from '../entities/product';
+import { ProductManagement } from '../features/product/admin/ui';
+import { CouponManagement } from '../features/coupon/admin/ui';
+
+interface AdminPageProps {
+ products: ProductWithUI[];
+ setProducts: React.Dispatch
+ {/* 관리자 대시보드 헤더 */}
+
+ );
+}
diff --git a/src/basic/pages/ShoppingPage.tsx b/src/basic/pages/ShoppingPage.tsx
new file mode 100644
index 00000000..c19bce6a
--- /dev/null
+++ b/src/basic/pages/ShoppingPage.tsx
@@ -0,0 +1,82 @@
+import { CartItem, Coupon } from '../../types';
+import { ProductWithUI } from '../entities/product';
+import { ProductList } from '../features/product/shop/ui';
+import { useCart } from '../features/cart/hooks';
+import { useProductSearch } from '../features/product/shop/hooks';
+import { ShoppingSidebar } from '../widgets/ShoppingSidebar/ui';
+
+interface ShoppingPageProps {
+ products: ProductWithUI[];
+ searchTerm: string;
+ cart: CartItem[];
+ setCart: React.Dispatch
+
+
+ {/* 탭 네비게이션 */}
+ 관리자 대시보드
+상품과 쿠폰을 관리할 수 있습니다
+
+
+
+
+ {/* 탭 컨텐츠 */}
+ {activeTab === 'products' ? (
+
+
+ );
+}
diff --git a/src/basic/pages/index.ts b/src/basic/pages/index.ts
new file mode 100644
index 00000000..1cc41ff8
--- /dev/null
+++ b/src/basic/pages/index.ts
@@ -0,0 +1,2 @@
+export { default as ShoppingPage } from './ShoppingPage';
+export { default as AdminPage } from './AdminPage';
diff --git a/src/basic/shared/hooks/index.ts b/src/basic/shared/hooks/index.ts
new file mode 100644
index 00000000..403a7e87
--- /dev/null
+++ b/src/basic/shared/hooks/index.ts
@@ -0,0 +1,9 @@
+// localStorage 훅
+export { useLocalStorage } from './useLocalStorage';
+
+// 알림 시스템 훅
+export { useNotification } from './useNotification';
+export type { Notification, UseNotificationReturn } from './useNotification';
+
+// 디바운스 훅
+export { useDebounce } from './useDebounce';
diff --git a/src/basic/shared/hooks/useDebounce.ts b/src/basic/shared/hooks/useDebounce.ts
new file mode 100644
index 00000000..cf979960
--- /dev/null
+++ b/src/basic/shared/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * 값의 변경을 지연시키는 디바운스 훅
+ * @param value 디바운스할 값
+ * @param delay 지연 시간 (밀리초)
+ * @returns 디바운스된 값
+ */
+export function useDebounce
+ {/* 상품 목록 섹션 */}
+
+
+
+
+ {/* ShoppingSidebar (widgets) */}
+
+
+
+ 전체 상품
+
+ 총 {products.length}개 상품
+
+
+
+
+
+
+
+
+
+
+ SHOP
+ {/* 검색창 */} + {!isAdmin && ( +
+ {notifications.map((notif) => (
+
+ );
+}
diff --git a/src/basic/shared/ui/SearchInput.tsx b/src/basic/shared/ui/SearchInput.tsx
new file mode 100644
index 00000000..9e9ee832
--- /dev/null
+++ b/src/basic/shared/ui/SearchInput.tsx
@@ -0,0 +1,40 @@
+interface SearchInputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export default function SearchInput({
+ value,
+ onChange,
+ placeholder = '상품 검색...',
+ className,
+}: SearchInputProps) {
+ return (
+
+ {notif.message}
+
+
+ ))}
+
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500'
+ />
+
+ );
+}
diff --git a/src/basic/shared/ui/index.ts b/src/basic/shared/ui/index.ts
new file mode 100644
index 00000000..20260123
--- /dev/null
+++ b/src/basic/shared/ui/index.ts
@@ -0,0 +1,11 @@
+// 알림 관련
+export { default as NotificationToast } from './NotificationToast';
+
+// 입력 관련
+export { default as SearchInput } from './SearchInput';
+
+// 버튼 관련
+export { default as Button } from './Button';
+
+// 레이아웃 관련
+export { default as Header } from './Header';
diff --git a/src/basic/shared/utils/index.ts b/src/basic/shared/utils/index.ts
new file mode 100644
index 00000000..1adf3e41
--- /dev/null
+++ b/src/basic/shared/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './priceUtils';
+export * from './stockUtils';
\ No newline at end of file
diff --git a/src/basic/shared/utils/priceUtils.ts b/src/basic/shared/utils/priceUtils.ts
new file mode 100644
index 00000000..9011aea8
--- /dev/null
+++ b/src/basic/shared/utils/priceUtils.ts
@@ -0,0 +1,8 @@
+/**
+ * 숫자를 천 단위 구분자가 있는 문자열로 포맷팅
+ * @param price 포맷팅할 가격
+ * @returns 천 단위 구분자가 포함된 문자열 (예: "10,000")
+ */
+export const formatPrice = (price: number): string => {
+ return price.toLocaleString();
+};
\ No newline at end of file
diff --git a/src/basic/shared/utils/stockUtils.ts b/src/basic/shared/utils/stockUtils.ts
new file mode 100644
index 00000000..b20d84f2
--- /dev/null
+++ b/src/basic/shared/utils/stockUtils.ts
@@ -0,0 +1,31 @@
+/**
+ * 전체 재고에서 장바구니 수량을 뺀 남은 재고 계산
+ * @param stock 전체 재고 수량
+ * @param cartQuantity 장바구니에 담긴 수량
+ * @returns 남은 재고 수량
+ */
+export const getRemainingStock = ({
+ stock,
+ cartQuantity,
+}: {
+ stock: number;
+ cartQuantity: number;
+}) => {
+ return stock - cartQuantity;
+};
+
+/**
+ * 재고 상태를 확인해서 품절 여부를 문자열로 반환
+ * @param stock 전체 재고 수량
+ * @param cartQuantity 장바구니에 담긴 수량
+ * @returns 품절이면 "SOLD OUT", 아니면 빈 문자열
+ */
+export const getProductStockStatus = ({
+ stock,
+ cartQuantity,
+}: {
+ stock: number;
+ cartQuantity: number;
+}) => {
+ return getRemainingStock({ stock, cartQuantity }) <= 0 ? 'SOLD OUT' : '';
+};
\ No newline at end of file
diff --git a/src/basic/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx b/src/basic/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx
new file mode 100644
index 00000000..7443861d
--- /dev/null
+++ b/src/basic/widgets/ShoppingSidebar/ui/ShoppingSidebar.tsx
@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import { CartItem, Coupon } from '../../../../types';
+import { ProductWithUI } from '../../../entities/product';
+import { useCart } from '../../../features/cart/hooks';
+import { calculateCartTotal } from '../../../entities/cart';
+import { CartItemsList } from '../../../features/cart/ui';
+import { CouponSelector } from '../../../features/coupon/shop/ui';
+import { OrderSummary } from '../../../features/order/ui';
+
+interface ShoppingSidebarProps {
+ cart: CartItem[];
+ setCart: React.Dispatch
+
+
+
+ {/* 장바구니 아이템 섹션 */}
+
+ );
+}
diff --git a/src/basic/widgets/ShoppingSidebar/ui/index.ts b/src/basic/widgets/ShoppingSidebar/ui/index.ts
new file mode 100644
index 00000000..4f959865
--- /dev/null
+++ b/src/basic/widgets/ShoppingSidebar/ui/index.ts
@@ -0,0 +1 @@
+export { ShoppingSidebar } from './ShoppingSidebar';
diff --git a/src/origin/App.tsx b/src/origin/App.tsx
index a4369fe1..73760c6b 100644
--- a/src/origin/App.tsx
+++ b/src/origin/App.tsx
@@ -1,6 +1,9 @@
import { useState, useCallback, useEffect } from 'react';
import { CartItem, Coupon, Product } from '../types';
+// ============================================================================
+// 타입 정의 - UI 확장을 위한 Product 타입 확장
+// ============================================================================
interface ProductWithUI extends Product {
description?: string;
isRecommended?: boolean;
@@ -12,7 +15,9 @@ interface Notification {
type: 'error' | 'success' | 'warning';
}
-// 초기 데이터
+// ============================================================================
+// 초기 데이터 - 하드코딩된 상품 및 쿠폰 데이터
+// ============================================================================
const initialProducts: ProductWithUI[] = [
{
id: 'p1',
@@ -21,20 +26,18 @@ const initialProducts: ProductWithUI[] = [
stock: 20,
discounts: [
{ quantity: 10, rate: 0.1 },
- { quantity: 20, rate: 0.2 }
+ { quantity: 20, rate: 0.2 },
],
- description: '최고급 품질의 프리미엄 상품입니다.'
+ description: '최고급 품질의 프리미엄 상품입니다.',
},
{
id: 'p2',
name: '상품2',
price: 20000,
stock: 20,
- discounts: [
- { quantity: 10, rate: 0.15 }
- ],
+ discounts: [{ quantity: 10, rate: 0.15 }],
description: '다양한 기능을 갖춘 실용적인 상품입니다.',
- isRecommended: true
+ isRecommended: true,
},
{
id: 'p3',
@@ -43,10 +46,10 @@ const initialProducts: ProductWithUI[] = [
stock: 20,
discounts: [
{ quantity: 10, rate: 0.2 },
- { quantity: 30, rate: 0.25 }
+ { quantity: 30, rate: 0.25 },
],
- description: '대용량과 고성능을 자랑하는 상품입니다.'
- }
+ description: '대용량과 고성능을 자랑하는 상품입니다.',
+ },
];
const initialCoupons: Coupon[] = [
@@ -54,18 +57,22 @@ const initialCoupons: Coupon[] = [
name: '5000원 할인',
code: 'AMOUNT5000',
discountType: 'amount',
- discountValue: 5000
+ discountValue: 5000,
},
{
name: '10% 할인',
code: 'PERCENT10',
discountType: 'percentage',
- discountValue: 10
- }
+ discountValue: 10,
+ },
];
const App = () => {
+ // ============================================================================
+ // 상태 관리 - localStorage와 연동된 데이터 상태들
+ // ============================================================================
+ // 상품 목록 상태 (localStorage에서 복원)
const [products, setProducts] = useState
+
+ {/* 알림 시스템 - 우상단 고정 위치 */}
{notifications.length > 0 && (
-
- {notifications.map(notif => (
+
-
+ {notifications.map((notif) => (
)}
-
- {notif.message}
-
))}
-
-
-
+
SHOP
+ + {/* 헤더 - 검색바, 관리자 모드 토글, 장바구니 아이콘 */} +
+
+
+
SHOP
{/* 검색창 - 안티패턴: 검색 로직이 컴포넌트에 직접 포함 */} {!isAdmin && ( -
+
-
setSearchTerm(e.target.value)}
- placeholder="상품 검색..."
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+ placeholder='상품 검색...'
+ className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500'
/>
)}