featuredbrands

2024-07-16 15:10:10 +09:00
parent a760158713
commit c6889aa5bc
3 changed files with 393 additions and 19 deletions
--- a/com.twin.app.shoptime/src/actions/logActions.js
+++ b/com.twin.app.shoptime/src/actions/logActions.js
@@ -174,6 +174,118 @@ export const postLog = (params) => (dispatch, getState) => {
    onFail
  );
 };
+/**
+   * IG-LGSP-LOG-001 / Live 시청 이력
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 네임
+   *
+   * (M) linkTpCd 링크 타입 코드
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 네임
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) showId 쇼 아이디
+   *
+   * (M) showNm 쇼 네임
+   *
+   * (O) vdoTpNm 영상 가로 세로 여부 ("Vertical" or "Horizontal")
+   *
+   * (M) watchEndDt 시청 종료 시간
+   *
+   * (M) watchStrtDt 시청 시작 시간
+   */
+export const sendLogLive = (params, callback) => (dispatch, getState) => {
+  const { logTpNo, patncNm, patnrId, showId, showNm, watchStrtDt } = params;
+  const {entryMenu, nowMenu} = getState().common.menu;
+  if (
+    !logTpNo ||
+    !patncNm ||
+    !patnrId ||
+    !showId ||
+    // !showNm || // pyh todo, state liveShowInfos, showNm: null
+    !watchStrtDt
+  ) {
+    console.error("sendLogLive invalid params", params);
+    return;
+  }
+
+  const newParams = {
+    ...params,
+    entryMenu: params?.entryMenu ?? entryMenu,
+    nowMenu: params?.nowMenu ?? nowMenu,
+    watchEndDt: params?.watchEndDt ?? formatGMTString(new Date()),
+  };
+
+  if (newParams.watchEndDt !== watchStrtDt) {
+    dispatch(postLog(newParams));
+
+    if (callback) {
+      callback();
+    }
+  }
+};
+/**
+   * IG-LGSP-LOG-002 / VOD 시청 이력
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 이름
+   *
+   * (O) linkTpCd 딥 링크 타입
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) showId 방송 아이디 (media case: prdtId)
+   *
+   * (M) showNm 방송 이름 (media case: prdtNm)
+   *
+   * (O) vdoTpNm 영상 가로 세로 여부 ("Vertical" or "Horizontal")
+   *
+   * (M) watchEndDt 시청 종료 시간
+   *
+   * (M) watchStrtDt 시청 시작 시간
+   */
+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;
+  }
+
+  const newParams = {
+    ...params,
+    entryMenu: params?.entryMenu ?? entryMenu,
+    nowMenu: params?.nowMenu ?? nowMenu,
+    watchEndDt: params?.watchEndDt ?? formatGMTString(new Date()),
+  };
+
+  if (newParams.watchEndDt !== watchStrtDt) {
+    dispatch(postLog(newParams));
+
+    if (callback) {
+      callback();
+    }
+  }
+};
 /**
   * IF-LGSP-LOG-003 / Curations View 이력
   *
@@ -205,8 +317,7 @@ export const postLog = (params) => (dispatch, getState) => {
   */
 export const sendLogCuration = (params) => (dispatch, getState) => {
    const { logTpNo } = params;
-    const entryMenu = getState().common.menu.entryMenu;
-    const nowMenu = getState().common.menu.nowMenu;
+    const {entryMenu, nowMenu} = getState().common.menu;
    if (!logTpNo) {
      console.error("sendLogCuration invalid params", params);
      return;
@@ -230,7 +341,50 @@ export const sendLogCuration = (params) => (dispatch, getState) => {

    dispatch(postLog(newParams));
 };
+/**
+   * IF-LGSP-LOG-004 / 2ndLayer 이력
+   *
+   * (O) curationId 큐레이션 아이디
+   *
+   * (O) curationNm 큐레이션 이름
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) expsOrd 전시 순번
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 이름
+   *
+   * (M) linkTpCd 딥 링크 코드
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (O) prdtId 상품 아이디
+   *
+   * (O) prdtNm 상품 이름
+   *
+   * (O) showId 방송 아이디
+   *
+   * (O) showNm 방송 이름
+   */
+export const sendLogSecondLayer = (params) => (dispatch, getState) => {
+  const { entryMenu } = params;

+  if (!entryMenu) {
+    console.error("sendLogSecondLayer invalid params", params);
+    return;
+  }
+
+  dispatch({ type: types.SET_GNB_MENU, payload: entryMenu });
+  dispatch(postLog(params));
+};
 /**
   * IF-LGSP-LOG-005 / GNB 클릭 이력
   *
@@ -247,8 +401,7 @@ export const sendLogCuration = (params) => (dispatch, getState) => {
   * (M) outDt 진출 시간
 */
 export const sendLogGNB = (menu) => (dispatch, getState) => {
-    const nowMenu = getState().common.menu.nowMenu;
-    const menuMovSno = getState().common.menu.menuMovSno;
+    const {menuMovSno, nowMenu} = getState().common.menu;

    if (!menu) {
      console.error("sendLogGNB invalid params", menu);
@@ -274,3 +427,211 @@ export const sendLogGNB = (menu) => (dispatch, getState) => {
    dispatch({ type: types.SET_GNB_MENU, payload: menu });
    dispatch(postLog(newParams));
 }
+/**
+   * IF-LGSP-LOG-006 / 상품 상세 이력
+   *
+   * (M) befPrice 할인 전 가격
+   *
+   * (O) curationId 큐레이션 아이디
+   *
+   * (O) curationNm 큐레이션 이름
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) expsOrd 노출 순번
+   *
+   * (M) inDt 진입 시간
+   *
+   * (M) lastPrice 할인 후 가격
+   *
+   * (M) lgCatCd 카테고리 코드
+   *
+   * (M) lgCatNm 카테고리 이름
+   *
+   * (O) linkTpCd 딥 링크 타입
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) outDt 진출 시간
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) prdtId 상품 아이디
+   *
+   * (M) prdtNm 상품 이름
+   *
+   * (O) revwGrd 별점
+   *
+   * (M) rewdAplyFlag 리워드 적용 여부
+   *
+   * (M) tsvFlag TSV 여부
+   */
+export const sendLogProductDetail = (params) => (dispatch, getState) => {
+  const { logTpNo } = params;
+  const {entryMenu, nowMenu} = getState().common.menu;
+
+  const outDt =
+    logTpNo === LOG_TP_NO.PRODUCT.PRODUCT_DETAIL_IMAGE
+      ? ""
+      : formatGMTString(new Date());
+
+  const newParams = {
+    ...params,
+    entryMenu: entryMenu,
+    nowMenu: nowMenu,
+    outDt,
+  };
+
+  dispatch(postLog(newParams));
+}
+
+/**
+ * IF-LGSP-LOG-007 / Detail 상세 이력
+ *
+ * (O) curationId 큐레이션 아이디 (Theme의 경우 M, Hotel의 경우 O)
+ *
+ * (O) curationNm 큐레이션 이름 (Theme의 경우 M, Hotel의 경우 O)
+ *
+ * (M) entryMenu 진입 메뉴
+ *
+ * (M) inDt 진입 시간
+ *
+ * (O) linkTpCd 딥 링크 타입
+ *
+ * (M) logTpNo 로그 타입 넘버
+ *
+ * (M) nowMenu 현재 메뉴
+ *
+ * (M) outDt 진출 시간
+ *
+ * (M) patncNm 파트너 이름
+ *
+ * (M) patnrId 파트너 아이디
+ */
+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;
+  }
+
+  const outDt =
+    logTpNo === LOG_TP_NO.DETAIL.DETAIL_BUTTON_CLICK
+      ? ""
+      : formatGMTString(new Date());
+
+  const newParams = {
+    ...params,
+    entryMenu: entryMenu,
+    nowMenu: nowMenu,
+    outDt,
+  };
+
+  dispatch(postLog(newParams));
+};
+
+/**
+ * IF-LGSP-LOG-008 / Shop by mobile 이력
+ *
+ * (M) befPrice 할인 전 가격
+ *
+ * (O) curationId 큐레이션 아이디
+ *
+ * (O) curationNm 큐레이션 이름
+ *
+ * (M) entryMenu 진입 메뉴
+ *
+ * (O) evntId 이벤트 아이디
+ *
+ * (O) evntNm 이벤트 이름
+ *
+ * (M) lastPrice 할인 후 가격
+ *
+ * (O) lgCatCd 카테고리 코드
+ *
+ * (O) lgCatNm 카테고리 이름
+ *
+ * (O) liveFlag 라이브 여부
+ *
+ * (M) logTpNo 로그 타입 넘버
+ *
+ * (M) mbphNoFlag 전화 번호 여부 (모바일 폰 넘버 플래그)
+ *
+ * (M) nowMenu 현재 메뉴
+ *
+ * (M) patncNm 파트너 이름
+ *
+ * (M) patnrId 파트너 아이디
+ *
+ * (O) prdtId 상품 아이디
+ *
+ * (O) prdtNm 상품 이름
+ *
+ * (O) revwGrd 별점 (리뷰 그레이드)
+ *
+ * (M) rewdAplyFlag 리워드 적용 여부
+ *
+ * (M) shopByMobileFlag 샵 바이 모바일 여부
+ *
+ * (M) shopTpNm 샵 바이 모바일 타입 이름
+ *
+ * (O) showId 방송 아이디
+ *
+ * (O) showNm 방송 이름
+ *
+ * (M) trmsAgrFlag 약관 동의 여부
+ *
+ * (M) tsvFlag TSV 여부
+ */
+export const sendLogShopByMobile = (params) => (dispatch, getState) => {
+  const { logTpNo } = params;
+  const {entryMenu, nowMenu} = getState().common.menu;
+
+  const newParams = {
+    ...params,
+    entryMenu: entryMenu,
+    logTpNo,
+    nowMenu: nowMenu,
+  };
+
+  dispatch(postLog(newParams));
+}
+
+/**
+ * IF-LGSP-LOG-009 / Partners 클릭 이력
+ *
+ * (M) entryMenu 진입 메뉴
+ *
+ * (M) logTpNo 로그 타입 넘버
+ *
+ * (M) nowMenu 현재 메뉴
+ *
+ * (M) patncNm 파트너 네임
+ *
+ * (M) patnrId 파트너 아이디
+ */
+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;
+  }
+
+  const newParams = {
+    entryMenu: entryMenu,
+    logTpNo: LOG_TP_NO.PARTNERS,
+    nowMenu: nowMenu,
+    patncNm,
+    patnrId,
+  };
+
+  dispatch(postLog(newParams));
+};
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -56,6 +56,7 @@ import Series from "./Series/Series";
 import Showroom from "./Showroom/Showroom";
 import TodaysDeals from "./TodaysDeals/TodaysDeals";
 import UpComing from "./UpComing/UpComing";
