[Exit] ExitPopup

Detail Notes :
 
1. 주석 제거 및 원본 복구
2. Intro Exit 버튼 진행중

com.twin.app.shoptime/src/components/ExitPopUp/ExitPopUp.jsx

@@ -2,8 +2,8 @@ import $L from "@enact/i18n/$L";
 import React, { useCallback, useState } from "react";
 import TPopUp from "../TPopUp/TPopUp";
 
-export default function ExitPopUp({ onClose, showExitButton }) {
-  // const [showExitButton, setShowExitButton] = useState(true);
+export default function ExitPopUp({ onClose }) {
+  const [exitPopUp, setExitPopUp] = useState(true);
 
   const confirmExit = useCallback(() => {
     if (typeof window === "object") {
@@ -14,21 +14,16 @@ export default function ExitPopUp({ onClose, showExitButton }) {
   }, []);
 
   const cancelExit = useCallback(() => {
-    if (showExitButton) {
-      // return;
-    }
-
     if (onClose) {
       onClose();
-      // setShowExitButton(false);
+      setExitPopUp(false);
     }
-  }, [onClose, showExitButton]);
+  }, [onClose]);
 
   return (
     <TPopUp
       kind="exitPopup"
-      // open={showExitButton}
-      open
+      open={exitPopUp}
       onExit={confirmExit}
       onClose={cancelExit}
       hasButton

com.twin.app.shoptime/src/components/TPanel/TPanel.jsx

@@ -20,30 +20,18 @@ const TPanel = ({
   children,
   handleCancel,
   isTabActivated = true,
-  // isTabActivated,
   ...rest
 }) => {
   const dispatch = useDispatch();
   delete rest.panelInfo;
 
   const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
-  console.log("##isGnbOpened", isGnbOpened);
 
   const onCancel = useCallback(
     (e) => {
       if (isGnbOpened) {
         return;
       }
-      // GNB가 열려있어?
-      // 그럼 onCancel = GNB를 닫아줘
-
-      // GNB가 닫혀있어?
-      // 그럼 onCancel =
-      // console.log("onCancel", e);
-      // if (isTabActivated) {
-      //   console.log("isTabActivated", e);
-      //   return;
-      // }
       if (handleCancel) {
         handleCancel(e);
       } else {

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

@@ -20,16 +20,19 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
-
-export default function IntroPanel({ children, ...rest }) {
+export default function IntroPanel({
+  children,
+  isTabActivated,
+  handleCancel,
+  ...rest
+}) {
   delete rest.isTabActivated;
   delete rest.panelInfo;
-
   const dispatch = useDispatch();
   useDebugKey({});
   const termsData = useSelector((state) => state.home.termsData);
 
-  const [showExitButton, setShowExitButton] = useState(false);
+  const [showExitPopup, setShowExitPopup] = useState(false);
   const [termsPopUpOpen, setTermsPopUpOpen] = useState(false);
   const [currentTerms, setCurrentTerms] = useState(null);
 
@@ -56,8 +59,16 @@ export default function IntroPanel({ children, ...rest }) {
   }, [dispatch]);
 
   const handleDisagree = useCallback(() => {
-    setShowExitButton(!showExitButton);
-  }, [showExitButton]);
+    setShowExitPopup(!showExitPopup);
+  }, [showExitPopup]);
+
+  const onCancel = useCallback(() => {
+    setShowExitPopup(false);
+
+    if (typeof window === "object") {
+      setShowExitPopup(true);
+    }
+  }, [showExitPopup]);
 
   useEffect(() => {
     Spotlight.focus("introTermsAgree");
@@ -69,7 +80,11 @@ export default function IntroPanel({ children, ...rest }) {
 
   return (
     <>
-      <TPanel className={css.panel} isTabActivated={false}>
+      <TPanel
+        className={css.panel}
+        isTabActivated={false}
+        handleCancel={onCancel}
+      >
         <Container {...rest} className={css.introLayout}>
           <div className={css.title}>
             {$L(`Welcome to `)}
@@ -135,7 +150,7 @@ export default function IntroPanel({ children, ...rest }) {
       </TPopUp>
 
       {/* DO NOT AGREE */}
-      {showExitButton && <ExitPopUp onClose={handleDisagree} />}
+      {showExitPopup && <ExitPopUp onClose={onCancel} />}
     </>
   );
 }