[Log] IF-LGSP-LOG-004(2ndLayer), modify

Detail Note: 1. add action type `SET_SECOND_LAYER_INFO` (actionTypes.js) 2. add action `setSecondLayerInfo` (commonActions.js) 3. modify `sendLogSecondLayer` and `sendLogGNB` functions (logActions.js) 4. modify `initService` function and `setDeepLink` in useEffect (App.js) 5. remove unnecessary function `getMenuByTargetContent` (deepLinkHandler.js) 6. add state and case for `secondLayerInfo` (commonReducer.js) 7. edit selected state variable to `isDeepLink` (HomePanel.jsx)
2024-07-28 22:26:59 +09:00
parent b8f43c8444
commit 118fe825b9
7 changed files with 311 additions and 345 deletions
--- a/com.twin.app.shoptime/src/App/App.js
+++ b/com.twin.app.shoptime/src/App/App.js
@@ -14,6 +14,7 @@ import ThemeDecorator from "@enact/sandstone/ThemeDecorator";
 import Spotlight from "@enact/spotlight";

 import appinfo from "../../webos-meta/appinfo.json";
+import { types } from "../actions/actionTypes";
 import {
  changeAppStatus,
  deleteOldDb8Datas,
@@ -24,7 +25,6 @@ import {
 } from "../actions/commonActions";
 import { getShoptimeTerms } from "../actions/empActions";
 import { getHomeMenu, getHomeTerms } from "../actions/homeActions";
-import { sendLogSecondLayer } from "../actions/logActions";
 import {
  getMyRecommandedKeyword,
  getMyUpcomingAlertShow,
@@ -40,7 +40,7 @@ import * as Config from "../utils/Config";
 import { $L, clearLaunchParams, getLaunchParams } from "../utils/helperMethods";
 import MainView from "../views/MainView/MainView";
 import css from "./App.module.less";
-import { handleDeepLink } from "./deepLinkHandler";
+import { getMenuByLinkTpCd, handleDeepLink } from "./deepLinkHandler";

 let foreGroundChangeTimer = null;

@@ -66,15 +66,23 @@ const disableConsole = () => {
 function AppBase(props) {
  const dispatch = useDispatch();
  const httpHeader = useSelector((state) => state.common.httpHeader);
-  const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion);
+  const webOSVersion = useSelector(
+    (state) => state.common.appStatus.webOSVersion
+  );
  const deviceId = useSelector((state) => state.common.appStatus.deviceId);
-  const loginUserData = useSelector((state) => state.common.appStatus.loginUserData);
-  const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
+  const loginUserData = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
+  const cursorVisible = useSelector(
+    (state) => state.common.appStatus.cursorVisible
+  );
  const introTermsAgree = useSelector((state) => state.common.introTermsAgree);

  const introTermsAgreeRef = usePrevious(introTermsAgree);
  const logEnable = useSelector((state) => state.localSettings.logEnable);
-  const oldDb8Deleted = useSelector((state) => state.localSettings.oldDb8Deleted);
+  const oldDb8Deleted = useSelector(
+    (state) => state.localSettings.oldDb8Deleted
+  );

  const deviceCountryCode = httpHeader?.["X-Device-Country"] || "";

@@ -98,9 +106,6 @@ function AppBase(props) {
      console.log("hide cursor");
    }, 5000)
  );
-  const _sendLogSecondLayer = useCallback((params) => {
-    dispatch(sendLogSecondLayer(params));
-  }, []);

  // called by [receive httpHeader, launch, relaunch]
  const initService = useCallback(
@@ -125,27 +130,17 @@ function AppBase(props) {
          dispatch(getMyUpcomingAlertShow());
        }

-        //todo deeplink
        const launchParams = getLaunchParams();
+
        console.log(
          "initService...{haveyInit, launchParams}",
          haveyInit,
          launchParams
        );

-        // if (launchParams?.contentTarget) {
-        //   dispatch(
-        //     handleDeepLink(launchParams?.contentTarget, sendLogSecondLayer)
-        //   );
-        // }
-
-        // pyh todo, edit
-        dispatch(
-          handleDeepLink(launchParams?.contentTarget, _sendLogSecondLayer)
-        );
-
-        clearLaunchParams();
+        dispatch(handleDeepLink(launchParams?.contentTarget));
        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+        clearLaunchParams();
      }
    },
    [dispatch, httpHeader]
