[Log] Log, IF-LGSP-LOG-005 / GNB 클릭 이력, App 진입 유형별 파라미터에 따른 entryMenu 설정

Detail note
1. App.js, entryMenu 설정 logic 추가
2. deepLinkHandler.js, getMenuByLinkTpCd 추가
3. helperMethos.js, localLaunchParams, ThemeCurationPanel로 진입하는 case 추가

com.twin.app.shoptime/src/App/App.js

@@ -32,7 +32,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;
 
@@ -103,10 +103,10 @@ function AppBase(props) {
           }
 
           dispatch(getHomeMenu());
-
           dispatch(getMyRecommandedKeyword());
           dispatch(getMyUpcomingAlertShow());
         }
+
         //todo deeplink
         const launchParams = getLaunchParams();
         console.log(
@@ -117,6 +117,11 @@ function AppBase(props) {
 
         if (launchParams?.contentTarget) {
           //todo deeplink
+          let linkTpCd = launchParams.contentTarget.split("_")[1];
+          dispatch({
+            type: types.SET_GNB_MENU,
+            payload: getMenuByLinkTpCd(linkTpCd),
+          });
           dispatch(handleDeepLink(launchParams.contentTarget));
         }
 

com.twin.app.shoptime/src/App/deepLinkHandler.js

@@ -1,12 +1,47 @@
 import { pushPanel } from "../actions/panelActions";
-import { panel_names } from "../utils/Config";
+import { LOG_MENU, panel_names } from "../utils/Config";
+
+export const getMenuByLinkTpCd = (linkTpCd) => {
+  switch (linkTpCd) {
+    case "2000":
+      return LOG_MENU.HOME_BANNER_1;
+    case "2001":
+      return LOG_MENU.HOME_BANNER_2;
+    case "3000":
+      return LOG_MENU.TVAD_BIG_BANNER;
+    case "3001":
+      return LOG_MENU.TVAD_HOME_LAUNCHER;
+    case "3002":
+      return LOG_MENU.TVAD_WEDGE;
+    case "3003":
+      return LOG_MENU.TVAD_COMPANION;
+    case "6001":
+      return LOG_MENU.LG_CHANNEL_QVC;
+    case "6002":
+      return LOG_MENU.LG_CHANNEL_HSN;
+    case "6004":
+      return LOG_MENU.LG_CHANNEL_ONTV4U;
+    case "7000":
+      return LOG_MENU.OVERLAY;
+    case "8000":
+      return LOG_MENU.TV_2DEPTH;
+    case "8001":
+      return LOG_MENU.TV_SEARCH;
+    case "8002":
+      return LOG_MENU.TV_SEARCH;
+    case "9999":
+      return LOG_MENU.UNKNOWN;
+    default:
+      return LOG_MENU.APP;
+  }
+};
 
 //V2_진입경로코드_진입경로명_MT_노출순번
 export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
   const tokens = contentTarget.split("_");
   if (tokens[0] === "V2" || tokens[0] === "V3") {
     const linkTpCd = tokens[1]; // 진입경로코드
-    const linkTpName = tokens[2]; // 진입경로명
+    const linkTpNm = tokens[2]; // 진입경로명
     const type = tokens[3]; // 링크 타입.
     let patnrId; // 파트너아이디
     let prdtId; // 상품아이디
@@ -19,9 +54,11 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
     let lgCatCd; // LG카테고리Code
     let lgCatNm; // 서브카테고리명
     let tabType; // 카테고리 탭명
+    let lnkCurationId; // 큐래이션 아이디
 
     let panelName = "";
     let panelInfo = {};
+
     switch (type) {
       case "MT":
         // "MT": Main TOP
@@ -190,15 +227,32 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
           patnrId: patnrId,
         };
         break;
+
+      case "TC":
+        patnrId = tokens[4]; // 파트너아이디
+
+        panelName = panel_names.THEME_CURATION_PANEL;
+        panelInfo = {
+          lnkCurationId: lnkCurationId,
+        };
+        break;
     }
+
     if (panelName) {
       console.log("handleDeepLink - panelName", panelName, panelInfo);
+
       dispatch(
-        pushPanel({ name: panelName, panelInfo: { ...panelInfo, linkTpCd } })
+        pushPanel({
+          name: panelName,
+          panelInfo: { ...panelInfo, linkTpCd },
+        })
       );
-      //todo deeplink log
+
+      // todo deeplink log
     }
-  } else {
+  }
+  //
+  else {
     console.log("handleDeepLink - no target");
   }
 };

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

