[HomePanel, IntroPanel, TermsOfService] 종료 팝업 추가

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

@@ -1,11 +1,18 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
-import ExitPopUp from "../../components/ExitPopUp/ExitPopUp";
 
+import {
+  setExitApp,
+  setHidePopup,
+  setShowPopup,
+} from "../../actions/commonActions";
 import TBody from "../../components/TBody/TBody";
 import TPanel from "../../components/TPanel/TPanel";
+import TPopUp from "../../components/TPopUp/TPopUp";
 import useDebugKey from "../../hooks/useDebugKey";
+import useScrollTo from "../../hooks/useScrollTo";
+import { $L } from "../../utils/helperMethods";
 import BestSeller from "../HomePanel/BestSeller/BestSeller";
 import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
 import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
@@ -22,9 +29,9 @@ export default function HomePanel({ isOnTop }) {
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
+  const popupVisible = useSelector((state) => state.common.popupVisible);
   const [selectTemplate, setSelectTemplate] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
-  const [ispopup, setIspopup] = useState(false);
 
   useEffect(() => {
     if (homeTopDisplayInfos) {
@@ -35,35 +42,53 @@ export default function HomePanel({ isOnTop }) {
     }
   }, [homeTopDisplayInfos, homeLayoutInfo]);
 
-  // export default memo(function TopButton({ className, targetId, ...rest }) {
-
-  const handleCancel = useCallback(() => {
-    setIspopup(false);
+  const onCancel = useCallback(() => {
     if (!isOnTop) {
       return;
     }
-    if (typeof window === "object") {
-      setIspopup(true);
-    }
-  }, [isOnTop]);
-  return (
-    <TPanel className={css.panel} onCancel={handleCancel}>
-      <TBody className={css.tBody}>
-        {ispopup && <ExitPopUp onClose={handleCancel} />}
 
-        {selectTemplate &&
-          (selectTemplate === "DSP00201" ? (
-            <HomeBannerTemplate1 />
-          ) : selectTemplate === "DSP00202" ? (
-            <HomeBannerTemplate2 />
-          ) : selectTemplate === "DSP00203" ? (
-            <HomeBannerTemplate3 />
-          ) : null)}
-        <SubCategory />
-        <HomeOnSale />
-        <PopularShow />
-        <BestSeller />
-      </TBody>
-    </TPanel>
+    dispatch(setShowPopup());
+  }, [isOnTop, dispatch]);
+
+  const onExit = useCallback(() => {
+    dispatch(setExitApp());
+  }, [dispatch]);
+
+  const onClose = useCallback(() => {
+    dispatch(setHidePopup());
+  }, [dispatch]);
+
+  return (
+    <>
+      <TPanel className={css.panel} onCancel={onCancel}>
+        <TBody className={css.tBody}>
+          {selectTemplate &&
+            (selectTemplate === "DSP00201" ? (
+              <HomeBannerTemplate1 />
+            ) : selectTemplate === "DSP00202" ? (
+              <HomeBannerTemplate2 />
+            ) : selectTemplate === "DSP00203" ? (
+              <HomeBannerTemplate3 />
+            ) : null)}
+          <SubCategory />
+          <HomeOnSale />
+          <PopularShow />
+          <BestSeller />
+        </TBody>
+      </TPanel>
+
+      <TPopUp
+        kind="exitPopup"
+        open={popupVisible}
+        onExit={onExit}
+        onClose={onClose}
+        hasButton
+        button1Text={$L("Exit")}
+        button2Text={$L("Cancel")}
+        hasText
+        title={$L("Exit Shop Time")}
+        text={$L("Are you sure you want to exit Shop Time?")}
+      />
+    </>
   );
 }

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

@@ -5,9 +5,13 @@ import { useDispatch, useSelector } from "react-redux";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
+import {
+  setExitApp,
+  setHidePopup,
+  setShowPopup,
+} from "../../actions/commonActions";
 import { getHomeTerms } from "../../actions/homeActions";
 import { popPanel } from "../../actions/panelActions";
-import ExitPopUp from "../../components/ExitPopUp/ExitPopUp";
 import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import TPopUp from "../../components/TPopUp/TPopUp";
@@ -20,6 +24,12 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
+
+const ACTIVE_POPUP = {
+  terms: "terms",
+  exit: "exit",
+};
+
 export default function IntroPanel({
   children,
   isTabActivated,
@@ -31,9 +41,10 @@ export default function IntroPanel({
   const dispatch = useDispatch();
   useDebugKey({});
   const termsData = useSelector((state) => state.home.termsData);
+  const popupVisible = useSelector((state) => state.common.popupVisible);
+
+  const [activePopup, setActivePopup] = useState(null);
 
-  const [showExitPopup, setShowExitPopup] = useState(false);
-  const [termsPopUpOpen, setTermsPopUpOpen] = useState(false);
   const [currentTerms, setCurrentTerms] = useState(null);
 
   useEffect(() => {
@@ -48,32 +59,46 @@ export default function IntroPanel({
         );
 
         setCurrentTerms(selectedTerms);
-        setTermsPopUpOpen(true);
+        setActivePopup(ACTIVE_POPUP.terms);
+        dispatch(setShowPopup());
       }
     },
-    [termsData]
+    [termsData, dispatch]
   );
 
+  const onClose = useCallback(() => {
+    dispatch(setHidePopup());
+    setActivePopup(null);
+  }, [dispatch]);
+
   const handleAgree = useCallback(() => {
     dispatch(popPanel(Config.panel_names.INTRO_PANEL));
   }, [dispatch]);
 
   const handleDisagree = useCallback(() => {
-    setShowExitPopup(!showExitPopup);
-  }, [showExitPopup]);
+    setActivePopup(ACTIVE_POPUP.exit);
+    dispatch(setShowPopup());
+  }, [dispatch]);
+
+  const onExit = useCallback(() => {
+    dispatch(setExitApp());
+  }, [dispatch]);
 
   const onCancel = useCallback(() => {
-    setShowExitPopup(false);
-
-    if (typeof window === "object") {
-      setShowExitPopup(true);
+    if (activePopup === null) {
+      setActivePopup(ACTIVE_POPUP.exit);
+      dispatch(setShowPopup());
     }
-  }, [showExitPopup]);
+  }, [dispatch, activePopup]);
 
   useEffect(() => {
     Spotlight.focus("introTermsAgree");
   }, []);
 
+  useEffect(() => {
+    Spotlight.focus();
+  }, [popupVisible]);
+
   const description =
     $L(`Check out more LIVE SHOWS and enjoy Shopping via your TV \n at Shop Time’s special prices by agreeing to the LG TV
   Shopping Terms and Conditions`);
@@ -125,32 +150,47 @@ export default function IntroPanel({
       </TPanel>
 
       {/* TERMS */}
-      <TPopUp
-        kind="introTermsPopup"
-        open={termsPopUpOpen}
-        onClose={() => setTermsPopUpOpen(false)}
-        hasButton
-        button1Text={$L("OK")}
-      >
-        {currentTerms && (
-          <div className={css.introTermsConts}>
-            <div className={css.termsTitle}>
-              {currentTerms.trmsTpCd === "MST00401"
-                ? $L("Privacy Policy")
-                : $L("Terms & Conditions")}
+      {activePopup === ACTIVE_POPUP.terms && (
+        <TPopUp
+          kind="introTermsPopup"
+          open={popupVisible}
+          onClose={onClose}
+          hasButton
+          button1Text={$L("OK")}
+        >
+          {currentTerms && (
+            <div className={css.introTermsConts}>
+              <div className={css.termsTitle}>
+                {currentTerms.trmsTpCd === "MST00401"
+                  ? $L("Privacy Policy")
+                  : $L("Terms & Conditions")}
+              </div>
+              <div
+                className={css.termsDesc}
+                dangerouslySetInnerHTML={{
+                  __html: currentTerms && currentTerms.trmsCntt,
+                }}
+              />
             </div>
-            <div
-              className={css.termsDesc}
-              dangerouslySetInnerHTML={{
-                __html: currentTerms && currentTerms.trmsCntt,
-              }}
-            />
-          </div>
-        )}
-      </TPopUp>
+          )}
+        </TPopUp>
+      )}
 
       {/* DO NOT AGREE */}
-      {showExitPopup && <ExitPopUp onClose={onCancel} />}
+      {activePopup === ACTIVE_POPUP.exit && (
+        <TPopUp
+          kind="exitPopup"
+          open={popupVisible}
+          onExit={onExit}
+          onClose={onClose}
+          hasButton
+          button1Text={$L("Exit")}
+          button2Text={$L("Cancel")}
+          hasText
+          title={$L("Exit Shop Time")}
+          text={$L("Are you sure you want to exit Shop Time?")}
+        />
+      )}
     </>
   );
 }

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

@@ -4,12 +4,14 @@ import TBody from "../../components/TBody/TBody";
 import TPanel from "../../components/TPanel/TPanel";
 import css from "./MyPagePanel.module.less";
 import Support from "./MyPageSub/Support/Support";
+import TermsOfService from "./MyPageSub/TermsOfService/TermsOfService";
 
 export default function MyPagePanel() {
   return (
     <TPanel>
       <TBody className={css.tBody}>
-        <Support />
+        {/* <Support /> */}
+        <TermsOfService />
       </TBody>
     </TPanel>
   );

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx

@@ -2,16 +2,20 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import {
+  setExitApp,
+  setHidePopup,
+  setShowPopup,
+} from "../../../../actions/commonActions";
 import { getHomeTerms } from "../../../../actions/homeActions";
-import ExitPopUp from "../../../../components/ExitPopUp/ExitPopUp";
 import TButton, { TYPES } from "../../../../components/TButton/TButton";
 import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./TermsOfService.module.less";
 
-export default function Support() {
+export default function TermsOfService() {
   const [selectedTab, setSelectedTab] = useState(0);
-  const [showExitButton, setShowExitButton] = useState(false);
   const [trmsTpCd, setTrmsTpCd] = useState("MST00401");
   const tabList = [
     $L("TERMS OF SERVICE"),
@@ -22,6 +26,7 @@ export default function Support() {
   const trmsCdList = ["MST00401", "MST00402", "MST00403", "MST00404"];
   const dispatch = useDispatch();
   const termsData = useSelector((state) => state.home.termsData);
+  const popupVisible = useSelector((state) => state.common.popupVisible);
 
   const handleItemClick = useCallback(
     ({ index }) => {
@@ -35,8 +40,16 @@ export default function Support() {
   }, [dispatch, trmsTpCd]);
 
   const handleDisagree = useCallback(() => {
-    setShowExitButton(!showExitButton);
-  }, [showExitButton]);
+    dispatch(setShowPopup());
+  }, [dispatch]);
+
+  const onExit = useCallback(() => {
+    dispatch(setExitApp());
+  }, [dispatch]);
+
+  const onClose = useCallback(() => {
+    dispatch(setHidePopup());
+  }, [dispatch]);
 
   return (
     <div className={css.termsContainer}>
@@ -74,7 +87,18 @@ export default function Support() {
           </TButton>
         </div>
       </div>
-      {showExitButton && <ExitPopUp onClose={handleDisagree} />}
+      <TPopUp
+        kind="exitPopup"
+        open={popupVisible}
+        onExit={onExit}
+        onClose={onClose}
+        hasButton
+        button1Text={$L("Exit")}
+        button2Text={$L("Cancel")}
+        hasText
+        title={$L("Exit Shop Time")}
+        text={$L("Are you sure you want to exit Shop Time?")}
+      />
     </div>
   );
 }