[6팀 조영민] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

src/basic/components/Header.tsx

@@ -0,0 +1,73 @@
+interface Props {
+  isAdmin: boolean;
+  onToggleAdmin: () => void;
+  searchTerm: string;
+  onSearchTerms: (value: string) => void;
+  cartCount: number;
+}
+
+const Header = ({
+  isAdmin,
+  searchTerm,
+  cartCount,
+  onSearchTerms,
+  onToggleAdmin,
+}: Props) => {
+  return (
+    <header className="bg-white shadow-sm sticky top-0 z-40 border-b">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center flex-1">
+            <h1 className="text-xl font-semibold text-gray-800">SHOP</h1>
+            {/* 검색창 - 안티패턴: 검색 로직이 컴포넌트에 직접 포함 */}
+            {!isAdmin && (
+              <div className="ml-8 flex-1 max-w-md">
+                <input
+                  type="text"
+                  value={searchTerm}
+                  onChange={(e) => onSearchTerms(e.target.value)}
+                  placeholder="상품 검색..."
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+            )}
+          </div>
+          <nav className="flex items-center space-x-4">
+            <button
+              onClick={onToggleAdmin}
+              className={`px-3 py-1.5 text-sm rounded transition-colors ${
+                isAdmin
+                  ? "bg-gray-800 text-white"
+                  : "text-gray-600 hover:text-gray-900"
+              }`}>
+              {isAdmin ? "쇼핑몰로 돌아가기" : "관리자 페이지로"}
+            </button>
+            {!isAdmin && (
+              <div className="relative">
+                <svg
+                  className="w-6 h-6 text-gray-700"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+                  />
+                </svg>
+                {cartCount > 0 && (
+                  <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                    {cartCount}
+                  </span>
+                )}
+              </div>
+            )}
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/basic/components/NotificationContainer.tsx

@@ -0,0 +1,45 @@
+import { Notification, getNotificationClassName } from "../utils/notification";
+
+interface NotificationContainerProps {
+  notifications: Notification[];
+  onRemove: (id: string) => void;
+}
+
+export const NotificationContainer = ({
+  notifications,
+  onRemove,
+}: NotificationContainerProps) => {
+  if (notifications.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-20 right-4 z-50 space-y-2 max-w-sm">
+      {notifications.map((notif) => (
+        <div
+          key={notif.id}
+          className={`p-4 rounded-md shadow-md text-white flex justify-between items-center ${getNotificationClassName(
+            notif.type
+          )}`}>
+          <span className="mr-2">{notif.message}</span>
+          <button
+            onClick={() => onRemove(notif.id)}
+            className="text-white hover:text-gray-200">
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

src/basic/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./useLocalStorage";
+export * from "./useDebounce";
+export * from "./useNotifications";

src/basic/hooks/useDebounce.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+/**
+ * 입력 값(value)의 변경이 일정 시간(delay) 동안 일어나지 않을 때만 해당 값을 반환하는 디바운스(debounce) 훅입니다.
+ * 주로 검색어 입력 등 빠르게 변하는 값을 일정 시간 이후에 처리할 때 사용합니다.
+ *
+ * @template T - 디바운스할 값의 타입
+ * @param value - 디바운스를 적용할 값
+ * @param delay - 디바운스 대기 시간(ms)
+ * @returns 디바운스 처리된 값
+ *
+ * @example
+ * const debouncedSearch = useDebounce(searchKeyword, 300);
+ * useEffect(() => {
+ *   fetchData(debouncedSearch);
+ * }, [debouncedSearch]);
+ */
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};

src/basic/hooks/useLocalStorage.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { getStorageItem, setStorageItem } from "../utils/storage";
+
+/**
+ * React 상태(state)와 localStorage를 동기화하는 커스텀 훅입니다.
+ * 초기 상태는 localStorage의 값을 우선으로 하며, 이후 상태가 변경될 때마다 저장됩니다.
+ *
+ * @param key - localStorage 키
+ * @param initialValue - 초기값 (localStorage에 값이 없거나 오류 발생 시 사용됨)
+ * @returns [value, setValue] 튜플 형태의 상태와 상태 변경 함수
+ *
+ * @example
+ * const [theme, setTheme] = useLocalStorage('theme', 'light');
+ * setTheme('dark'); // localStorage에도 자동 반영됨
+ */
+export const useLocalStorage = <T>(
+  key: string,
+  initialValue: T
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(() =>
+    getStorageItem(key, initialValue)
+  );
+
+  useEffect(() => setStorageItem(key, value), [key, value]);
+
+  return [value, setValue];
+};

src/basic/hooks/useNotifications.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import {
+  Notification,
+  createNotification,
+  addNotification as addNotificationUtil,
+  removeNotification,
+} from "../utils/notification";
+
+export const useNotifications = () => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const addNotification = useCallback(
+    (message: string, type: "error" | "success" | "warning" = "success") => {
+      const notification = createNotification(message, type);
+      setNotifications((prev) => addNotificationUtil(prev, notification));
+
+      setTimeout(() => {
+        setNotifications((prev) => removeNotification(prev, notification.id));
+      }, 3000);
+    },
+    []
+  );
+
+  const removeNotificationById = useCallback((notificationId: string) => {
+    setNotifications((prev) => removeNotification(prev, notificationId));
+  }, []);
+
+  return {
+    notifications,
+    addNotification,
+    removeNotificationById,
+  };
+};

src/basic/models/cart.ts

@@ -0,0 +1,166 @@
+import { Product, CartItem, Coupon } from "../../types";
+import { applyCouponToAmount } from "./discount";
+
+type AddToCartResult =
+  | { success: true; cart: CartItem[] }
+  | { success: false; cart: CartItem[]; reason: string };
+
+// 요구사항
+// - 장바구니
+//     - 장바구니 내 상품 수량 조절 가능
+//     - 각 상품의 이름, 가격, 수량과 적용된 할인율을 표시
+//         - 적용된 할인율 표시 (예: "10% 할인 적용")
+//     - 장바구니 내 모든 상품의 총액을 계산해야
+
+// 1. 장바구니에 추가
+// 2. 장바구니에서 제거
+// 3. 장바구니에 담긴 상품 개수 증가
+// 4. 장바구니에 담긴 상품 개수 감소
+// 5. 장바구니 내 모든 상품의 할인율이 적용된 총액 계산
+
+/**
+ * 특정 상품을 장바구니에 담고 남은 재고 개수를 반환하는 함수
+ */
+export const getRemainingStock = (
+  cart: CartItem[],
+  product: Product
+): number => {
+  const cartItem = cart.find((item) => item.product.id === product.id);
+  const remaining = product.stock - (cartItem?.quantity || 0);
+
+  return remaining;
+};
+
+/**
+ * 장바구니에 상품을 추가하는 함수
+ * 1. 재고가 없는 경우 실패
+ * 2. 재고가 부족한 경우 실패
+ */
+export const addToCart = (
+  cart: CartItem[],
+  product: Product
+): AddToCartResult => {
+  const remainingStock = getRemainingStock(cart, product);
+
+  if (remainingStock <= 0) {
+    return {
+      success: false,
+      cart,
+      reason: `재고가 부족합니다!`,
+    };
+  }
+
+  const existingItem = cart.find((item) => item.product.id === product.id);
+
+  if (!existingItem) {
+    return {
+      success: true,
+      cart: [...cart, { product, quantity: 1 }],
+    };
+  }
+
+  const newQuantity = existingItem.quantity + 1;
+
+  if (newQuantity <= product.stock) {
+    return {
+      success: true,
+      cart: cart.map((item) =>
+        item.product.id === product.id
+          ? { ...item, quantity: newQuantity }
+          : item
+      ),
+    };
+  }
+
+  return {
+    success: false,
+    cart,
+    reason: `재고는 ${product.stock}개까지만 있습니다.`,
+  };
+};
+
+/**
+ * 장바구니에서 상품을 제거하는 함수
+ */
+export const removeFromCart = (cart: CartItem[], productId: string) => {
+  return cart.filter((item) => item.product.id !== productId);
+};
+
+/**
+ * 장바구니 상품 개수를 업데이트하는 함수
+ * 업데이트 수량이 재고보다 많은 경우 실패
+ */
+export const updateQuantity = (
+  cart: CartItem[],
+  product: Product,
+  newQuantity: number
+): AddToCartResult => {
+  if (newQuantity <= 0) {
+    return {
+      success: true,
+      cart: removeFromCart(cart, product.id),
+    };
+  }
+
+  if (newQuantity > product.stock) {
+    return {
+      success: false,
+      cart: removeFromCart(cart, product.id),
+      reason: `재고는 ${product.stock}개까지만 있습니다.`,
+    };
+  }
+
+  return {
+    success: true,
+    cart: cart.map((item) =>
+      item.product.id === product.id ? { ...item, quantity: newQuantity } : item
+    ),
+  };
+};
+
+/**
+ * 장바구니 상품 금액 총합을 계산하는 함수
+ */
+export const calculateCartTotal = (cart: CartItem[], coupon: Coupon | null) => {
+  let totalBeforeDiscount = 0;
+  let totalAfterDiscount = 0;
+
+  cart.forEach((item) => {
+    const itemPrice = item.product.price * item.quantity;
+    totalBeforeDiscount += itemPrice;
+    totalAfterDiscount += calculateItemTotal(item);
+  });
+
+  // 쿠폰 할인 적용
+  totalAfterDiscount = applyCouponToAmount(totalAfterDiscount, coupon);
+
+  return {
+    totalBeforeDiscount: Math.round(totalBeforeDiscount),
+    totalAfterDiscount: Math.round(totalAfterDiscount),
+  };
+};
+
+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
+      : maxDiscount;
+  }, 0);
+
+  if (item.quantity >= 10) {
+    return Math.min(baseDiscount + 0.05, 0.5); // 대량 구매 시 추가 5% 할인
+  }
+
+  return baseDiscount;
+};
+
+export const calculateItemTotal = (item: CartItem): number => {
+  const { price } = item.product;
+  const { quantity } = item;
+  const discount = getMaxApplicableDiscount(item);
+
+  return Math.round(price * quantity * (1 - discount));
+};