[통합로그API No.15] HotPicks 화면 내에서 리모콘을 통해 상/하단 이동 시 노출되는 hotpicsk 정보 로그 수집

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

@@ -614,4 +614,6 @@ export const LOG_MESSAGE_ID = {
   TOGGLE_CLICK: "AL_TOGGLE_CLICK",
   MYPAGE_DELETE: "AL_MYPAGE_DELETE",
   MYPAGE_CLICK: "AL_MYPAGE_CLICK",
+  HOTPICKS_SHOWN: "AL_HOTPCIKS_SHOWN",
+  HOTPICKS_CLICK: "AL_HOTPICKS_CLICK",
 };

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

@@ -31,6 +31,7 @@ import {
   sendLogCuration,
   sendLogGNB,
   sendLogShopByMobile,
+  sendLogTotalRecommend,
 } from "../../actions/logActions";
 import {
   popPanel,
@@ -136,10 +137,12 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   const [smsTpCode, setSmsTpCode] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  const expsOrdRef = useRef(null);
   const shopByMobileLogRef = useRef(null);
   const spotYoffsetRef = useRef(0);
+
+  const currentCurationId = useRef(null);
   const oneLog = useRef(false);
+
   let timerRef = useRef();
 
   const _onScroll = (e) => {
@@ -163,6 +166,24 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
     setScrolling(false);
   }, []);
 
+  const onFocus = useCallback(() => {
+    const { curationId, curationNm, expsOrd } =
+      themeCurationInfoData[currentPage];
+
+    if (curationId !== currentCurationId.current) {
+      const params = {
+        contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
+        messageId: Config.LOG_MESSAGE_ID.HOTPICKS_SHOWN,
+        curationId: curationId,
+        curationTitle: curationNm,
+        location: expsOrd,
+      };
+      dispatch(sendLogTotalRecommend(params));
+
+      currentCurationId.current = curationId;
+    }
+  }, [themeCurationInfoData, currentPage, currentCurationId]);
+
   const themeCurationType = useCallback(
     (
       data,
@@ -172,11 +193,14 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       eventInfoV2,
       index
     ) => {
+      const sendLogClick = () => {
+        console.log("#sendLogClick", sendLogClick);
+      };
+
       let itemData = [];
       itemData.push(JSON.parse(JSON.stringify(data)));
 
       let Component = null;
-
       switch (templateCode) {
         case "TCFI": // Full Image
           Component = TCFI;
@@ -235,6 +259,7 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
             eventInfo={eventInfoV2}
             osVersion={osVersion}
             scrolling={scrolling}
+            sendLogClick={sendLogClick}
           />
         );
       }
@@ -257,6 +282,7 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
 
   const components = useMemo(() => {
     let comps = [];
+
     if (themeCurationInfoData) {
       comps = themeCurationInfoData.map((item, index) =>
         themeCurationType(
@@ -806,7 +832,11 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       >
         {components.length > 0
           ? components.map((component, index) => (
-              <Container key={index} className={css.sectionWrap}>
+              <Container
+                key={index}
+                className={css.sectionWrap}
+                onFocus={onFocus}
+              >
                 {currentPage === index && component}
               </Container>
             ))