[actions, reducers] 종료 팝업 로직 추가

Detail Notes : 1. 이전 키 버튼 누를 시 TabLayout과 충돌로 인하여 “actionTypes, actions, reducer” 추가 하여 처리
2024-02-22 19:59:54 +09:00
parent a4f4d9464f
commit 90eb6be783
6 changed files with 109 additions and 64 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -13,6 +13,7 @@ export const types = {
  GET_HTTP_HEADER: "GET_HTTP_HEADER",
  CHANGE_APP_STATUS: "CHANGE_APP_STATUS",
  CHANGE_LOCAL_SETTINGS: "CHANGE_LOCAL_SETTINGS",
+  GNB_OPENED: "GNB_OPENED",

  // appData actions
  ADD_MAIN_INDEX: "ADD_MAIN_INDEX",
--- a/com.twin.app.shoptime/src/actions/commonActions.js
+++ b/com.twin.app.shoptime/src/actions/commonActions.js
@@ -1,5 +1,5 @@
 import { types } from "./actionTypes";
-import * as lunaSend from '../lunaSend';
+import * as lunaSend from "../lunaSend";
 import appinfo from "../../webos-meta/appinfo.json";

 export const changeAppStatus = (status) => ({
@@ -9,54 +9,67 @@ export const changeAppStatus = (status) => ({

 export const changeLocalSettings = (status) => ({
  type: types.CHANGE_LOCAL_SETTINGS,
-  payload: status
+  payload: status,
 });

-export const getHttpHeaderForServiceRequest = onComplete => (dispatch, getState) => {
-	console.log('getHttpHeaderForServiceRequest ');
-  const { serverType, ricCodeSetting } = getState().localSettings;
-	lunaSend.getHttpHeaderForServiceRequest({
-		onSuccess: (res) => {
-			console.log("getHttpHeaderForServiceRequest", res);
-      const convertedRes = {
-        "Authorization": res["Authorization"],
-        "X-Authentication": res["X-Authentication"],
-        "X-Device-ID": res["X-Device-ID"],
-        "X-Device-Product": res["X-Device-Product"],
-        "X-Device-Platform": res["X-Device-Platform"],
-        "X-Device-Model": res["X-Device-Model"],
-        "X-Device-Eco-Info": res["X-Device-Eco-Info"],
-        "X-Device-Country": res["X-Device-Country"],
-        "X-Device-Language":res["X-Device-Language"],
-        "X-Device-Netcast-Platform-Version": res["X-Device-Netcast-Platform-Version"],
-        "X-Device-Publish-Flag": res["X-Device-Publish-Flag"],
-        "X-Device-Fck": res["X-Device-Fck"],
-        "X-Device-Eula": res["X-Device-Eula"]
-      }
-      convertedRes["X-Device-Personalization"] = "Y";
+export const gnbOpened = (status) => ({
+  type: types.GNB_OPENED,
+  payload: status,
+});

-      convertedRes["app_id"] = appinfo.id;
-      //todo temp
-      convertedRes["app_ver"] = "1.0.0";//appinfo.version;
-      convertedRes["dvc_id"] = res["X-Device-Model"];
-      convertedRes["cntry_cd"] = res["X-Device-Country"];
-      convertedRes["prod_cd"] = res["X-Device-Product"];
-      convertedRes["plat_cd"] =  res["X-Device-Platform"];
-      convertedRes["lang_cd"] = res["X-Device-Language"];
-      convertedRes["sdk_ver"] = "1.0.0"; //server sdk version
-      convertedRes["publish_flag"] = "Y";
-      const version = res["X-Device-Netcast-Platform-Version"] || "";
-      convertedRes["os_ver"] = version;
-      //todo: for test
-      if(serverType !== 'system'){
-        convertedRes["cntry_cd"] = 'US';
-        res["HOST"] = "US.nextlgsdp.com";
-      }
-			dispatch({ type: types.GET_HTTP_HEADER, payload: convertedRes });
-      dispatch(changeAppStatus({webOSVersion: version.substring(0,version.lastIndexOf('.')), serverHOST: res["HOST"], mbr_no: res["X-User-Number"]}));
-		},
-		onFailure: (err) => {
-			console.log("getHttpHeaderForServiceRequest fail",err);
-		}
-	});
-};
+export const getHttpHeaderForServiceRequest =
+  (onComplete) => (dispatch, getState) => {
+    console.log("getHttpHeaderForServiceRequest ");
+    const { serverType, ricCodeSetting } = getState().localSettings;
+    lunaSend.getHttpHeaderForServiceRequest({
+      onSuccess: (res) => {
+        console.log("getHttpHeaderForServiceRequest", res);
+        const convertedRes = {
+          Authorization: res["Authorization"],
+          "X-Authentication": res["X-Authentication"],
+          "X-Device-ID": res["X-Device-ID"],
+          "X-Device-Product": res["X-Device-Product"],
+          "X-Device-Platform": res["X-Device-Platform"],
+          "X-Device-Model": res["X-Device-Model"],
+          "X-Device-Eco-Info": res["X-Device-Eco-Info"],
+          "X-Device-Country": res["X-Device-Country"],
+          "X-Device-Language": res["X-Device-Language"],
+          "X-Device-Netcast-Platform-Version":
+            res["X-Device-Netcast-Platform-Version"],
+          "X-Device-Publish-Flag": res["X-Device-Publish-Flag"],
+          "X-Device-Fck": res["X-Device-Fck"],
+          "X-Device-Eula": res["X-Device-Eula"],
+        };
+        convertedRes["X-Device-Personalization"] = "Y";
+
+        convertedRes["app_id"] = appinfo.id;
+        //todo temp
+        convertedRes["app_ver"] = "1.0.0"; //appinfo.version;
+        convertedRes["dvc_id"] = res["X-Device-Model"];
+        convertedRes["cntry_cd"] = res["X-Device-Country"];
+        convertedRes["prod_cd"] = res["X-Device-Product"];
+        convertedRes["plat_cd"] = res["X-Device-Platform"];
+        convertedRes["lang_cd"] = res["X-Device-Language"];
+        convertedRes["sdk_ver"] = "1.0.0"; //server sdk version
+        convertedRes["publish_flag"] = "Y";
+        const version = res["X-Device-Netcast-Platform-Version"] || "";
+        convertedRes["os_ver"] = version;
+        //todo: for test
+        if (serverType !== "system") {
+          convertedRes["cntry_cd"] = "US";
+          res["HOST"] = "US.nextlgsdp.com";
+        }
+        dispatch({ type: types.GET_HTTP_HEADER, payload: convertedRes });
+        dispatch(
+          changeAppStatus({
+            webOSVersion: version.substring(0, version.lastIndexOf(".")),
+            serverHOST: res["HOST"],
+            mbr_no: res["X-User-Number"],
+          })
+        );
+      },
+      onFailure: (err) => {
+        console.log("getHttpHeaderForServiceRequest fail", err);
+      },
+    });
+  };
--- a/com.twin.app.shoptime/src/components/ExitPopUp/ExitPopUp.jsx
+++ b/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 }) {
-  const [showExitButton, setShowExitButton] = useState(true);
+export default function ExitPopUp({ onClose, showExitButton }) {
+  // const [showExitButton, setShowExitButton] = useState(true);

  const confirmExit = useCallback(() => {
    if (typeof window === "object") {
@@ -11,19 +11,24 @@ export default function ExitPopUp({ onClose }) {
    } else {
      window.location.reload();
    }
-  }, [showExitButton]);
+  }, []);

  const cancelExit = useCallback(() => {
+    if (showExitButton) {
+      // return;
+    }
+
    if (onClose) {
      onClose();
-      setShowExitButton(false);
+      // setShowExitButton(false);
    }
-  }, [onClose]);
+  }, [onClose, showExitButton]);

  return (
    <TPopUp
      kind="exitPopup"
-      open={showExitButton}
+      // open={showExitButton}
+      open
      onExit={confirmExit}
      onClose={cancelExit}
      hasButton
--- a/com.twin.app.shoptime/src/components/TPanel/TPanel.jsx
+++ b/com.twin.app.shoptime/src/components/TPanel/TPanel.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";

 import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";

 import { Panel } from "@enact/sandstone/Panels";
 import { Cancelable } from "@enact/ui/Cancelable";
@@ -20,13 +20,30 @@ 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 {
@@ -34,7 +51,7 @@ const TPanel = ({
        e.stopPropagation();
      }
    },
-    [dispatch, handleCancel, isTabActivated]
+    [dispatch, handleCancel, isTabActivated, isGnbOpened]
  );

  return (
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -34,6 +34,7 @@ import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
 import TabItem from "./TabItem";
 import TabItemSub from "./TabItemSub";
 import css from "./TabLayout.module.less";
+import { gnbOpened } from "../../actions/commonActions";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -294,7 +295,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
    setTabFocused([false, false, false, false]);
    setMainSelectedIndex(-1);
    setMainExpanded(false);
-  }, []);
+    dispatch(gnbOpened(false));
+  }, [dispatch]);

  const onTabHasFocus = useCallback(
    (type) => (event) => {
@@ -447,11 +449,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
      setTimeout(() => {
        Spotlight.focus("activatedMain");
      }, 0);
+      dispatch(gnbOpened(true));
    }
    if (onTabActivated) {
      onTabActivated(tabActivated && showTab);
    }
-  }, [tabActivated, showTab]);
+  }, [tabActivated, showTab, dispatch]);

  useEffect(() => {
    setSecondDepthReduce(false);
--- a/com.twin.app.shoptime/src/reducers/commonReducer.js
+++ b/com.twin.app.shoptime/src/reducers/commonReducer.js
@@ -4,12 +4,13 @@ const initialState = {
  appStatus: {
    showLoadingPanel: { show: true, type: "launching" },
    isLoading: true,
-    webOSVersion:"",  //"5.0", "9.0" ...
+    webOSVersion: "", //"5.0", "9.0" ...
    serverHOST: "", //"US.nextlgsdp.com",
    mbr_no: "", //X-User-Number : "US2401051532595"
-    cursorVisible: false
+    cursorVisible: false,
  },
-  httpHeader: null
+  httpHeader: null,
+  isGnbOpened: false,
 };

 export const commonReducer = (state = initialState, action) => {
@@ -45,8 +46,13 @@ export const commonReducer = (state = initialState, action) => {
    case types.GET_HTTP_HEADER:
      return {
        ...state,
-        httpHeader: action.payload
-      }
+        httpHeader: action.payload,
+      };
+    case types.GNB_OPENED:
+      return {
+        ...state,
+        isGnbOpened: action.payload,
+      };
    default:
      return state;
  }