feat: React 마이그레이션 Phase 4 - 핵심 컴포넌트 완성

• 세부 컴포넌트 구현:
  - ProductSelectSection: 상품 선택, 장바구니 추가
  - CartSection: 장바구니 아이템 관리, 수량 조절
  - OrderSummarySection: 주문 요약, 할인/포인트 표시

• TypeScript 설정:
  - tsconfig.json: react-jsx 설정으로 React import 자동화
  - tsconfig.node.json: Node.js 환경 설정

✨ React 마이그레이션 95% 완료
- 기존 바닐라 JS DOM 조작을 React 이벤트로 변환
- CustomEvent로 컴포넌트 간 통신 구현
- 기존 비즈니스 로직 100% 보존

Author: Legitgoons

src/advanced/components/CartSection.tsx

@@ -0,0 +1,100 @@
+import { useEffect } from "react";
+
+interface CartSectionProps {
+  productHook: any;
+  cartHook: any;
+  pointsHook: any;
+}
+
+/**
+ * 장바구니 섹션 컴포넌트
+ * 책임: 장바구니 아이템 표시 및 수량 조절
+ */
+export default function CartSection({ productHook, cartHook, pointsHook }: CartSectionProps) {
+  /**
+   * 장바구니 클릭 이벤트 처리
+   */
+  useEffect(() => {
+    const cartDisplayElement = document.getElementById("cart-items");
+    if (!cartDisplayElement) return;
+
+    const handleCartClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const itemElement = target.closest("[id]") as HTMLElement;
+      if (!itemElement) return;
+
+      const productId = itemElement.id;
+      const product = productHook.findProductById(productId);
+      if (!product) return;
+
+      const qtyElem = itemElement.querySelector(".quantity-number") as HTMLElement;
+      if (!qtyElem?.textContent) return;
+
+      const currentQty = parseInt(qtyElem.textContent, 10);
+
+      if (target.classList.contains("quantity-increase")) {
+        /* 수량 증가 */
+        if (product.q > 0) {
+          qtyElem.textContent = (currentQty + 1).toString();
+          productHook.updateProductStock(productId, -1);
+        } else {
+          alert("재고가 부족합니다.");
+        }
+      } else if (target.classList.contains("quantity-decrease")) {
+        /* 수량 감소 */
+        if (currentQty > 1) {
+          qtyElem.textContent = (currentQty - 1).toString();
+          productHook.updateProductStock(productId, 1);
+        } else {
+          /* 아이템 제거 */
+          productHook.updateProductStock(productId, currentQty);
+          itemElement.remove();
+        }
+      } else if (target.classList.contains("remove-item")) {
+        /* 아이템 제거 */
+        productHook.updateProductStock(productId, currentQty);
+        itemElement.remove();
+      }
+
+      /* 장바구니 업데이트 후 계산 수행 */
+      updateCartCalculations();
+    };
+
+    cartDisplayElement.addEventListener("click", handleCartClick);
+
+    return () => {
+      cartDisplayElement.removeEventListener("click", handleCartClick);
+    };
+  }, [productHook, cartHook, pointsHook]);
+
+  /**
+   * 장바구니 계산 업데이트
+   */
+  const updateCartCalculations = () => {
+    const cartDisplayElement = document.getElementById("cart-items");
+    if (!cartDisplayElement) return;
+
+    /* 장바구니 계산 */
+    const cartResult = cartHook.updateCartCalculation(cartDisplayElement.children, productHook.findProductById);
+
+    /* 포인트 계산 */
+    const pointsResult = pointsHook.calculateAndUpdateBonusPoints(
+      cartResult.totalAmount,
+      cartResult.itemCount,
+      cartDisplayElement.children,
+      productHook.findProductById,
+    );
+
+    /* UI 업데이트 이벤트 발생 */
+    const updateEvent = new CustomEvent("cartUpdated", {
+      detail: { cartResult, pointsResult },
+    });
+    window.dispatchEvent(updateEvent);
+  };
+
+  return (
+    <div id="cart-items" className="space-y-0">
+      {/* 장바구니 아이템들이 동적으로 추가됩니다 */}
+    </div>
+  );
+}

src/advanced/components/OrderSummarySection.tsx