@@ -280,10 +275,21 @@ function AppBase(props) {

  useEffect(() => {
    const launchParmas = getLaunchParams();
+    const linkTpCd = launchParmas.contentTarget
+      ? launchParmas.contentTarget.split("_")[1] || ""
+      : "";

    if (launchParmas.contentTarget) {
-      dispatch(setDeepLink(true));
+      dispatch(
+        setDeepLink({
+          contentTarget: launchParmas.contentTarget,
+          isDeepLink: true,
+        })
+      );
    }
+
+    const entryMenu = getMenuByLinkTpCd(linkTpCd);
+    dispatch({ type: types.SET_GNB_MENU, payload: entryMenu });
  }, [dispatch]);

  return (
--- a/com.twin.app.shoptime/src/App/deepLinkHandler.js
+++ b/com.twin.app.shoptime/src/App/deepLinkHandler.js
@@ -1,3 +1,4 @@
+import { setSecondLayerInfo } from "../actions/commonActions";
 import { pushPanel } from "../actions/panelActions";
 import { LOG_MENU, LOG_TP_NO, panel_names } from "../utils/Config";

@@ -38,54 +39,8 @@ export const getMenuByLinkTpCd = (linkTpCd) => {
  }
 };

-export const getMenuByTargetContent = (contentTarget) => {
-  if (!contentTarget) {
-    return LOG_MENU.HOME_TOP;
-  }
-
-  const tokken = contentTarget.split("_");
-  const type = tokken[3];
-
-  if (type === "MT") {
-    return LOG_MENU.HOME_TOP;
-  } else if (type === "PD") {
-    const patnrId = tokken[4];
-    return patnrId === "11"
-      ? LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL
-      : LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL;
-  } else if (type === "LS" || type === "VS") {
-    return LOG_MENU.FULL_SHOP_NOW;
-  } else if (type === "TD") {
-    return LOG_MENU.DETAIL_PAGE_THEME_DETAIL;
-  } else if (type === "HD") {
-    return LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL;
-  } else if (type === "HP") {
-    return LOG_MENU.HOT_PICKS;
-  } else if (type === "WE") {
-    return LOG_MENU.WELCOME_EVENT;
-  } else if (type === "OS") {
-    return LOG_MENU.ON_SALE;
-  } else if (type === "BS") {
-    return LOG_MENU.TRENDING_NOW_BEST_SELLER;
-  } else if (type === "PS") {
-    return LOG_MENU.TRENDING_NOW_POPULAR_SHOWS;
-  } else if (type === "SC") {
-    const tabType = tokken[6];
-    return tabType.toLowerCase() === "show"
-      ? LOG_MENU.CATEGORY_SHOWS
-      : LOG_MENU.CATEGORY_ITEM;
-  } else if (type === "PB") {
-    return LOG_MENU.FEATURED_BRANDS_QUICK_MENU;
-  } else if (type === "TM") {
-    return LOG_MENU.THEME_PAGE;
-  }
-
-  return null;
-};
-
 //V2_진입경로코드_진입경로명_MT_노출순번
-export const handleDeepLink =
-  (contentTarget, callback) => (dispatch, getState) => {
+export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
  let linkTpCd; // 진입경로코드
  let linkTpNm; // 진입경로명
  let type; // 링크 타입
@@ -314,17 +269,14 @@ export const handleDeepLink =
    }
  }

