[checkoutPanel]

1. dummy -> 실제 데이터 api로 교체
2. card, billing, shipping 없을 시 qr코드
3. 기타 포커스 처리 중

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

@@ -1,50 +1,40 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
 
 import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
-
-import { Job } from '@enact/core/util';
-import Spotlight from '@enact/spotlight';
-
-import {
-  getCheckoutTotalAmtDummy,
+  getCheckoutTotalAmt,
   getMyInfoCheckoutInfo,
   resetCheckoutData,
-} from '../../actions/checkoutActions';
+} from "../../actions/checkoutActions";
 import {
   changeAppStatus,
   setHidePopup,
   setShowPopup,
-} from '../../actions/commonActions';
-import { getShoptimeTerms } from '../../actions/empActions';
-import { popPanel } from '../../actions/panelActions';
-import TBody from '../../components/TBody/TBody';
-import TButtonScroller from '../../components/TButtonScroller/TButtonScroller';
-import TButtonTab from '../../components/TButtonTab/TButtonTab';
-import TFullPopup from '../../components/TFullPopup/TFullPopup';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import TPopUp from '../../components/TPopUp/TPopUp';
-import useScrollTo from '../../hooks/useScrollTo';
-import * as Config from '../../utils/Config';
-import {
-  $L,
-  scaleH,
-  scaleW,
-} from '../../utils/helperMethods';
-import css from './CheckOutPanel.module.less';
-import PinCodeInput from './components/PinCodeInput';
-import FixedSideBar from './container/FixedSideBar';
-import InformationContainer from './container/InformationContainer';
-import OrderItemsSideBar from './container/OrderItemsSideBar';
-import SummaryContainer from './container/SummaryCotainer';
+} from "../../actions/commonActions";
+import { getShoptimeTerms } from "../../actions/empActions";
+import { popPanel } from "../../actions/panelActions";
+import TBody from "../../components/TBody/TBody";
+import TButton from "../../components/TButton/TButton";
+import TButtonScroller from "../../components/TButtonScroller/TButtonScroller";
+import TButtonTab from "../../components/TButtonTab/TButtonTab";
+import TFullPopup from "../../components/TFullPopup/TFullPopup";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import TPopUp from "../../components/TPopUp/TPopUp";
+import TQRCode from "../../components/TQRCode/TQRCode";
+import useScrollTo from "../../hooks/useScrollTo";
+import * as Config from "../../utils/Config";
+import { $L, scaleH, scaleW } from "../../utils/helperMethods";
+import css from "./CheckOutPanel.module.less";
+import PinCodeInput from "./components/PinCodeInput";
+import FixedSideBar from "./container/FixedSideBar";
+import InformationContainer from "./container/InformationContainer";
+import OrderItemsSideBar from "./container/OrderItemsSideBar";
+import SummaryContainer from "./container/SummaryCotainer";
 
 export default function CheckOutPanel() {
   const dispatch = useDispatch();
@@ -55,6 +45,8 @@ export default function CheckOutPanel() {
   const checkoutPanelInfo = panels.find(
     (panel) => panel.name === "checkoutpanel"
   )?.panelInfo;
+  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
+
   const productData = useSelector(
     (state) => state.checkout?.checkoutData.productList
   );
@@ -68,6 +60,8 @@ export default function CheckOutPanel() {
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
+  const { billingAddressList, shippingAddressList, cardInfo } =
+    checkoutData || {};
 
   const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
   const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
@@ -126,51 +120,49 @@ export default function CheckOutPanel() {
 
       const orderProductCoupontUse = Object.keys(selectedCoupons).map(
         (productId) => {
-          const {
-            cpnAplyMaxDcAmt,
-            cpnAplyMinProdAmt,
-            cpnAplyMinPurcAmt,
-            cpnCdCval,
-            cpnCdSeq,
-            cpnDctrt,
-            cpnSno,
-            dcAmt,
-            mbrNo,
-            prdtId,
-            shptmCpnTpCd,
-            shptmCpnTrgtCd,
-            shptmDcTpCd,
-          } = selectedCoupons[productId];
+          const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
+          const product = productData.find((prod) => prod.prdtId === prdtId);
 
           return {
-            cpnAplyMaxDcAmt,
-            cpnAplyMinProdAmt,
-            cpnAplyMinPurcAmt,
-            cpnCdCval,
             cpnCdSeq,
-            cpnDctrt,
             cpnSno,
-            dcAmt,
-            mbrNo,
             prdtId,
-            shptmCpnTpCd,
-            shptmCpnTrgtCd,
-            shptmDcTpCd,
+            prodSno: product?.prodSno,
+            patnrId: product?.patnrId,
           };
         }
       );
 
-      dispatch(
-        getCheckoutTotalAmtDummy({
-          mbrNo: userNumber,
-          dirPurcSelYn: "Y",
-          bilAddrSno: infoForCheckoutData?.bilAddrSno,
-          dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno,
-          orderProductCoupontUse,
-        })
-      );
+      if (
+        infoForCheckoutData &&
+        infoForCheckoutData.dlvrAddrSno &&
+        infoForCheckoutData.bilAddrSno
+      ) {
+        dispatch(
+          getCheckoutTotalAmt({
+            mbrNo: userNumber,
+            dirPurcSelYn: "Y",
+            bilAddrSno: infoForCheckoutData.bilAddrSno,
+            dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
+            orderProductCoupontUse,
+          })
+        );
+      }
+
+      if (!billingAddressList || !shippingAddressList || !cardInfo) {
+        dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup2));
+      }
     }
-  }, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
+  }, [
+    dispatch,
+    infoForCheckoutData,
+    productData,
+    userNumber,
+    selectedCoupons,
+    billingAddressList,
+    shippingAddressList,
+    cardInfo,
+  ]);
 
   useEffect(() => {
     const newTabList = [];
@@ -191,13 +183,20 @@ export default function CheckOutPanel() {
   }, [dispatch]);
 
   useEffect(() => {
-    spotJob.current.start(() => {
-      Spotlight.focus("spotlightId_placeOrderBtn");
-    });
+    if (!activePopup === Config.ACTIVE_POPUP.qrPopup2) {
+      spotJob.current.start(() => {
+        Spotlight.focus("spotlightId_placeOrderBtn");
+      });
+    } else {
+      spotJob.current.start(() => {
+        Spotlight.focus("checkoutCloseButton");
+      });
+    }
+
     return () => {
       spotJob.current.stop();
     };
-  }, []);
+  }, [activePopup]);
 
   const onBackClick = useCallback(() => {
     dispatch(popPanel());
@@ -219,6 +218,11 @@ export default function CheckOutPanel() {
     dispatch(setHidePopup());
   }, [dispatch]);
 
+  const onCloseQRPopup = useCallback(() => {
+    dispatch(setHidePopup());
+    dispatch(popPanel());
+  }, []);
+
   const handleTermsClick = useCallback(
     (termsID) => {
       if (empTermsData) {
@@ -336,6 +340,33 @@ export default function CheckOutPanel() {
         </TPopUp>
       )}
 
+      {activePopup === Config.ACTIVE_POPUP.qrPopup2 && (
+        <TPopUp kind="qrPopup" open={popupVisible} onClose={onCloseQRPopup}>
+          <div className={css.popupContainer}>
+            <div className={css.header}>
+              <h3>{$L("QR CODE")}</h3>
+            </div>
+            <div className={css.qrcodeContainer}>
+              <div className={css.qrcode}>
+                <TQRCode text="http://google.com" width="360" height="360" />
+              </div>
+              <h3>
+                {$L(
+                  "If you want to add or edit your address and payment information, please scan the QR CODE."
+                )}
+              </h3>
+              <TButton
+                className={css.popupBtn}
+                onClick={onCloseQRPopup}
+                spotlightId="checkoutCloseButton"
+              >
+                {$L("CLOSE")}
+              </TButton>
+            </div>
+          </div>
+        </TPopUp>
+      )}
+
       <TFullPopup
         open={placeOrderPopup}
         className={css.pinCodePopup}