[checkoutPanel] confirmPanel UI 작업 및 checkoutPanel 예외 처리

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

@@ -8,23 +8,26 @@ import Spotlight from "@enact/spotlight";
 import {
   getCheckoutTotalAmtDummy,
   getMyInfoCheckoutInfo,
-  getTaxInfos,
   resetCheckoutData,
 } from "../../actions/checkoutActions";
-import { changeAppStatus } from "../../actions/commonActions";
+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 TScroller from "../../components/TScroller/TScroller";
+import TPopUp from "../../components/TPopUp/TPopUp";
 import useScrollTo from "../../hooks/useScrollTo";
-import { $L } from "../../utils/helperMethods";
+import * as Config from "../../utils/Config";
+import { $L, scaleH, scaleW } from "../../utils/helperMethods";
 import css from "./CheckOutPanel.module.less";
-import CheckoutQRCode from "./components/CheckoutQRCode";
-import CheckOutTerms from "./components/CheckOutTerms";
-import PinCode from "./components/PinCode";
 import PinCodeInput from "./components/PinCodeInput";
 import FixedSideBar from "./container/FixedSideBar";
 import InformationContainer from "./container/InformationContainer";
@@ -49,11 +52,19 @@ export default function CheckOutPanel() {
   const selectedCoupons = useSelector(
     (state) => state.checkout.selectedCoupons
   );
+  const empTermsData = useSelector((state) => state.emp.empTermsData.terms);
+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
 
   const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
   const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
   const [placeOrderPopup, setPlaceOrderPopup] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [currentTerms, setCurrentTerms] = useState(null);
+  const [tabList, setTabList] = useState([]);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const [resetScroll, setResetScroll] = useState(false);
 
   const isMounted = useRef(true);
 
@@ -149,6 +160,18 @@ export default function CheckOutPanel() {
     }
   }, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
 
+  useEffect(() => {
+    const newTabList = [];
+
+    if (empTermsData) {
+      empTermsData.forEach((term) => {
+        newTabList.push(term.termsTypeName);
+      });
+
+      setTabList(newTabList);
+    }
+  }, [empTermsData]);
+
   useEffect(() => {
     return () => {
       dispatch(resetCheckoutData());
@@ -180,6 +203,53 @@ export default function CheckOutPanel() {
     setPlaceOrderPopup(false);
   }, []);
 
+  const onCloseTermsPopup = useCallback(() => {
+    dispatch(setHidePopup());
+  }, [dispatch]);
+
+  const handleTermsClick = useCallback(
+    (termsID) => {
+      if (empTermsData) {
+        const selectedTerms = empTermsData.find(
+          (term) => term.termsID === termsID
+        );
+
+        setCurrentTerms(selectedTerms);
+        dispatch(setShowPopup(Config.ACTIVE_POPUP.termsPopup));
+
+        const selectedIndex = empTermsData.findIndex(
+          (term) => term.termsID === termsID
+        );
+
+        setSelectedTabIndex(selectedIndex);
+        setResetScroll(true);
+      }
+    },
+    [empTermsData, dispatch]
+  );
+
+  const handleTabClick = useCallback(({ index }) => {
+    setSelectedTabIndex(index);
+    setResetScroll(true);
+  }, []);
+
+  useEffect(() => {
+    if (empTermsData && empTermsData[selectedTabIndex]) {
+      setCurrentTerms(empTermsData[selectedTabIndex]);
+      setResetScroll(true);
+    }
+  }, [selectedTabIndex, empTermsData]);
+
+  useEffect(() => {
+    if (resetScroll) {
+      setResetScroll(false);
+    }
+  }, [resetScroll]);
+
+  useEffect(() => {
+    Spotlight.focus();
+  }, [popupVisible]);
+
   return (
     <>
       <TPanel
@@ -194,14 +264,17 @@ export default function CheckOutPanel() {
             onClick={onBackClick}
           />
           <div className={css.Wrap}>
-            <SummaryContainer setPlaceOrderPopup={setPlaceOrderPopup} />
+            <SummaryContainer
+              setPlaceOrderPopup={setPlaceOrderPopup}
+              empTermsData={empTermsData}
+              handleTermsClick={handleTermsClick}
+            />
             <InformationContainer
               toggleOrderSideBar={toggleOrderSideBar}
               toggleOfferSideBar={toggleOfferSideBar}
               scrollTopBody={scrollTopBody}
             />
           </div>
-          {/* <CheckoutQRCode open={false} /> */}
         </TBody>
       </TPanel>
 
@@ -210,6 +283,42 @@ export default function CheckOutPanel() {
       )}
       {offerSideBarOpen && <FixedSideBar closeSideBar={toggleOfferSideBar} />}
 
+      {activePopup === Config.ACTIVE_POPUP.termsPopup && (
+        <TPopUp
+          kind="introTermsPopup"
+          open={popupVisible}
+          onClose={onCloseTermsPopup}
+          hasButton
+          button1Text={$L("OK")}
+        >
+          {currentTerms && (
+            <div className={css.termsConts}>
+              <TButtonTab
+                className={css.tab}
+                selectedIndex={selectedTabIndex}
+                onItemClick={handleTabClick}
+                contents={tabList}
+                role="button"
+              />
+              <TButtonScroller
+                boxHeight={scaleH(300)}
+                width={scaleW(980)}
+                className={css.termsDescription}
+                resetScrollPosition={resetScroll}
+                forcedFocus={false}
+              >
+                <div
+                  className={css.termsDesc}
+                  dangerouslySetInnerHTML={{
+                    __html: currentTerms && currentTerms.termContent,
+                  }}
+                ></div>
+              </TButtonScroller>
+            </div>
+          )}
+        </TPopUp>
+      )}
+
       <TFullPopup
         open={placeOrderPopup}
         className={css.pinCodePopup}