-    if (callback) {
-      const params = {
+  const secondLayerInfo = {
    curationId: curationId ?? "",
    curationNm: "",
-        entryMenu: getMenuByLinkTpCd(linkTpCd),
    expsOrd: expsOrd ?? "0",
    lgCatCd: lgCatCd ?? "",
    lgCatNm: lgCatNm ?? "",
    linkTpCd: linkTpCd,
    logTpNo: LOG_TP_NO.SECOND_LAYER,
-        nowMenu: getMenuByTargetContent(contentTarget),
    patncNm: "",
    patnrId: patnrId ?? "",
    prdtId: prdtId ?? "",
@@ -333,6 +285,5 @@ export const handleDeepLink =
    showNm: "",
  };

-      callback(params);
-    }
-  };
+  dispatch(setSecondLayerInfo(secondLayerInfo));
+};
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -30,6 +30,7 @@ export const types = {
  SET_SYSTEM_NOTICE: "SET_SYSTEM_NOTICE",
  SET_SYSTEM_TERMINATION: "SET_SYSTEM_TERMINATION",
  SET_DEEP_LINK: "SET_DEEP_LINK",
+  SET_SECOND_LAYER_INFO: "SET_SECOND_LAYER_INFO",

  // billing actions
  GET_MY_INFO_BILLING_SEARCH: "GET_MY_INFO_BILLING_SEARCH",
--- a/com.twin.app.shoptime/src/actions/commonActions.js
+++ b/com.twin.app.shoptime/src/actions/commonActions.js
@@ -391,11 +391,9 @@ export const addReservation = (data) => (dispatch) => {
 export const deleteReservationCallback = (scheduleIdList) => (dispatch) => {
  lunaSend.deleteReservationCallback(scheduleIdList, {
    onSuccess: (res) => {
-      // pyh todo, deleted alertToast
      // dispatch(alertToast("success" + JSON.stringify(res)));
    },
    onFailure: (err) => {
-      // pyh todo, deleted alertToast
      // dispatch(alertToast("failed" + JSON.stringify(err)));
    },
  });
@@ -437,9 +435,14 @@ export const setSystemTermination = (isinitialLoad) => ({
  payload: { isinitialLoad },
 });

-export const setDeepLink = (isDeepLink) => ({
+export const setDeepLink = (deepLinkInfo) => ({
  type: types.SET_DEEP_LINK,
-  payload: isDeepLink,
+  payload: deepLinkInfo,
+});
+
+export const setSecondLayerInfo = (secondLayerInfo) => ({
+  type: types.SET_SECOND_LAYER_INFO,
+  payload: secondLayerInfo,
 });

 //luna-send -f -n 1 luna://com.webos.service.db/delKind '{"id": "com.lgshop.app:5"}' -a "com.lgshop.app"
--- a/com.twin.app.shoptime/src/actions/logActions.js
+++ b/com.twin.app.shoptime/src/actions/logActions.js
@@ -3,6 +3,7 @@ import { TLogEvent } from "../api/TLogEvent";
 import { LOG_TP_NO } from "../utils/Config";
 import { formatGMTString } from "../utils/helperMethods";
 import { types } from "./actionTypes";
+import { setSecondLayerInfo } from "./commonActions";

 export const getUrlByLogTpNo = (logTpNo) => {
  switch (logTpNo) {
@@ -174,6 +175,7 @@ export const postLog = (params) => (dispatch, getState) => {
    onFail
  );
 };
+
 /**
 * IG-LGSP-LOG-001 / Live 시청 이력
 *
@@ -233,6 +235,7 @@ export const sendLogLive = (params, callback) => (dispatch, getState) => {
    }
  }
 };
+
 /**
 * IG-LGSP-LOG-002 / VOD 시청 이력
 *
@@ -265,7 +268,6 @@ export const sendLogLive = (params, callback) => (dispatch, getState) => {
 export const sendLogVOD = (params, callback) => (dispatch, getState) => {
  const { logTpNo, watchStrtDt } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!logTpNo || !watchStrtDt) {
    console.error("sendLogLive invalid params", params);
    return;
@@ -286,6 +288,7 @@ export const sendLogVOD = (params, callback) => (dispatch, getState) => {
    }
  }
 };
+
 /**
 * IF-LGSP-LOG-003 / Curations View 이력
 *
@@ -341,6 +344,7 @@ export const sendLogCuration = (params) => (dispatch, getState) => {

  dispatch(postLog(newParams));
 };
+
 /**
 * IF-LGSP-LOG-004 / 2ndLayer 이력
 *
@@ -375,16 +379,15 @@ export const sendLogCuration = (params) => (dispatch, getState) => {
 * (O) showNm 방송 이름
 */
 export const sendLogSecondLayer = (params) => (dispatch, getState) => {
-  const { entryMenu } = params;
-
-  if (!entryMenu) {
-    console.error("sendLogSecondLayer invalid params", params);
+  const secondLayerInfo = getState().common.secondLayerInfo;
+  if (secondLayerInfo && Object.keys(secondLayerInfo).length === 0) {
    return;
  }

-  dispatch({ type: types.SET_GNB_MENU, payload: entryMenu });
  dispatch(postLog(params));
+  dispatch(setSecondLayerInfo({}));
 };
+
 /**
 * IF-LGSP-LOG-005 / GNB 클릭 이력
 *
@@ -402,13 +405,13 @@ export const sendLogSecondLayer = (params) => (dispatch, getState) => {
 */
 export const sendLogGNB = (menu) => (dispatch, getState) => {
  const { menuMovSno, nowMenu } = getState().common.menu;
-
+  const secondLayerInfo = getState().common.secondLayerInfo;
  if (!menu) {
    console.error("sendLogGNB invalid params", menu);
    return;
  }

-  if (menu === nowMenu || menuMovSno === null || menuMovSno === undefined) {
+  if (menu === nowMenu || !menuMovSno) {
    return;
  }

@@ -420,9 +423,25 @@ export const sendLogGNB = (menu) => (dispatch, getState) => {
    nowMenu: menu,
    outDt: "",
  };
+
  dispatch({ type: types.SET_GNB_MENU, payload: menu });
  dispatch(postLog(newParams));
+
+  if (
+    [1, 2].includes(menuMovSno) &&
+    secondLayerInfo &&
+    Object.keys(secondLayerInfo).length > 0
+  ) {
+    dispatch(
+      sendLogSecondLayer({
+        ...secondLayerInfo,
+        entryMenu: nowMenu,
+        nowMenu: menu,
+      })
+    );
+  }
 };
+
 /**
 * IF-LGSP-LOG-006 / 상품 상세 이력
 *
@@ -511,7 +530,6 @@ export const sendLogProductDetail = (params) => (dispatch, getState) => {
 export const sendLogDetail = (params) => (dispatch, getState) => {
  const { logTpNo, patncNm, patnrId } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!logTpNo || !patncNm || !patnrId) {
    console.error("sendLogDetail invalid params", params);
    return;
@@ -615,7 +633,6 @@ export const sendLogShopByMobile = (params) => (dispatch, getState) => {
 export const sendLogPartners = (params) => (dispatch, getState) => {
  const { patncNm, patnrId } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!patncNm || !patnrId) {
    console.error("sendLogPartners invalid params", params);
    return;
@@ -646,7 +663,6 @@ export const sendLogPartners = (params) => (dispatch, getState) => {
 export const sendLogMyPageAlertFlag = (params) => (dispatch, getState) => {
  const { alertFlag } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!alertFlag) {
    console.error("sendLogMyPageAlertFlag invalid params", params);
    return;
@@ -676,7 +692,6 @@ export const sendLogMyPageAlertFlag = (params) => (dispatch, getState) => {
 export const sendLogMyPageMyDelete = (params) => (dispatch, getState) => {
  const { cnt } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!cnt) {
    console.error("sendLogMyPageMyDelete invalid params", params);
    return;
@@ -708,7 +723,6 @@ export const sendLogMyPageMyDelete = (params) => (dispatch, getState) => {
 export const sendLogMyPageNotice = (params) => (dispatch, getState) => {
  const { itemId, title } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!itemId || !title) {
    console.error("sendLogNoticeView invalid params", params);
    return;
@@ -796,7 +810,6 @@ export const sendLogSearch = (params) => (dispatch, getState) => {
 export const sendLogSearchClick = (params) => (dispatch, getState) => {
  const { keyword, patncNm, patnrId } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!keyword || !patncNm || !patnrId) {
    console.error("sendLogSearchClick invalid params", params);
    return;
@@ -850,24 +863,8 @@ export const sendLogSearchClick = (params) => (dispatch, getState) => {
 * (M) showNm 방송 이름
 */
 export const sendLogUpcomingFlag = (params) => (dispatch, getState) => {
-  // pyh Todo, 왜 키가 문서와 맞지 않고 1.0과 같은가..?
-  // const { alertFlag, patncNm, patnrId, remainSec, showId, showNm } = params;
-
-  // if (
-  //   !alertFlag ||
-  //   !patncNm ||
-  //   !patnrId ||
-  //   !remainSec ||
-  //   !showId ||
-  //   !showNm
-  // ) {
-  //   console.error("sendLogUpcomingFlag invalid params", params);
-  //   return;
-  // }
-
  const { items } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!items) {
    console.error("sendLogUpcomingFlag invalid params", params);
    return;
@@ -876,10 +873,7 @@ export const sendLogUpcomingFlag = (params) => (dispatch, getState) => {
  const newParams = {
    ...params,
    entryMenu: entryMenu,
-    // hstNm: params?.hstNm ?? "",
    logTpNo: LOG_TP_NO.UPCOMING_FLAG,
-    // lgCatCd: params?.lgCatCd ?? "",
-    // lgCatNm: params?.lgCatNm ?? "",
    nowMenu: nowMenu,
  };

@@ -920,7 +914,6 @@ export const sendLogUpcomingFlag = (params) => (dispatch, getState) => {
 export const sendLogAlarmPop = (params) => (dispatch, getState) => {
  const { alarmDt, alarmType, cnt, patncNm, patnrId, showId, showNm } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (
    !alarmDt ||
    !alarmType ||
@@ -946,6 +939,7 @@ export const sendLogAlarmPop = (params) => (dispatch, getState) => {

  dispatch(postLog(newParams));
 };
+
 /**
 * IF-LGSP-LOG-018 / 알람 팝업 OK/NO 클릭
 *
@@ -1120,6 +1114,7 @@ export const sendLogTopContents = (params) => (dispatch, getState) => {

  dispatch(postLog(newParams));
 };
+
 /**
 * IF-LGSP-LOG-101 / 약관 동의, 미동의 클릭 이력
 *
@@ -1132,7 +1127,6 @@ export const sendLogTopContents = (params) => (dispatch, getState) => {
 export const sendLogTerms = (params) => (dispatch, getState) => {
  const { logTpNo } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!logTpNo) {
    console.error("sendLogTerms invalid params", params);
    return;
@@ -1163,7 +1157,6 @@ export const sendLogTerms = (params) => (dispatch, getState) => {
 export const sendLogLgAccountLogin = (params) => (dispatch, getState) => {
  const { lginTpNm, usrNo } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!lginTpNm || !usrNo) {
    console.error("sendLogLgAccountLogin invalid params", params);
    return;
@@ -1194,7 +1187,6 @@ export const sendLogLgAccountLogin = (params) => (dispatch, getState) => {
 export const sendLogOrderBtnClick = (params) => (dispatch, getState) => {
  const { btnNm } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!btnNm) {
    console.error("sendLogOrderBtnClick invalid params", params);
    return;
@@ -1227,7 +1219,6 @@ export const sendLogOrderBtnClick = (params) => (dispatch, getState) => {
 export const sendLogOrderChange = (params) => (dispatch, getState) => {
  const { reqRsn, reqTpNm } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!reqRsn || !reqTpNm) {
    console.error("sendLogOrderChange invalid params", params);
    return;
@@ -1433,7 +1424,6 @@ export const sendLogPaymentComplete = (params) => (dispatch, getState) => {
 export const sendLogFeaturedBrands = (params) => (dispatch, getState) => {
  const { patncNm, patnrId } = params;
  const { entryMenu, nowMenu } = getState().common.menu;
-
  if (!patncNm || !patnrId) {
    console.error("sendLogFeaturedBrands invalid params", params);
    return;
@@ -1455,6 +1445,7 @@ export const sendLogFeaturedBrands = (params) => (dispatch, getState) => {

  dispatch(postLog(newParams));
 };
+
 /**
 * IF-LGSP-LOG-111 / 카드, 주소 ADD/EDIT 이력
 *
--- a/com.twin.app.shoptime/src/reducers/commonReducer.js
+++ b/com.twin.app.shoptime/src/reducers/commonReducer.js
@@ -51,7 +51,7 @@ const initialState = {
  check: "",

  menu: {
-    entryMenu: "App", // pyh todo
+    entryMenu: "App",
    nowMenu: "",
    menuMovSno: 0,
  },
@@ -62,7 +62,12 @@ const initialState = {
  // test
  spotlightId: null,

+  deepLinkInfo: {
+    contentTarget: "",
    isDeepLink: false,
+  },
+
+  secondLayerInfo: {},
 };

 export const commonReducer = (state = initialState, action) => {
@@ -243,7 +248,14 @@ export const commonReducer = (state = initialState, action) => {
    case types.SET_DEEP_LINK: {
      return {
        ...state,
-        isDeepLink: action.payload,
+        deepLinkInfo: action.payload,
+      };
+    }
+
+    case types.SET_SECOND_LAYER_INFO: {
+      return {
+        ...state,
+        secondLayerInfo: action.payload,
      };
    }

--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -99,7 +99,9 @@ export default function HomePanel({ isOnTop }) {
    (state) => state.product.bestSellerData?.bestSeller
  );
  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
-  const isDeepLink = useSelector((state) => state.common.isDeepLink);
+  const isDeepLink = useSelector(
+    (state) => state.common.deepLinkInfo.isDeepLink
+  );

  const [btnDisabled, setBtnDisabled] = useState(true);
  const [arrowBottom, setArrowBottom] = useState(true);
@@ -400,7 +402,7 @@ export default function HomePanel({ isOnTop }) {
        dispatch(getBestSeller(bestSellerLoaded));

        if (isDeepLink) {
-          dispatch(setDeepLink(false));
+          dispatch(setDeepLink({ contentTarget: "", isDeepLink: false }));
        }
      }
    }