[CheckoutPanel]

1. SummaryContainer 약관 동의 분기처리
2. SummaryContainer
가격 정보 포함

com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx

@@ -17,7 +17,6 @@ export default function CheckOutPanel() {
   const { userInfo } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
-  const panelInfo = useSelector((state) => state.panels.panels);
 
   useEffect(() => {
     dispatch(
@@ -50,7 +49,7 @@ export default function CheckOutPanel() {
       />
       <TBody className={css.tbody}>
         <div className={css.Wrap}>
-          <SummaryContainer />
+          <SummaryContainer userInfo={userInfo} />
           <InformationContainer />
         </div>
       </TBody>

com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainer.module.less

@@ -54,24 +54,22 @@
 }
 
 .bottom {
-  padding: 69px 60px 40px 60px;
+  padding: 0 60px;
 
   .checkboxWrap {
     display: flex;
-  }
+    align-items: center;
-  .checkbox {
-    .size(@w: 40px, @h: 40px);
-    background-image: url("../../../../assets/images/btn/btn-check-nor.svg");
-    background-position: center;
-    background-size: cover;
-    margin: 0 12px 20px 0;
-  }
 
-  .contents {
+    .checkbox {
-    font-weight: normal;
+    }
-    font-size: 24px;
+
-    color: #009cff;
+    .contents {
-    text-decoration: underline;
+      font-weight: normal;
+      font-size: 24px;
+      color: #009cff;
+      text-decoration: underline;
+      transform: translateY(-3px);
+    }
   }
 
   .tButton {

com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx

@@ -1,10 +1,15 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
+import { registerDevice } from "../../../actions/deviceActions";
+import { getHomeTerms } from "../../../actions/homeActions";
+import { setPurchaseTermsAgree } from "../../../actions/orderActions";
 import TButton from "../../../components/TButton/TButton";
+import TCheckBox from "../../../components/TCheckBox/TCheckBox";
+import { $L } from "../../../utils/helperMethods";
 import css from "./SummaryContainer.module.less";
 
 const Container = SpotlightContainerDecorator(
@@ -12,13 +17,28 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const terms = [
+export default function SummaryContainer({ userInfo }) {
-  { content: "Agree to the Terms of Purchase" },
+  const dispatch = useDispatch();
-  { content: "Agree to the Privacy Policy" },
-];
 
-export default function SummaryContainer() {
   const { productList } = useSelector((state) => state.checkout.checkoutData);
+  const termsData = useSelector((state) => state.home.termsData);
+  const { checkoutTermsAgree } = useSelector((state) => state.common);
+
+  const checkoutTermsData = useMemo(
+    () =>
+      termsData?.data?.terms
+        .filter(
+          (item) => item.trmsTpCd === "MST00403" || item.trmsTpCd === "MST00404"
+        )
+        .map((term) => ({
+          id: term.trmsId,
+          content:
+            term.trmsTpCd === "MST00403"
+              ? `${$L("Agree to the Terms of Purchase")}`
+              : `${$L("Agree to the Privacy Policy")}`,
+        })),
+    [termsData]
+  );
 
   const [summary, setSummary] = useState({
     itemPrice: "0",
@@ -30,6 +50,15 @@ export default function SummaryContainer() {
     currSign: "",
     currSignLoc: "",
   });
+  const [agreements, setAgreements] = useState(() => {
+    const initialAgreements = {};
+
+    checkoutTermsData.forEach(({ id }) => {
+      initialAgreements[id] = checkoutTermsAgree;
+    });
+
+    return initialAgreements;
+  });
 
   const itemSetting = useCallback((productList) => {
     if (!productList || productList.length === 0) return;
@@ -89,6 +118,41 @@ export default function SummaryContainer() {
     { name: "Your Coupon Savings", value: summary.couponPrice },
   ];
 
+  useEffect(() => {
+    const initialAgreements = Object.fromEntries(
+      checkoutTermsData.map(({ id }) => [id, checkoutTermsAgree])
+    );
+    setAgreements(initialAgreements);
+  }, [checkoutTermsData, checkoutTermsAgree]);
+
+  const handleAgreeCheck = useCallback((trmsId) => {
+    setAgreements((prev) => ({ ...prev, [trmsId]: !prev[trmsId] }));
+  }, []);
+
+  const handleClickOrder = useCallback(() => {
+    const allAgreed = Object.values(agreements).every((agreed) => agreed);
+
+    if (checkoutTermsAgree) {
+      if (allAgreed) {
+        console.log("success");
+      } else {
+        console.error("failed (please check checkbox)");
+      }
+    } else {
+      if (allAgreed) {
+        const agreeTerms = Object.keys(agreements).filter(
+          (trmsId) => agreements[trmsId]
+        );
+        dispatch(
+          setPurchaseTermsAgree({ mbrNo: userInfo, termsList: agreeTerms })
+        );
+        console.log("success");
+      } else {
+        console.error("failed (not agree terms)");
+      }
+    }
+  }, [dispatch, agreements, userInfo, checkoutTermsAgree]);
+
   return (
     <Container className={css.container}>
       <div className={css.order}>
@@ -120,13 +184,19 @@ export default function SummaryContainer() {
         </div>
       </div>
       <div className={css.bottom}>
-        {terms.map((item, index) => (
+        {checkoutTermsData.map((term, index) => (
           <div className={css.checkboxWrap} key={index}>
-            <div className={css.checkbox} />
+            <TCheckBox
-            <div className={css.contents}>{item.content}</div>
+              className={css.checkbox}
+              selected={agreements[term.id]}
+              onToggle={() => handleAgreeCheck(term.id)}
+            />
+            <div className={css.contents}>{term.content}</div>
           </div>
         ))}
-        <TButton className={css.tButton}>{"PLACE ORDER"}</TButton>
+        <TButton className={css.tButton} onClick={handleClickOrder}>
+          {"PLACE ORDER"}
+        </TButton>
       </div>
     </Container>
   );