[checkoutpanel] 결제 관련 api 추가 및 action, reducer 추가 / UI 작업

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

@@ -1,30 +1,53 @@
-import React, { useCallback, useEffect } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { getMyInfoCheckoutInfo } from "../../actions/checkoutActions";
-import { popPanel } from "../../actions/panelActions";
-import TBody from "../../components/TBody/TBody";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import TScroller from "../../components/TScroller/TScroller";
-import css from "./CheckOutPanel.module.less";
-import CheckoutQRCode from "./components/CheckoutQRCode";
-import CheckOutTerms from "./components/CheckOutTerms";
-import PinCode from "./components/PinCode";
-import InformationContainer from "./container/InformationContainer";
-import SummaryContainer from "./container/SummaryCotainer";
+import {
+  getMyInfoCheckoutInfo,
+  getTaxInfos,
+} from '../../actions/checkoutActions';
+import { popPanel } from '../../actions/panelActions';
+import TBody from '../../components/TBody/TBody';
+import THeader from '../../components/THeader/THeader';
+import TPanel from '../../components/TPanel/TPanel';
+import TScroller from '../../components/TScroller/TScroller';
+import css from './CheckOutPanel.module.less';
+import CheckoutQRCode from './components/CheckoutQRCode';
+import CheckOutTerms from './components/CheckOutTerms';
+import PinCode from './components/PinCode';
+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();
+  const panels = useSelector((state) => state.panels.panels);
   const { userInfo } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
-  const panels = useSelector((state) => state.panels.panels);
-  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
-  const testData = useSelector((state) => state);
+  const checkoutPanelInfo = panels.find(
+    (panel) => panel.name === "checkoutpanel"
+  )?.panelInfo;
+  const productData = useSelector(
+    (state) => state.checkout?.checkoutData.productList
+  );
+  const infoForCheckoutData = useSelector(
+    (state) => state.checkout?.infoForCheckoutData
+  );
 
-  console.log("#panels", panels);
+  const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
+  const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
+
+  console.log("chw", infoForCheckoutData);
+  console.log("chw", productData);
 
   useEffect(() => {
     dispatch(
@@ -33,10 +56,32 @@ export default function CheckOutPanel() {
         dirPurcSelYn: "Y",
         cartList: [
           {
-            patnrId: "11",
-            prdtId: "7280567",
-            prodOptCdCval: "7326490",
-            prodQty: 1,
+            patnrId: checkoutPanelInfo.cartList.patnrId,
+            prdtId: checkoutPanelInfo.cartList.prdtId,
+            prodOptCdCval: checkoutPanelInfo.cartList.prodOptCdCval,
+            prodQty: checkoutPanelInfo.cartList.prodQty,
+          },
+        ],
+      })
+    );
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(
+      getTaxInfos({
+        mbrNo: userInfo,
+        bilAddrSno: infoForCheckoutData?.bilAddrSno || 206,
+        dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno || 3003,
+        reqCheckoutTaxInfoItemList: [
+          {
+            cpnSno: null,
+            dcAmt: null,
+            frgtTaxCd: productData?.[0].frgtTaxCd || "FR020900",
+            patnrId: productData?.[0].patnrId || "11",
+            prdtId: productData?.[0].prdtId || "7127927",
+            prodPrc: productData?.[0].price3 || 9.99,
+            prodQty: productData?.[0].prodQty || 1,
+            taxCd: productData?.[0].taxCd || "P0000000",
           },
         ],
       })
@@ -46,10 +91,21 @@ export default function CheckOutPanel() {
   const onBackClick = useCallback(() => {
     dispatch(popPanel());
   }, [dispatch]);
-  //{ name: panel_names.ON_SALE_PANEL }
+
+  const toggleOrderSideBar = useCallback(() => {
+    setOrderSideBarOpen((prev) => !prev);
+  }, [orderSideBarOpen]);
+
+  const toggleOfferSideBar = useCallback(() => {
+    setOfferSideBarOpen((prev) => !prev);
+  }, [offerSideBarOpen]);
+
   return (
     <>
-      <TPanel isTabActivated={false}>
+      <TPanel
+        isTabActivated={false}
+        spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
+      >
         <TBody className={css.tbody}>
           <THeader
             className={css.theader}
@@ -59,13 +115,19 @@ export default function CheckOutPanel() {
           />
           <div className={css.Wrap}>
             <SummaryContainer userInfo={userInfo} />
-            <InformationContainer checkoutData={checkoutData} />
+            <InformationContainer
+              toggleOrderSideBar={toggleOrderSideBar}
+              toggleOfferSideBar={toggleOfferSideBar}
+            />
           </div>
-          <CheckoutQRCode open={false} />
+          {/* <CheckoutQRCode open={false} /> */}
         </TBody>
       </TPanel>
-      {/* <CheckOutTerms /> 약관부분 */}
-      {/* <PinCode /> */}
+
+      {orderSideBarOpen && (
+        <OrderItemsSideBar closeSideBar={toggleOrderSideBar} />
+      )}
+      {offerSideBarOpen && <FixedSideBar closeSideBar={toggleOfferSideBar} />}
     </>
   );
 }