[commonActions, commonReducer] activePopup 추가, IntroPanel, TermsOfService 적용

com.twin.app.shoptime/src/actions/commonActions.js

@@ -17,8 +17,9 @@ export const gnbOpened = (status) => ({
   payload: status,
 });
 
-export const setShowPopup = () => ({
+export const setShowPopup = (popupType) => ({
   type: types.SET_SHOW_POPUP,
+  payload: { activePopup: popupType },
 });
 
 export const setHidePopup = () => ({

com.twin.app.shoptime/src/reducers/commonReducer.js

@@ -11,7 +11,10 @@ const initialState = {
   },
   httpHeader: null,
   isGnbOpened: false,
-  popupVisible: false,
+  popup: {
+    popupVisible: false,
+    activePopup: null,
+  },
 };
 
 export const commonReducer = (state = initialState, action) => {
@@ -57,15 +60,22 @@ export const commonReducer = (state = initialState, action) => {
     case types.SET_SHOW_POPUP:
       return {
         ...state,
-        popupVisible: true,
+        popup: {
+          popupVisible: true,
+          activePopup: action.payload.activePopup,
+        },
       };
     case types.SET_HIDE_POPUP:
       return {
         ...state,
-        popupVisible: false,
+        popup: {
+          popupVisible: false,
+          activePopup: null,
+        },
       };
     case types.SET_EXIT_APP:
       return state;
+
     default:
       return state;
   }

com.twin.app.shoptime/src/utils/Config.js

@@ -36,3 +36,9 @@ export const SEARCH_DATA_MAX_RESULTS_LIMIT = 30;
 
 // getSubCategory data
 export const CATEGORY_DATA_MAX_RESULTS_LIMIT = 20;
+
+// popup
+export const ACTIVE_POPUP = {
+  termsPopup: "termsPopup",
+  exitPopup: "exitPopup",
+};

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

@@ -25,11 +25,6 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const ACTIVE_POPUP = {
-  terms: "terms",
-  exit: "exit",
-};
-
 export default function IntroPanel({
   children,
   isTabActivated,
@@ -41,9 +36,9 @@ 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 { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
 
   const [currentTerms, setCurrentTerms] = useState(null);
 
@@ -59,8 +54,7 @@ export default function IntroPanel({
         );
 
         setCurrentTerms(selectedTerms);
-        setActivePopup(ACTIVE_POPUP.terms);
-        dispatch(setShowPopup());
+        dispatch(setShowPopup(Config.ACTIVE_POPUP.termsPopup));
       }
     },
     [termsData, dispatch]
@@ -68,7 +62,6 @@ export default function IntroPanel({
 
   const onClose = useCallback(() => {
     dispatch(setHidePopup());
-    setActivePopup(null);
   }, [dispatch]);
 
   const handleAgree = useCallback(() => {
@@ -76,8 +69,7 @@ export default function IntroPanel({
   }, [dispatch]);
 
   const handleDisagree = useCallback(() => {
-    setActivePopup(ACTIVE_POPUP.exit);
-    dispatch(setShowPopup());
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup));
   }, [dispatch]);
 
   const onExit = useCallback(() => {
@@ -86,10 +78,9 @@ export default function IntroPanel({
 
   const onCancel = useCallback(() => {
     if (activePopup === null) {
-      setActivePopup(ACTIVE_POPUP.exit);
-      dispatch(setShowPopup());
+      dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup));
     }
-  }, [dispatch, activePopup]);
+  }, [dispatch]);
 
   useEffect(() => {
     Spotlight.focus("introTermsAgree");
@@ -150,7 +141,7 @@ export default function IntroPanel({
       </TPanel>
 
       {/* TERMS */}
-      {activePopup === ACTIVE_POPUP.terms && (
+      {activePopup === Config.ACTIVE_POPUP.termsPopup && (
         <TPopUp
           kind="introTermsPopup"
           open={popupVisible}
@@ -177,7 +168,7 @@ export default function IntroPanel({
       )}
 
       {/* DO NOT AGREE */}
-      {activePopup === ACTIVE_POPUP.exit && (
+      {activePopup === Config.ACTIVE_POPUP.exitPopup && (
         <TPopUp
           kind="exitPopup"
           open={popupVisible}

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

@@ -11,6 +11,7 @@ import { getHomeTerms } from "../../../../actions/homeActions";
 import TButton, { TYPES } from "../../../../components/TButton/TButton";
 import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
+import * as Config from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./TermsOfService.module.less";
 
@@ -26,7 +27,7 @@ export default function TermsOfService() {
   const trmsCdList = ["MST00401", "MST00402", "MST00403", "MST00404"];
   const dispatch = useDispatch();
   const termsData = useSelector((state) => state.home.termsData);
-  const popupVisible = useSelector((state) => state.common.popupVisible);
+  const { popupVisible } = useSelector((state) => state.common.popup);
 
   const handleItemClick = useCallback(
     ({ index }) => {
@@ -40,7 +41,7 @@ export default function TermsOfService() {
   }, [dispatch, trmsTpCd]);
 
   const handleDisagree = useCallback(() => {
-    dispatch(setShowPopup());
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup));
   }, [dispatch]);
 
   const onExit = useCallback(() => {