🎨 OrderSummary 컴포넌트 props 구조 변경

- 기존 props로 전달받던 totalBeforeDiscount, totalAfterDiscount, totalDiscount 제거 - calculateTotal 함수를 props로 받아 내부에서 필요한 데이터를 직접 계산
hanghae-plus · Jan 15, 2025 · d6c5529 · d6c5529
1 parent 699a740
commit d6c5529
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 26 deletions.
diff --git a/src/refactoring/components/OrderSummary.tsx b/src/refactoring/components/OrderSummary.tsx
@@ -1,14 +1,14 @@
 interface OrderSummaryProps {
-  totalBeforeDiscount: number;
-  totalAfterDiscount: number;
-  totalDiscount: number;
+  calculateTotal: () => {
+    totalBeforeDiscount: number;
+    totalAfterDiscount: number;
+    totalDiscount: number;
+  };
 }
 
-export const OrderSummary = ({
-  totalBeforeDiscount,
-  totalAfterDiscount,
-  totalDiscount,
-}: OrderSummaryProps) => {
+export const OrderSummary = ({ calculateTotal }: OrderSummaryProps) => {
+  const { totalBeforeDiscount, totalAfterDiscount, totalDiscount } = calculateTotal();
+
   return (
     <div className='mt-6 bg-white p-4 rounded shadow'>
       <h2 className='text-2xl font-semibold mb-2'>주문 요약</h2>

diff --git a/src/refactoring/pages/CartPage.tsx b/src/refactoring/pages/CartPage.tsx
@@ -24,8 +24,6 @@ export const CartPage = ({ productList, couponList }: Props) => {
     getAppliedDiscount,
   } = useCart();
 
-  const { totalBeforeDiscount, totalAfterDiscount, totalDiscount } = calculateTotal();
-
   return (
     <div className='container mx-auto p-4'>
       <h1 className='text-3xl font-bold mb-6'>장바구니</h1>
@@ -36,22 +34,20 @@ export const CartPage = ({ productList, couponList }: Props) => {
           getRemainingStock={getRemainingStock}
           getMaxDiscount={getMaxDiscount}
         />
-        <CartList
-          cart={cart}
-          updateQuantity={updateQuantity}
-          removeFromCart={removeFromCart}
-          getAppliedDiscount={getAppliedDiscount}
-        />
-        <CouponSelector
-          couponList={couponList}
-          selectedCoupon={selectedCoupon}
-          applyCoupon={applyCoupon}
-        />
-        <OrderSummary
-          totalBeforeDiscount={totalBeforeDiscount}
-          totalAfterDiscount={totalAfterDiscount}
-          totalDiscount={totalDiscount}
-        />
+        <div>
+          <CartList
+            cart={cart}
+            updateQuantity={updateQuantity}
+            removeFromCart={removeFromCart}
+            getAppliedDiscount={getAppliedDiscount}
+          />
+          <CouponSelector
+            couponList={couponList}
+            selectedCoupon={selectedCoupon}
+            applyCoupon={applyCoupon}
+          />
+          <OrderSummary calculateTotal={calculateTotal} />
+        </div>
       </div>
     </div>
   );