[통합로그API No.11] TrendingNow 화면 내에서 리모콘을 통해 상/하단으로 이동 시 shelf 로그 정보 수집

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

@@ -595,6 +595,7 @@ export const LOG_CONTEXT_NAME = {
   FEATURED_BRANDS: "shoptime.featuredpartner",
   MYINFO: "shoptime.myinfo",
   ON_SALE: "shoptime.onsale",
+  TRENDING_NOW: "shoptime.trendingnow",
 };
 
 export const LOG_MESSAGE_ID = {

com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx

@@ -20,6 +20,7 @@ const PopularShowIndicator = ({
   onSpotlightRight,
   handleItemFocus,
   handleItemClick,
+  currentShelf,
   isOnTop,
 }) => {
   const {
@@ -37,7 +38,8 @@ const PopularShowIndicator = ({
   const isVertical = Boolean(vtctpYn === "Y");
 
   const _handleItemFocus = useCallback(() => {
-    if (handleItemFocus) handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS);
+    if (handleItemFocus)
+      handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS, currentShelf);
   }, [handleItemFocus]);
 
   const _handleItemClick = useCallback(() => {

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

@@ -7,7 +7,7 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
-import { sendLogGNB } from "../../actions/logActions";
+import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
 import { getTop20Show } from "../../actions/mainActions";
 import { pushPanel, updatePanel } from "../../actions/panelActions";
 import { finishVideoPreview } from "../../actions/playActions";
@@ -21,7 +21,12 @@ import TItemCard, {
 import TPanel from "../../components/TPanel/TPanel";
 import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
 import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
-import { LOG_MENU, panel_names } from "../../utils/Config";
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MENU,
+  LOG_MESSAGE_ID,
+  panel_names,
+} from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import { SpotlightIds } from "../../utils/SpotlightIds";
 import PopularShowIndicator from "./PopularShow/PopularShowIndicator";
@@ -62,6 +67,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
 
   const cbChangePageRef = useRef(null);
   const isInitialRef = useRef(true);
+  const currentSentMenuRef = useRef(null);
   const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);
 
   // effect: data fetching when no data exists in the store
@@ -129,6 +135,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
 
   const handleScroll = useCallback((e) => {
     setShowButton(e.scrollTop === 0);
+
     if (e.scrollTop !== 0) dispatch(finishVideoPreview());
   }, []);
 
@@ -188,7 +195,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
   );
 
   const handleBestSellerFocus = useCallback(() => {
-    handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
+    handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER, STRING_CONF.BEST_SELLER);
   }, [handleItemFocus]);
 
   const handleItemClick = useCallback(() => {
@@ -207,9 +214,40 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
     );
   }, [selectedIndex]);
 
-  const handleItemFocus = useCallback((nowMenu) => {
-    setTimeout(() => dispatch(sendLogGNB(nowMenu)));
-  }, []);
+  const handleItemFocus = useCallback(
+    (nowMenu, currentShelf) => {
+      setTimeout(() => dispatch(sendLogGNB(nowMenu)));
+
+      if (nowMenu !== currentSentMenuRef.current) {
+        let order;
+        let spotlightId;
+        switch (currentShelf) {
+          case STRING_CONF.POPULAR_SHOW:
+            order = 1;
+            spotlightId = SpotlightIds.TRENDING_NOW_POPULAR_SHOW;
+            break;
+          case STRING_CONF.BEST_SELLER:
+            order = 2;
+            spotlightId = SpotlightIds.TRENDING_NOW_BEST_SELLER;
+            break;
+        }
+
+        if (order && spotlightId) {
+          const params = {
+            contextName: LOG_CONTEXT_NAME.TRENDING_NOW,
+            messageId: LOG_MESSAGE_ID.SHELF_CLICK,
+            shelfLocation: order,
+            shelfId: spotlightId,
+            shelfTitle: currentShelf,
+          };
+          dispatch(sendLogTotalRecommend(params));
+
+          currentSentMenuRef.current = nowMenu;
+        }
+      }
+    },
+    [currentSentMenuRef]
+  );
 
   const handleTopButtonClick = useCallback(() => {
     if (cbChangePageRef.current) {
@@ -293,6 +331,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
                   handleItemFocus={handleItemFocus}
                   handleItemClick={handleItemClick}
                   isOnTop={isOnTop}
+                  currentShelf={STRING_CONF.POPULAR_SHOW}
                 />
               </Container>
             )}