[feature/extractCouponCart] 장바구니 쿠폰 적용 알고리즘 변경

apis/defaultApi.js

@@ -6,6 +6,7 @@ const CONTENT_TYPE = 'application/json';
 
 axios.defaults.headers.common['Content-Type'] = CONTENT_TYPE;
 axios.defaults.headers.post['Content-Type'] = CONTENT_TYPE;
+axios.defaults.headers.patch['Content-Type'] = CONTENT_TYPE;
 
 export const GET = async (url, params, headers) => {
   let apiUrl = API_BASE_URL + url;

components/cart/CartContent.js

@@ -5,49 +5,62 @@ import CartContentFooter from '@components/cart/CartContentFooter';
 import CartContentHeader from '@components/cart/CartContentHeader';
 
 export default function CartContent({
-  headers,
   cartBySellerDtoList,
   checkBoxStates,
   cartCheckBoxChange,
   cartInfoChange,
 }) {
-  const CommerceCartContentContainer = styled.div``;
-
-  const CartStoreSection = styled.div`
-    background-color: ${ThemeWhite};
-    border-radius: 6px;
-    margin-bottom: 20px;
-
-    @media (max-width: 1024px) {
-      padding: 10px 10px;
+  function ShowCartStore({ item }) {
+    let contentTotalPrice = 0;
+    const cartItemDtoList = item.cartItemDtoList;
+    if (cartItemDtoList && cartItemDtoList.length > 0) {
+      cartItemDtoList.forEach((item) => {
+        contentTotalPrice =
+          (contentTotalPrice + item.product.productPrice) * item.count;
+      });
     }
-    @media (min-width: 1024px) {
-      padding: 10px 20px;
-      margin: 30px 0;
-    }
-  `;
+
+    return (
+      <CartStoreSection className="cart-store-section">
+        <CartContentHeader storeName={item.storeName} />
+        <CartContentDetail
+          storeName={item.storeName}
+          cartItemDtoList={item.cartItemDtoList}
+          checkBoxStates={checkBoxStates}
+          cartCheckBoxChange={cartCheckBoxChange}
+          cartInfoChange={cartInfoChange}
+        />
+        <CartContentFooter
+          contentTotalPrice={contentTotalPrice}
+          storeName={item.storeName}
+          sellerId={item.sellerId}
+        />
+      </CartStoreSection>
+    );
+  }
 
   return (
     <CommerceCartContentContainer className="commerce-cart-content-container">
       {cartBySellerDtoList &&
         cartBySellerDtoList.map((item) => (
-          <CartStoreSection className="cart-store-section" key={item.sellerId}>
-            <CartContentHeader storeName={item.storeName} />
-            <CartContentDetail
-              headers={headers}
-              storeName={item.storeName}
-              cartItemDtoList={item.cartItemDtoList}
-              checkBoxStates={checkBoxStates}
-              cartCheckBoxChange={cartCheckBoxChange}
-              cartInfoChange={cartInfoChange}
-            />
-            <CartContentFooter
-              couponDto={item.couponDto}
-              storeName={item.storeName}
-              cartItemDtoList={item.cartItemDtoList}
-            />
-          </CartStoreSection>
+          <ShowCartStore item={item} key={item.sellerId} />
         ))}
     </CommerceCartContentContainer>
   );
 }
+
+const CommerceCartContentContainer = styled.div``;
+
+const CartStoreSection = styled.div`
+  background-color: ${ThemeWhite};
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  @media (max-width: 1024px) {
+    padding: 10px 10px;
+  }
+  @media (min-width: 1024px) {
+    padding: 10px 20px;
+    margin: 30px 0;
+  }
+`;

components/cart/CartContentDetail.js

@@ -1,17 +1,19 @@
+import { useContext } from 'react';
 import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
 import { DELETE } from '@apis/defaultApi';
 import { ThemeGray1 } from '@utils/constants/themeColor';
 import CartProduct from '@components/cart/CartProduct';
+import { LoginHeaderContext } from '@pages/user/cart/index';
 
 export default function CartContentDetail({
-  headers,
   cartItemDtoList,
   checkBoxStates,
   cartCheckBoxChange,
   cartInfoChange,
 }) {
   const router = useRouter();
+  const headers = useContext(LoginHeaderContext);
 
   const ProductCheckSection = styled.div`
     position: relative;
@@ -51,9 +53,17 @@ export default function CartContentDetail({
 
   const CartDetailSection = styled.div`
     padding-top: 5px;
+    padding-bottom: 10px;
+
     border-top: 1px solid white;
     border-bottom: 1px solid white;
     display: flex;
+
+    @media (max-width: 1024px) {
+    }
+    @media (min-width: 1024px) {
+      height: 100px;
+    }
   `;
 
   const deleteCartItem = ({ input }) => {

components/cart/CartContentFooter.js

@@ -1,21 +1,31 @@
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { SmallLineBlue } from '@components/input/Button';
 import CartCouponModal from '@components/cart/CartCouponModal';
+import { LoginHeaderContext } from '@pages/user/cart/index';
+import { GET_DATA } from '@apis/defaultApi';
 
 export default function CartContentFooter({
-  cartItemDtoList,
+  contentTotalPrice,
   storeName,
-  couponDto,
+  sellerId,
 }) {
+  const headers = useContext(LoginHeaderContext);
   const [modalState, setModalState] = useState(false);
-  let contentTotalPrice = 0;
-  if (cartItemDtoList && cartItemDtoList.length > 0) {
-    cartItemDtoList.forEach((item) => {
-      contentTotalPrice =
-        (contentTotalPrice + item.product.productPrice) * item.count;
+  const [couponArray, setCouponArray] = useState([]);
+
+  useEffect(() => {
+    GET_DATA(
+      `/coupon`,
+      { sellerId, totalFee: contentTotalPrice },
+      headers,
+    ).then((res) => {
+      console.log(res);
+      if (res) {
+        setCouponArray(res);
+      }
     });
-  }
+  }, []);
 
   const showModal = () => {
     setModalState(true);
@@ -32,9 +42,10 @@ export default function CartContentFooter({
       {modalState && (
         <CartCouponModal
           setModalState={setModalState}
-          couponDto={couponDto}
-          contentTotalPrice={contentTotalPrice}
           storeName={storeName}
+          sellerId={sellerId}
+          couponArray={couponArray}
+          contentTotalPrice={contentTotalPrice}
         />
       )}
     </ContentFooterSection>