[Log] IF-LGSP-LOG-100, 추가 시나리오 반영 (RandomUnit.jsx, RollingUnit.jsx)

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

@@ -1113,9 +1113,9 @@ export const sendLogTopContents = (params) => (dispatch, getState) => {
   const { entryMenu, nowMenu } = getState().common.menu;
   const newParams = {
     ...params,
-    entryMenu: entryMenu,
+    entryMenu: params?.entryMenu ?? entryMenu,
     outDt: formatGMTString(new Date()),
-    nowMenu: nowMenu,
+    nowMenu: params?.nowMenu ?? nowMenu,
   };
 
   dispatch(postLog(newParams));

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx

@@ -4,47 +4,32 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from "@enact/spotlight/Spottable";
-import Spottable from '@enact/spotlight/Spottable';
 
-import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png';
+import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png";
-import defaultLogoImg
+import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
-  from '../../../../assets/images/ic-tab-partners-default@3x.png';
+import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png";
-import emptyHorImage
+import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png";
-  from '../../../../assets/images/img-home-banner-empty-hor.png';
+import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png";
-import emptyVerImage
+import liveShow from "../../../../assets/images/tag-liveshow.png";
-  from '../../../../assets/images/img-home-banner-empty-ver.png';
+import { sendLogTopContents } from "../../../actions/logActions";
-import defaultImageItem
-  from '../../../../assets/images/img-thumb-empty-product@3x.png';
-import liveShow from '../../../../assets/images/tag-liveshow.png';
-import { sendLogTopContents } from '../../../actions/logActions';
 //import { sendBroadCast } from "../../../actions/commonActions";
-import { pushPanel } from '../../../actions/panelActions';
+import { pushPanel } from "../../../actions/panelActions";
 import {
   finishVideoPreview,
   startVideoPlayer,
-} from '../../../actions/playActions';
+} from "../../../actions/playActions";
-import CustomImage from '../../../components/CustomImage/CustomImage';
+import CustomImage from "../../../components/CustomImage/CustomImage";
-import usePriceInfo from '../../../hooks/usePriceInfo';
+import usePriceInfo from "../../../hooks/usePriceInfo";
-import {
+import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
-  LOG_MENU,
+import { $L, formatGMTString } from "../../../utils/helperMethods";
-  LOG_TP_NO,
+import css from "./RandomUnit.module.less";
-  panel_names,
-} from '../../../utils/Config';
-import {
-  $L,
-  formatGMTString,
-} from '../../../utils/helperMethods';
-import css from './RandomUnit.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -70,24 +55,50 @@ export default function RandomUnit({
     (state) => state.home?.bannerData?.shptmTmplCd
   );
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
+  const entryMenu = useSelector((state) => state.common.menu.entryMenu);
+
   const homeCategory = useSelector(
     (state) => state.home.menuData?.data?.homeCategory
   );
   const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
+
+  // 정상적으로 로딩되면 빈객체로 넘어가고 , 에러가 나면 객체안에 타입이 담겨옵니다.
+  const broadcast = useSelector((state) => state.common.broadcast);
+
   const [randomData, setRandomData] = useState("");
   const [priceInfos, setpriceInfos] = useState("");
   const [isFocused, setIsFocused] = useState(false);
+  const [videoError, setVideoError] = useState(false);
+  const [liveIndicies, setLiveIndicies] = useState([]);
 
   const timerRef = useRef();
   const bannerDataRef = useRef(bannerData);
   const randomDataRef = useRef(bannerDetailInfos[randomNumber]);
 
-  const [videoError, setVideoError] = useState(false);
+  const topContentsLogInfo = useMemo(() => {
+    if (curationId && curtNm) {
+      const currentRandomData = randomDataRef.current;
+      return {
+        banrNo: `${currentRandomData?.banrDpOrd}`,
+        banrTpNm: currentRandomData?.vtctpYn
+          ? currentRandomData.vtctpYn === "Y"
+            ? "Vertical"
+            : "Horizontal"
+          : "",
+        contId: curationId,
+        contNm: curtNm,
+        contTpNm: currentRandomData?.shptmBanrTpNm ?? "",
+        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
+        expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
+        linkTpCd: "", // pyh todo, get linkTpCd
+        patncNm: currentRandomData?.patncNm ?? "",
+        patnrId: currentRandomData?.patnrId ?? "",
+        tmplCd: shptmTmplCd,
+      };
+    }
 
-  const [liveIndicies, setLiveIndicies] = useState([]);
+    return {};
-
+  }, [curationId, curtNm, shptmTmplCd]);
-  // 정상적으로 로딩되면 빈객체로 넘어가고 , 에러가 나면 객체안에 타입이 담겨옵니다.
-  const broadcast = useSelector((state) => state.common.broadcast);
 
   // 1. 비디오(live) 에러 감지
   // 2. 라이브 영상이 2개 이상이면, 그 다음 영상으로 전환