@@ -24,6 +24,7 @@ export const types = {
   GET_LOGIN_USER_DATA: "GET_LOGIN_USER_DATA",
   GET_TERMS_AGREE_YN: "GET_TERMS_AGREE_YN",
   SET_FOCUS: "SET_FOCUS",
+  SET_GNB_MENU: "SET_GNB_MENU",
 
   // billing actions
   GET_MY_INFO_BILLING_SEARCH: "GET_MY_INFO_BILLING_SEARCH",

com.twin.app.shoptime/src/hooks/useLogService.js

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import { types } from "../actions/actionTypes";
 import { postLog } from "../actions/logActions";
 import { LOG_TP_NO } from "../utils/Config";
 import { formatGMTString } from "../utils/helperMethods";
@@ -133,6 +134,48 @@ export default function useLogService() {
     [dispatch, entryMenuRef, nowMenuRef]
   );
 
+  /**
+   * IF-LGSP-LOG-004 / 2ndLayer 이력
+   *
+   * (O) curationId 큐레이션 아이디
+   *
+   * (O) curationNm 큐레이션 이름
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) expsOrd 전시 순번
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 이름
+   *
+   * (M) linkTpCd 딥 링크 코드
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (O) prdtId 상품 아이디
+   *
+   * (O) prdtNm 상품 이름
+   *
+   * (O) showId 방송 아이디
+   *
+   * (O) showNm 방송 이름
+   */
+  const sendLogSecondLayer = useCallback(
+    (params) => {
+      const newParams = {
+        ...params,
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch, entryMenuRef, nowMenuRef]
+  );
+
   /**
    * IF-LGSP-LOG-005 / GNB 클릭 이력
    *
@@ -169,7 +212,7 @@ export default function useLogService() {
       };
 
       dispatch(postLog(newParams));
-      dispatch({ type: "SET_GNB_MENU", payload: menu });
+      dispatch({ type: types.SET_GNB_MENU, payload: menu });
     },
     [dispatch, menuMovSnoRef, nowMenuRef]
   );
@@ -849,6 +892,50 @@ export default function useLogService() {
     [dispatch, entryMenuRef, nowMenuRef]
   );
 
+  /**
+   * IF-LGSP-LOG-100 / TOP contents 노출 이력
+   *
+   * (M) banrNo 배너 번호
+   *
+   * (M) banrTpNm 배너 유형 이름 Vertical / Horizontal
+   *
+   * (M) contId 컨텐츠 아이디
+   *
+   * (M) contNm 컨텐츠 이름
+   *
+   * (M) contTpNm 컨텐츠 타입 이름 live / image / Today's deals
+   *
+   * (M) dspyTpNm 디스플레이 유형 이름 Random / Rolling
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (M) expsOrd 노출 순서
+   *
+   * (M) inDt 진입 시간
+   *
+   * (M) linkTpCd 딥 링크 타입
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) outDt 진출 시간
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) tmplCd 템플릿 코드 DSP002 01~03
+   */
+  const sendLogTopContents = useCallback(
+    (params) => {
+      const newParams = {
+        ...params,
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch, entryMenuRef, nowMenuRef]
+  );
+
   /**
    * IF-LGSP-LOG-102 / LG Account 로그인 이력
    *
@@ -968,6 +1055,7 @@ export default function useLogService() {
   return {
     sendLogLive,
     sendLogCuration,
+    sendLogSecondLayer,
     sendLogGNB,
     sendLogProductDetail,
     sendLogDetail,
@@ -981,6 +1069,7 @@ export default function useLogService() {
     sendLogPartners,
     sendLogAlarmPop,
     sendLogAlarmClick,
+    sendLogTopContents,
     sendLogLgAccountLogin,
     sendLogFeaturedBrands,
     sendLogThemeProduct,

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

@@ -1,4 +1,5 @@
 import { types } from "../actions/actionTypes";
+import { LOG_MENU } from "../utils/Config";
 
 const initialState = {
   appStatus: {
@@ -44,7 +45,7 @@ const initialState = {
 
   menu: {
     entryMenu: "",
-    nowMenu: "App", // pyh todo, app 진입시 설정
+    nowMenu: LOG_MENU.APP,
     menuMovSno: 1,
   },
 
@@ -160,7 +161,7 @@ export const commonReducer = (state = initialState, action) => {
       };
     }
 
-    case "SET_GNB_MENU": {
+    case types.SET_GNB_MENU: {
       return {
         ...state,
         menu: {

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

@@ -100,7 +100,7 @@ export const LOG_TP_NO = {
 
   UPCOMING_FLAG: "271",
 
-  SECOND_LAYER: {},
+  SECOND_LAYER: "210",
 
   ALARM_POP: "281",
 
@@ -163,8 +163,22 @@ export const LOG_TP_NO = {
 // TV log update, 로그 layout_240509_Themepage추가.xlsx
 export const LOG_MENU = {
   APP: "App",
+  HOME_BANNER_1: "HomeBanner:1",
+  HOME_BANNER_2: "HomeBanner:2",
+  TVAD_BIG_BANNER: "TVAD:BigBanner",
+  TVAD_HOME_LAUNCHER: "TVAD:HomeLauncher",
+  TVAD_WEDGE: "TVAD:Wedge",
+  TVAD_COMPANION: "TVAD:Companion",
+  LG_CHANNEL_QVC: "LG Channel:QVC",
+  LG_CHANNEL_HSN: "LG Channel:HSN",
+  LG_CHANNEL_ONTV4U: "LG Channel:OnTV4U",
+  OVERLAY: "Overlay",
+  TV_2DEPTH: "Tv 2depth",
+  TV_SEARCH: "TV Search",
+  SYSTEM_ALERT: "System Alert",
+  UNKNOWN: "Unknown",
 
-  POP_UP: "Pop Up", // pyh ** 문의 **
+  POP_UP: "Pop Up", // 미작업
   TERMS_CONDITIONS: "Terms & Conditions", // completed
 
   HOME_TOP: "Home/Top", // completed
@@ -212,16 +226,9 @@ export const LOG_MENU = {
 
   THEME_PAGE: "Theme Page", // completed
 
-  // SingleOption
   DETAIL_PAGE_BILLING_PRODUCT_DETAIL: "Detail Page/Billing Product Detail", // completed
-
-  // UnableOption
   DETAIL_PAGE_PRODUCT_DETAIL: "Detail Page/Product Detail", // completed
-
-  // HotelProduct(HotelOption)
   DETAIL_PAGE_TRAVEL_THEME_DETAIL: "Detail Page/Travel Theme Detail", // completed
-
-  // GroupOption
   DETAIL_PAGE_GROUP_DETAIL: "Detail Page/Group Detail", // completed
 
   FULL_SHOP_NOW: "Full/Shop Now",

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

@@ -1,9 +1,9 @@
+import { Job } from "@enact/core/util";
 import Enact_$L from "@enact/i18n/$L";
 
-import stringReSourceEn from "../../resources/en/GB/strings.json";
 import stringReSourceDe from "../../resources/de/strings.json";
+import stringReSourceEn from "../../resources/en/GB/strings.json";
 import stringReSourceRu from "../../resources/ru/strings.json";
-import { Job } from "@enact/core/util";
 
 let _boundingRectCache = {};
 const BOUNDING_RECT_IGNORE_TIME = 10;
@@ -158,6 +158,7 @@ let localLaunchParams = {
   // contentTarget: "V3_8001_Tv_PS",
   // contentTarget: "V3_8001_Tv_SC_1000_Fashion_Item",
   // contentTarget: "V3_8001_Tv_FB_1",
+  // contentTarget: "V3_8001_Tv_TC_824",
 };
 
 export const getLaunchParams = () => {
@@ -325,10 +326,10 @@ export const getRectDiff = (element1, element2) => {
   const element1Rect = getBoundingClientRect(element1);
   const element2Rect = getBoundingClientRect(element2);
 
-  return ({
+  return {
     right: element1Rect.right - element2Rect.right,
     left: element1Rect.left - element2Rect.left,
     top: element1Rect.top - element2Rect.top,
     bottom: element1Rect.bottom - element2Rect.bottom,
-  });
-};
+  };
+};