[9팀 배송이] [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,46 +1,51 @@
-import { useState } from 'react';
-import { CartPage } from './components/CartPage.tsx';
-import { AdminPage } from './components/AdminPage.tsx';
-import { Coupon, Product } from '../types.ts';
+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";
 
+import Navigation from "./components/Navigation.tsx";
+
 const initialProducts: Product[] = [
   {
-    id: 'p1',
-    name: '상품1',
+    id: "p1",
+    name: "상품1",
     price: 10000,
     stock: 20,
-    discounts: [{ quantity: 10, rate: 0.1 }, { quantity: 20, rate: 0.2 }]
+    discounts: [
+      { quantity: 10, rate: 0.1 },
+      { quantity: 20, rate: 0.2 },
+    ],
   },
   {
-    id: 'p2',
-    name: '상품2',
+    id: "p2",
+    name: "상품2",
     price: 20000,
     stock: 20,
-    discounts: [{ quantity: 10, rate: 0.15 }]
+    discounts: [{ quantity: 10, rate: 0.15 }],
   },
   {
-    id: 'p3',
-    name: '상품3',
+    id: "p3",
+    name: "상품3",
     price: 30000,
     stock: 20,
-    discounts: [{ quantity: 10, rate: 0.2 }]
-  }
+    discounts: [{ quantity: 10, rate: 0.2 }],
+  },
 ];
 
 const initialCoupons: Coupon[] = [
   {
-    name: '5000원 할인 쿠폰',
-    code: 'AMOUNT5000',
-    discountType: 'amount',
-    discountValue: 5000
+    name: "5000원 할인 쿠폰",
+    code: "AMOUNT5000",
+    discountType: "amount",
+    discountValue: 5000,
   },
   {
-    name: '10% 할인 쿠폰',
-    code: 'PERCENT10',
-    discountType: 'percentage',
-    discountValue: 10
-  }
+    name: "10% 할인 쿠폰",
+    code: "PERCENT10",
+    discountType: "percentage",
+    discountValue: 10,
+  },
 ];
 
 const App = () => {
@@ -50,17 +55,8 @@ const App = () => {
 
   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>
+      <Navigation isAdmin={isAdmin} setIsAdmin={setIsAdmin} />
+
       <main className="container mx-auto mt-6">
         {isAdmin ? (
           <AdminPage
@@ -71,7 +67,7 @@ const App = () => {
             onCouponAdd={addCoupon}
           />
         ) : (
-          <CartPage products={products} coupons={coupons}/>
+          <CartPage products={products} coupons={coupons} />
         )}
       </main>
     </div>