[통합로그API No.16] HotPicks 화면 내에서 content 클릭 시 로그 정보 수집

com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx

@@ -191,10 +191,21 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       showEffectiveFlag,
       smsBtnExpsFlag,
       eventInfoV2,
+      curationId,
+      curationNm,
+      expsOrd,
       index
     ) => {
       const sendLogClick = () => {
-        console.log("#sendLogClick", sendLogClick);
+        const params = {
+          contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
+          messageId: Config.LOG_MESSAGE_ID.HOTPICKS_CLICK,
+          curationId: curationId,
+          curationTitle: curationNm,
+          location: expsOrd,
+        };
+
+        dispatch(sendLogTotalRecommend(params));
       };
 
       let itemData = [];
@@ -291,6 +302,9 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
           item.showEffectiveFlag,
           item.smsBtnExpsFlag,
           item.eventInfoV2,
+          item.curationId,
+          item.curationNm,
+          item.expsOrd,
           index
         )
       );

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx

@@ -35,6 +35,7 @@ export default function TCFI({
   changePop,
   osVersion,
   eventInfo,
+  sendLogClick,
 }) {
   const bgImgNm = data && data[0].bgImgNo !== null ? data[0].bgImgNo : null;
   let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
@@ -48,9 +49,14 @@ export default function TCFI({
   const currentSmsRetCode = usePrevious(smsRetCode);
 
   const dispatch = useDispatch();
-  const handleItemClick = () => {
+
+  const handleItemClick = useCallback(() => {
     const { evntTpCd, evntId, patnrId, curationId, curationNm, eventInfoV2 } =
       data[0];
+    if (sendLogClick) {
+      sendLogClick();
+    }
+
     if (
       eventInfo?.evntTpCd === "EVT00102" ||
       eventInfo?.evntTpCd === "EVT00104"
@@ -61,7 +67,7 @@ export default function TCFI({
       handelEvent();
       setClickEvt(false);
     }
-  };
+  }, [dispatch, sendLogClick, eventInfo]);
 
   const changePopTCFI = useCallback(
     (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx

@@ -1,18 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../../../assets/images/img-thumb-empty-product@3x.png';
-import { pushPanel } from '../../../../actions/panelActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import { panel_names } from '../../../../utils/Config';
-import css from './TCFI_2.module.less';
+import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
+import { pushPanel } from "../../../../actions/panelActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import { panel_names } from "../../../../utils/Config";
+import css from "./TCFI_2.module.less";
 
 const SpottableComponent = Spottable("li");
 
@@ -31,12 +29,17 @@ export default function TCFI_2({
   onSpotlightDown,
   onSpotlightUp,
   onItemClick,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
   const handleItemClick = (prdtId) => {
     if (onItemClick) {
       onItemClick();
     }
+
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,
@@ -55,6 +58,10 @@ export default function TCFI_2({
     if (onItemClick) {
       onItemClick();
     }
+
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx

@@ -1,18 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../../../assets/images/img-thumb-empty-product@3x.png';
-import { pushPanel } from '../../../../actions/panelActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import { panel_names } from '../../../../utils/Config';
-import css from './TCFI_3.module.less';
+import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
+import { pushPanel } from "../../../../actions/panelActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import { panel_names } from "../../../../utils/Config";
+import css from "./TCFI_3.module.less";
 
 const SpottableComponent = Spottable("li");
 const Container = SpotlightContainerDecorator(
@@ -29,12 +27,17 @@ export default function TCFI_3({
   onSpotlightDown,
   onSpotlightUp,
   onItemClick,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
   const handleItemClick = (prdtId) => {
     if (onItemClick) {
       onItemClick();
     }
+    if (sendLogClick) {
+      sendLogClick();
+    }
+
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,
@@ -53,6 +56,10 @@ export default function TCFI_3({
     if (onItemClick) {
       onItemClick();
     }
+
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx

@@ -1,19 +1,17 @@
 // @@@ 포커스 처리 남음
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../../../assets/images/img-thumb-empty-product@3x.png';
-import { pushPanel } from '../../../../actions/panelActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import { panel_names } from '../../../../utils/Config';
-import css from './TCFI_4.module.less';
+import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
+import { pushPanel } from "../../../../actions/panelActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import { panel_names } from "../../../../utils/Config";
+import css from "./TCFI_4.module.less";
 
 const SpottableComponent = Spottable("li");
 
@@ -31,12 +29,17 @@ export default function TCFI_4({
   onSpotlightDown,
   onSpotlightUp,
   onItemClick,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
   const handleItemClick = (prdtId) => {
     if (onItemClick) {
       onItemClick();
     }
+
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,
@@ -52,6 +55,9 @@ export default function TCFI_4({
     );
   };
   const handleHotelClick = (hotelId) => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     if (onItemClick) {
       onItemClick();
     }

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx

@@ -36,6 +36,7 @@ export default function TCFV({
   onSpotlightUp,
   currentPage,
   onItemClick,
+  sendLogClick,
   mobilePop,
   changePop,
   eventInfo,
@@ -60,6 +61,9 @@ export default function TCFV({
     if (onItemClick) {
       onItemClick();
     }
+    if (sendLogClick) {
+      sendLogClick();
+    }
     if (osVersion === false) {
       if (mobilePop !== "Y") {
         dispatch(
@@ -122,6 +126,9 @@ export default function TCFV({
   };
 
   const handleVideoClick = useCallback(() => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       startVideoPlayer({
         showId: data[0].showId,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx

@@ -35,6 +35,7 @@ export default function TCFV_2({
   onSpotlightUp,
   currentPage,
   scrolling = false,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
 
@@ -45,7 +46,11 @@ export default function TCFV_2({
 
   const spotName = "hotpicks-data-spot" + orders;
 
-  const handleItemClick = (prdtId) => {
+  const handleItemClick = useCallback(
+    (prdtId) => {
+      if (sendLogClick) {
+        sendLogClick();
+      }
       dispatch(finishVideoPreview());
       dispatch(
         pushPanel({
@@ -60,8 +65,14 @@ export default function TCFV_2({
           },
         })
       );
-  };
-  const handleHotelClick = (hotelId) => {
+    },
+    [sendLogClick]
+  );
+  const handleHotelClick = useCallback(
+    (hotelId) => {
+      if (sendLogClick) {
+        sendLogClick();
+      }
       dispatch(finishVideoPreview());
       dispatch(
         pushPanel({
@@ -75,9 +86,14 @@ export default function TCFV_2({
           },
         })
       );
-  };
+    },
+    [sendLogClick]
+  );
 
   const handleVideoClick = useCallback(() => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       startVideoPlayer({
         showId: data[0].showId,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx

@@ -43,6 +43,7 @@ export default function TCFV_3({
   onSpotlightUp,
   currentPage,
   scrolling = false,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
 
@@ -55,6 +56,9 @@ export default function TCFV_3({
   const spotName = "hotpicks-data-spot" + orders;
 
   const handleItemClick = (prdtId) => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(finishVideoPreview());
     dispatch(
       pushPanel({
@@ -71,6 +75,9 @@ export default function TCFV_3({
     );
   };
   const handleHotelClick = (hotelId) => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(finishVideoPreview());
     dispatch(
       pushPanel({
@@ -87,6 +94,9 @@ export default function TCFV_3({
   };
 
   const handleVideoClick = useCallback(() => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       startVideoPlayer({
         showId: data[0].showId,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx

@@ -35,6 +35,7 @@ export default function TCFV_4({
   onSpotlightDown,
   onSpotlightUp,
   currentPage,
+  sendLogClick,
   scrolling = false,
 }) {
   const dispatch = useDispatch();
@@ -46,6 +47,9 @@ export default function TCFV_4({
   const spotName = "hotpicks-data-spot" + orders;
 
   const handleItemClick = (prdtId) => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(finishVideoPreview());
     dispatch(
       pushPanel({
@@ -63,6 +67,9 @@ export default function TCFV_4({
   };
 
   const handleHotelClick = (hotelId) => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(finishVideoPreview());
     dispatch(
       pushPanel({
@@ -79,6 +86,9 @@ export default function TCFV_4({
   };
 
   const handleVideoClick = useCallback(() => {
+    if (sendLogClick) {
+      sendLogClick();
+    }
     dispatch(
       startVideoPlayer({
         showId: data[0].showId,

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx

@@ -1,18 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../../../assets/images/img-thumb-empty-product@3x.png';
-import { pushPanel } from '../../../../actions/panelActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import { panel_names } from '../../../../utils/Config';
-import css from './TCHH.module.less';
+import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
+import { pushPanel } from "../../../../actions/panelActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import { panel_names } from "../../../../utils/Config";
+import css from "./TCHH.module.less";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -30,6 +28,7 @@ export default function TCHH({
   onSpotlightDown,
   onSpotlightUp,
   onItemClick,
+  sendLogClick,
 }) {
   const dispatch = useDispatch();
 
@@ -42,6 +41,10 @@ export default function TCHH({
       if (onItemClick) {
         onItemClick();
       }
+
+      if (sendLogClick) {
+        sendLogClick();
+      }
       dispatch(
         pushPanel({
           name: panel_names.DETAIL_PANEL,