+import { sendLogGNB, sendLogPartners } from "../../actions/logActions";

 const STRING_CONF = {
  CANCEL: "CANCEL",
@@ -174,13 +175,11 @@ const getMessageByPopupType = (type) => {
  }
 };

-export default function FeaturedBrandsPanel({
+const FeaturedBrandsPanel = ({
  isOnTop,
  panelInfo,
  spotlightId,
-}) {
-  const { sendLogGNB, sendLogPartners } = useLogService();
-
+}) => {
  const dispatch = useDispatch();

  const activePopup = useSelector((state) => state.common.popup.activePopup);
@@ -494,16 +493,15 @@ export default function FeaturedBrandsPanel({

  useEffect(() => {
    if (isInitialFocusOccurred && selectedPatnrId && selectedPatncNm) {
-      sendLogPartners({
+      dispatch(sendLogPartners({
        patncNm: selectedPatncNm,
        patnrId: selectedPatnrId,
-      });
+      }));
    }
  }, [
    isInitialFocusOccurred,
    selectedPatnrId,
-    selectedPatncNm,
-    sendLogPartners,
+    selectedPatncNm
  ]);

  useEffect(() => {
@@ -629,9 +627,9 @@ export default function FeaturedBrandsPanel({

  const handleItemFocus = useCallback(
    (nowMenu) => {
-      sendLogGNB(nowMenu);
+      dispatch(sendLogGNB(nowMenu));
    },
-    [sendLogGNB]
+    []
  );

  const onFocusedContainerId = useCallback((containerId) => {
@@ -899,3 +897,20 @@ export default function FeaturedBrandsPanel({
    </TPanel>
  );
 }
+const propsAreEqual = (prev, next) => {
+  const keys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+  if(!next.isOnTop){ //ignore event on background
+    return true;
+  }
+  if(keys.length !== nextKeys.length){
+    return false;
+  }
+  for(let i=0; i<keys.length; i++){
+    if(prev[keys[i]] !== next[keys[i]]){
+      return false;
+    }
+  }
+  return true;
+}
+export default React.memo(FeaturedBrandsPanel, propsAreEqual);
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -34,7 +34,6 @@ import TPanel from "../../components/TPanel/TPanel";
 import TPopUp from "../../components/TPopUp/TPopUp";
 import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
 import useDebugKey from "../../hooks/useDebugKey";
-import useLogService from "../../hooks/useLogService";
 import usePrevious from "../../hooks/usePrevious";
 import { ACTIVE_POPUP, LOG_MENU, panel_names } from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
@@ -46,6 +45,7 @@ import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
 import EventPopUpBanner from "./EventPopUpBanner/EventPopUpBanner";
+import { sendLogGNB } from "../../actions/logActions";

 const TEMPLATE_CODE_CONF = {
  TOP: "DSP00101",
@@ -58,8 +58,6 @@ const TEMPLATE_CODE_CONF = {
 export default function HomePanel({ isOnTop }) {
  const dispatch = useDispatch();

-  const { sendLogGNB } = useLogService();
-
  useDebugKey({ isLandingPage: true });

  const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
@@ -207,11 +205,11 @@ export default function HomePanel({ isOnTop }) {
          break;
      }
      if (nowMenu && nowMenu !== sendedNowMenuRef.current) {
-        sendLogGNB(nowMenu);
+        dispatch(sendLogGNB(nowMenu));
        sendedNowMenuRef.current = nowMenu;
      }
    },
-    [pageSpotIds, sendLogGNB]
+    [pageSpotIds]
  );

  const handleItemFocus = useCallback(