[12팀 배성규] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

package.json

@@ -31,6 +31,7 @@
     "eslint": "^9.12.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.12",
+    "jsdom": "^26.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.9",
     "vitest": "^2.1.3"

src/refactoring/App.tsx

@@ -1,66 +1,18 @@
-import { useState } from 'react';
-import { CartPage } from './components/CartPage.tsx';
-import { AdminPage } from './components/AdminPage.tsx';
-import { Coupon, Product } from '../types.ts';
-import { useCoupons, useProducts } from "./hooks";
-
-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 }]
-  }
-];
-
-const initialCoupons: Coupon[] = [
-  {
-    name: '5000원 할인 쿠폰',
-    code: 'AMOUNT5000',
-    discountType: 'amount',
-    discountValue: 5000
-  },
-  {
-    name: '10% 할인 쿠폰',
-    code: 'PERCENT10',
-    discountType: 'percentage',
-    discountValue: 10
-  }
-];
+import { CartPage } from "./components/CartPage.tsx";
+import { AdminPage } from "./components/AdminPage.tsx";
+import { useCoupons, useProducts, useToggle } from "./hooks";
+import { initialProducts } from "./mock/products.ts";
+import { initialCoupons } from "./mock/coupons.ts";
+import NavBar from "./components/NavBar.tsx";
 
 const App = () => {
   const { products, updateProduct, addProduct } = useProducts(initialProducts);
   const { coupons, addCoupon } = useCoupons(initialCoupons);
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [isAdmin, toggleIsAdmin] = useToggle(false);
 
   return (
     <div className="min-h-screen bg-gray-100">
-      <nav className="bg-blue-600 text-white p-4">
-        <div className="container mx-auto flex justify-between items-center">
-          <h1 className="text-2xl font-bold">쇼핑몰 관리 시스템</h1>
-          <button
-            onClick={() => setIsAdmin(!isAdmin)}
-            className="bg-white text-blue-600 px-4 py-2 rounded hover:bg-blue-100"
-          >
-            {isAdmin ? '장바구니 페이지로' : '관리자 페이지로'}
-          </button>
-        </div>
-      </nav>
+      <NavBar isAdmin={isAdmin} onToggle={toggleIsAdmin} />
       <main className="container mx-auto mt-6">
         {isAdmin ? (
           <AdminPage
@@ -71,7 +23,7 @@ const App = () => {
             onCouponAdd={addCoupon}
           />
         ) : (
-          <CartPage products={products} coupons={coupons}/>
+          <CartPage products={products} coupons={coupons} />
         )}
       </main>
     </div>