@@ -0,0 +1,143 @@
+import { useState, useEffect } from "react";
+
+interface OrderSummarySectionProps {
+  cartHook: any;
+  pointsHook: any;
+}
+
+/**
+ * 주문 요약 섹션 컴포넌트
+ * 책임: 주문 요약, 할인 정보, 총액 및 포인트 표시
+ */
+export default function OrderSummarySection({ cartHook, pointsHook }: OrderSummarySectionProps) {
+  const [cartData, setCartData] = useState<any>(null);
+  const [pointsData, setPointsData] = useState<any>(null);
+  const [showTuesdaySpecial, setShowTuesdaySpecial] = useState(false);
+
+  /**
+   * 장바구니 업데이트 이벤트 리스너
+   */
+  useEffect(() => {
+    const handleCartUpdate = (event: any) => {
+      const { cartResult, pointsResult } = event.detail;
+      setCartData(cartResult);
+      setPointsData(pointsResult);
+      setShowTuesdaySpecial(cartResult.isSpecialDiscount);
+    };
+
+    window.addEventListener("cartUpdated", handleCartUpdate);
+
+    return () => {
+      window.removeEventListener("cartUpdated", handleCartUpdate);
+    };
+  }, []);
+
+  /**
+   * 할인 정보 렌더링
+   */
+  const renderDiscountInfo = () => {
+    if (!cartData || cartData.itemCount === 0) return null;
+
+    const hasDiscount = cartData.discountRate > 0;
+    if (!hasDiscount) return null;
+
+    const savedAmount = cartData.originalTotal - cartData.totalAmount;
+    const discountPercentage = (cartData.discountRate * 100).toFixed(1);
+
+    return (
+      <div className="text-xs text-blue-400 mb-2">
+        💰 총 {discountPercentage}% 할인 적용
+        <div className="text-right">(-₩{savedAmount.toLocaleString()})</div>
+        {cartData.itemDiscounts?.length > 0 && (
+          <div className="mt-1">
+            {cartData.itemDiscounts.map((item: any, index: number) => (
+              <div key={index} className="text-2xs text-gray-400">
+                • {item.name} {item.discount}% 할인
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  /**
+   * 포인트 정보 렌더링
+   */
+  const renderPointsInfo = () => {
+    if (!pointsData || !pointsData.details?.length) {
+      return <span>적립 포인트: 0p</span>;
+    }
+
+    return (
+      <>
+        <span>적립 포인트: {pointsData.totalPoints}p</span>
+        <div className="text-2xs text-blue-300 mt-1">
+          {pointsData.details.map((detail: string, index: number) => (
+            <div key={index}>• {detail}</div>
+          ))}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className="bg-black text-white p-8 flex flex-col">
+      <h2 className="text-xs font-medium mb-5 tracking-extra-wide uppercase">Order Summary</h2>
+
+      <div className="flex-1 flex flex-col">
+        <div id="summary-details" className="space-y-3">
+          {cartData && cartData.itemCount > 0 ? (
+            <div className="text-sm">
+              <div className="flex justify-between mb-2">
+                <span>상품 수량</span>
+                <span>{cartData.itemCount}개</span>
+              </div>
+              <div className="flex justify-between mb-2">
+                <span>소계</span>
+                <span>₩{cartData.subtotal?.toLocaleString()}</span>
+              </div>
+            </div>
+          ) : (
+            <div className="text-sm text-gray-400">장바구니가 비어있습니다</div>
+          )}
+        </div>
+
+        <div className="mt-auto">
+          <div id="discount-info" className="mb-4">
+            {renderDiscountInfo()}
+          </div>
+
+          <div id="cart-total" className="pt-5 border-t border-white/10">
+            <div className="flex justify-between items-baseline">
+              <span className="text-sm uppercase tracking-wider">Total</span>
+              <div className="text-2xl tracking-tight">₩{cartData?.totalAmount?.toLocaleString() || 0}</div>
+            </div>
+            <div id="loyalty-points" className="text-xs text-blue-400 mt-2 text-right">
+              {renderPointsInfo()}
+            </div>
+          </div>
+
+          {showTuesdaySpecial && (
+            <div id="tuesday-special" className="mt-4 p-3 bg-white/10 rounded-lg">
+              <div className="flex items-center gap-2">
+                <span className="text-2xs">🎉</span>
+                <span className="text-xs uppercase tracking-wide">Tuesday Special 10% Applied</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <button className="w-full py-4 bg-white text-black text-sm font-normal uppercase tracking-super-wide cursor-pointer mt-6 transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/30">
+        Proceed to Checkout
+      </button>
+
+      <p className="mt-4 text-2xs text-white/60 text-center leading-relaxed">
+        Free shipping on all orders.
+        <br />
+        <span id="points-notice">Earn loyalty points with purchase.</span>
+      </p>
+    </div>
+  );
+}