@@ -116,16 +127,18 @@ export default function RandomUnit({
 
   // 포커스 인
   const onFocus = useCallback(() => {
+    setIsFocused(true);
+
     if (handleItemFocus) {
       handleItemFocus();
     }
-    setIsFocused(true);
   }, [handleItemFocus]);
 
   // 포커스 아웃
   const onBlur = useCallback(() => {
     setIsFocused(false);
     clearTimeout(timerRef.current);
+
     if (isFocused) {
       dispatch(finishVideoPreview());
     }
@@ -159,41 +172,47 @@ export default function RandomUnit({
   }, [homeCategory, randomData.shptmLnkTpCd]);
 
   // 이미지 배너 클릭
-  const imageBannerClick = () => {
+  const imageBannerClick = useCallback(() => {
-    let panelName = "";
+    let linkInfo = {};
+    const linkType = randomData.shptmLnkTpCd;
 
-    if (randomData.shptmLnkTpCd === "DSP00501") {
+    switch (linkType) {
-      return dispatch(
+      case "DSP00501":
-        pushPanel({
+        linkInfo = {
           name: panel_names.FEATURED_BRANDS_PANEL,
           panelInfo: { patnrId: randomData.patnrId },
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00502") {
+
-      panelName = panel_names.TRENDING_NOW_PANEL;
+      case "DSP00502":
-    } else if (randomData.shptmLnkTpCd === "DSP00503") {
+        linkInfo = {
-      return dispatch(
+          name: panel_names.TRENDING_NOW_PANEL,
-        pushPanel({
+          panelInfo: {},
+        };
+        break;
+
+      case "DSP00503":
+        linkInfo = {
           name: panel_names.HOT_PICKS_PANEL,
           panelInfo: {
             patnrId: randomData.patnrId,
             curationId: randomData.lnkCurationId,
           },
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00504") {
+
-      return dispatch(
+      case "DSP00504":
-        pushPanel({
+        linkInfo = {
           name: panel_names.ON_SALE_PANEL,
           panelInfo: {
             lgCatCd: randomData.lgCatCd,
           },
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00505") {
+
-      if (Object.keys(categoryData).length > 0) {
+      case "DSP00505":
-        return dispatch(
+        if (Object.keys(categoryData).length > 0) {
-          pushPanel({
+          linkInfo = {
             name: panel_names.CATEGORY_PANEL,
             panelInfo: {
               lgCatCd: randomData.lgCatCd,
@@ -204,33 +223,33 @@ export default function RandomUnit({
               tab: 0,
               focusedContainerId: null,
             },
-          })
+          };
-        );
+        }
-      }
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00506") {
+
-      return dispatch(
+      case "DSP00506":
-        pushPanel({
+        linkInfo = {
           name: panel_names.DETAIL_PANEL,
           panelInfo: {
             patnrId: randomData.patnrId,
             prdtId: randomData.prdtId,
             curationId: randomData.lnkCurationId,
           },
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00507") {
+
-      return dispatch(
+      case "DSP00507":
-        startVideoPlayer({
+        linkInfo = {
           patnrId: randomData.patnrId,
           showId: randomData.showId,
           shptmBanrTpNm: "VOD",
           lgCatCd: randomData.lgCatCd,
           modal: false,
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00508") {
+
-      return dispatch(
+      case "DSP00508":
-        pushPanel({
+        linkInfo = {
           name: panel_names.DETAIL_PANEL,
           panelInfo: {
             patnrId: randomData.patnrId,
@@ -238,31 +257,47 @@ export default function RandomUnit({
             prdtId: randomData.prdtId,
             type: "theme",
           },
-        })
+        };
-      );
+        break;
-    } else if (randomData.shptmLnkTpCd === "DSP00509") {
+
-      return dispatch(
+      case "DSP00509":
-        pushPanel({
+        linkInfo = {
           name: panel_names.THEME_CURATION_PANEL,
           panelInfo: {
             curationId: randomData.lnkCurationId,
           },
-        })
+        };
-      );
+        break;
-    } else {
+
-      panelName = panel_names.HOME_PANEL;
+      default:
+        linkInfo = {
+          name: panel_names.HOME_PANEL,
+          panelInfo: {},
+        };
+        break;
     }
 
+    let action = linkType === "DSP00507" ? startVideoPlayer : pushPanel;
+
+    dispatch(action(linkInfo));
     dispatch(
-      pushPanel({
+      sendLogTopContents({
-        name: panelName,
+        ...topContentsLogInfo,
-        panelInfo: {
+        inDt: formatGMTString(new Date()) ?? "",
-          patnrId: randomData.patnrId,
+        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
-          prdtId: randomData.prdtId,
-        },
       })
     );
-  };
+  }, [
+    categoryData,
+    dispatch,
+    randomData?.lgCatCd,
+    randomData?.lnkCurationId,
+    randomData?.patnrId,
+    randomData?.prdtId,
+    randomData?.showId,
+    randomData?.shptmLnkTpCd,
+    topContentsLogInfo,
+  ]);
 
   // 투데이즈딜 클릭
   const todayDealClick = useCallback(() => {
@@ -275,7 +310,15 @@ export default function RandomUnit({
         },
       })
     );
-  }, [dispatch, randomData?.patnrId, randomData?.prdtId]);
+
+    dispatch(
+      sendLogTopContents({
+        ...topContentsLogInfo,
+        inDt: formatGMTString(new Date()) ?? "",
+        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
+      })
+    );
+  }, [dispatch, randomData?.patnrId, randomData?.prdtId, topContentsLogInfo]);
 
   // 비디오 클릭
   const videoClick = useCallback(() => {
@@ -292,7 +335,15 @@ export default function RandomUnit({
         modalClassName: css.videoModal,
       })
     );
-  }, [randomData, spotlightId]);
+
+    dispatch(
+      sendLogTopContents({
+        ...topContentsLogInfo,
+        inDt: formatGMTString(new Date()) ?? "",
+        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
+      })
+    );
+  }, [randomData, spotlightId, topContentsLogInfo]);
 
   // 투데이즈 딜 가격 정보
   const { originalPrice, discountedPrice, discountRate, offerInfo } =
@@ -300,35 +351,21 @@ export default function RandomUnit({
 
   // 로그
   useEffect(() => {
-    if (
+    let _nowMenu = nowMenu;
-      bannerDataRef.current &&
+    let _entryMenu = entryMenu;
-      randomDataRef.current &&
+
-      nowMenu &&
+    if (nowMenu === LOG_MENU.HOME_TOP) {
-      nowMenu === LOG_MENU.HOME_TOP
-    ) {
       const params = {
-        banrNo: `${randomDataRef.current?.banrDpOrd}`,
+        ...topContentsLogInfo,
-        banrTpNm: randomDataRef.current?.vtctpYn
+        entryMenu: _entryMenu,
-          ? randomDataRef.current.vtctpYn === "Y"
+        inDt: formatGMTString(new Date()) ?? "",
-            ? "Vertical"
-            : "Horizontal"
-          : "",
-        contId: curationId ?? "",
-        contNm: curtNm ?? "",
-        contTpNm: randomDataRef.current?.shptmBanrTpNm ?? "",
-        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
-        expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
-        inDt: formatGMTString(new Date()),
-        linkTpCd: "",
         logTpNo: LOG_TP_NO.TOP_CONTENTS.VIEW,
-        patncNm: randomDataRef.current?.patncNm ?? "",
+        nowMenu: _nowMenu,
-        patnrId: randomDataRef.current?.patnrId ?? "",
-        tmplCd: shptmTmplCd,
       };
 
       return () => dispatch(sendLogTopContents(params));
     }
-  }, [curationId, curtNm, nowMenu, shptmTmplCd]);
+  }, [dispatch, entryMenu, nowMenu, topContentsLogInfo]);
 
   useEffect(() => {
     if (bannerData) {

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -77,6 +77,7 @@ export default function RollingUnit({
     (state) => state.home?.bannerData?.shptmTmplCd
   );
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
+  const entryMenu = useSelector((state) => state.common.menu.entryMenu);
 
   const homeCategory = useSelector(
     (state) => state.home.menuData?.data?.homeCategory
@@ -100,6 +101,31 @@ export default function RollingUnit({
   const bannerDataRef = useRef(bannerData);
   const rollingDataRef = useRef(rollingData);
 
+  const topContentsLogInfo = useMemo(() => {
+    if (curationId && curtNm) {
+      const currentRollingData = rollingDataRef.current[startIndex];
+      return {
+        banrNo: `${currentRollingData?.banrDpOrd}`,
+        banrTpNm: currentRollingData?.vtctpYn
+          ? currentRollingData.vtctpYn === "Y"
+            ? "Vertical"
+            : "Horizontal"
+          : "",
+        contId: curationId,
+        contNm: curtNm,
+        contTpNm: currentRollingData?.shptmBanrTpNm ?? "",
+        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
+        expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
+        linkTpCd: "",
+        patncNm: currentRollingData?.patncNm ?? "",
+        patnrId: currentRollingData?.patnrId ?? "",
+        tmplCd: shptmTmplCd,
+      };
+    }
+
+    return {};
+  }, [curationId, curtNm, shptmTmplCd, startIndex]);
+
   useEffect(() => {
     if (savedIndex !== undefined) {
       setStartIndex(savedIndex);
@@ -251,6 +277,13 @@ export default function RollingUnit({
 
     if (bannerType === "Today's Deals") {
       handlePushPanel(panel_names.DETAIL_PANEL, createPanelInfo(currentData));
+      dispatch(
+        sendLogTopContents({
+          ...topContentsLogInfo,
+          inDt: formatGMTString(new Date()) ?? "",
+          logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
+        })
+      );
       return;
     }
 
@@ -310,6 +343,14 @@ export default function RollingUnit({
       default:
         return;
     }
+
+    dispatch(
+      sendLogTopContents({
+        ...topContentsLogInfo,
+        inDt: formatGMTString(new Date()) ?? "",
+        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
+      })
+    );
   }, [
     rollingData,
     startIndex,
@@ -317,6 +358,7 @@ export default function RollingUnit({
     dispatch,
     categoryData,
     handlePushPanel,
+    topContentsLogInfo,
   ]);
 
   const videoClick = useCallback(() => {
@@ -337,7 +379,22 @@ export default function RollingUnit({
       modalContainerId: null,
       modalClassName: css.videoModal,
     });
-  }, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer]);
+
+    dispatch(
+      sendLogTopContents({
+        ...topContentsLogInfo,
+        inDt: formatGMTString(new Date()) ?? "",
+        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
+      })
+    );
+  }, [
+    rollingData,
+    startIndex,
+    bannerId,
+    dispatch,
+    handleStartVideoPlayer,
+    topContentsLogInfo,
+  ]);
 
   // 10초 롤링
   useEffect(() => {
@@ -358,32 +415,16 @@ export default function RollingUnit({
   }, [rollingDataLength, rollingFocus, animate]);
 
   useEffect(() => {
-    if (
+    let _nowMenu = nowMenu;
-      bannerDataRef.current &&
+    let _entryMenu = entryMenu;
-      rollingDataRef.current &&
-      nowMenu &&
-      nowMenu === LOG_MENU.HOME_TOP
-    ) {
-      const currentRollingData = rollingDataRef.current[startIndex];
 
+    if (nowMenu === LOG_MENU.HOME_TOP) {
       const params = {
-        banrNo: `${currentRollingData?.banrDpOrd}`,
+        ...topContentsLogInfo,
-        banrTpNm: currentRollingData?.vtctpYn
+        entryMenu: _entryMenu,
-          ? currentRollingData.vtctpYn === "Y"
+        inDt: formatGMTString(new Date()) ?? "",
-            ? "Vertical"
-            : "Horizontal"
-          : "",
-        contId: curationId ?? "",
-        contNm: curtNm ?? "",
-        contTpNm: currentRollingData?.shptmBanrTpNm ?? "",
-        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
-        expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
-        inDt: formatGMTString(new Date()),
-        linkTpCd: "",
         logTpNo: LOG_TP_NO.TOP_CONTENTS.VIEW,
-        patncNm: currentRollingData?.patncNm ?? "",
+        nowMenu: _nowMenu,
-        patnrId: currentRollingData?.patnrId ?? "",
-        tmplCd: shptmTmplCd,
       };
 
       return () => {
@@ -393,7 +434,7 @@ export default function RollingUnit({
         }
       };
     }
-  }, [curationId, curtNm, nowMenu, shptmTmplCd, startIndex]);
+  }, [dispatch, entryMenu, nowMenu, startIndex, topContentsLogInfo]);
 
   useEffect(() => {
     if (nowMenu !== LOG_MENU.HOME_TOP) {