[통합로그API No.9] onSale 화면 내에서 리모콘으로 상/하단 이동시 노출되는 shelf 로그 정보 수집

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

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

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleContents/OnSaleContents.jsx

@@ -1,10 +1,13 @@
-import React, { memo } from "react";
+import React, { memo, useCallback } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import css from "./OnSaleContents.module.less";
 import OnSaleProductList from "./OnSaleProductList/OnSaleProductList";
+import { useDispatch } from "react-redux";
+import { sendLogTotalRecommend } from "../../../actions/logActions";
+import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from "../../../utils/Config";
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -18,12 +21,31 @@ export default memo(function OnSaleContents({
   saleNm,
   spotlightId,
   selectedLgCatCd,
+  selectedLgCatNm,
+  shelfOrder,
 }) {
+  const dispatch = useDispatch();
+
+  const onFocus = useCallback(() => {
+    const params = {
+      contextName: LOG_CONTEXT_NAME.ON_SALE,
+      messageId: LOG_MESSAGE_ID.SHELF,
+      categoryTitle: selectedLgCatNm,
+      shelfLocation: shelfOrder,
+      shelfId: selectedLgCatCd,
+      shelfTitle: saleNm,
+    };
+    dispatch(sendLogTotalRecommend(params));
+
+    console.log("#params", params);
+  }, [selectedLgCatNm, shelfOrder, selectedLgCatCd, saleNm]);
+
   return (
     <Container
       className={css.container}
       spotlightId={spotlightId}
       data-wheel-point
+      onFocus={onFocus}
     >
       <SectionTitle
         data-title-index={contentsIndex}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useEffect } from "react";
 
 import classNames from "classnames";
 import { useDispatch } from "react-redux";

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

@@ -7,7 +7,11 @@ import Spotlight from "@enact/spotlight";
 
 import { types } from "../../actions/actionTypes";
 import { changeAppStatus } from "../../actions/commonActions";
-import { sendLogCuration, sendLogGNB } from "../../actions/logActions";
+import {
+  sendLogCuration,
+  sendLogGNB,
+  sendLogTotalRecommend,
+} from "../../actions/logActions";
 import { copyCategoryInfos, getOnSaleInfo } from "../../actions/onSaleActions";
 import { popPanel, updatePanel } from "../../actions/panelActions";
 import TBody from "../../components/TBody/TBody";
@@ -104,6 +108,11 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
       if (categoryInfos) {
         dispatch(copyCategoryInfos(categoryInfos));
         setCategories(categoryInfos);
+
+        if (!selectedLgCatCd && !selectedLgCatNm) {
+          setSelectedLgCatCd(categoryInfos[0].lgCatCd);
+          setSelectedLgCatNm(categoryInfos[0].lgCatNm);
+        }
       }
     }
   }, [categories, categoryInfos, copiedCategoryInfos, previousPanelIsDetail]);
@@ -342,15 +351,17 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
               >
                 <>
                   {saleInfos.map(
-                    ({ saleNm, saleProductInfos }, contentsIndex) => (
+                    ({ saleNm, saleProductInfos, expsOrd }, contentsIndex) => (
                       <OnSaleContents
                         contentsIndex={contentsIndex}
                         isTopButtonClicked={isTopButtonClicked}
                         key={"sale-info-" + contentsIndex}
                         spotlightId={"sale-info-" + contentsIndex}
                         saleNm={saleNm}
+                        shelfOrder={expsOrd}
                         saleProductInfos={saleProductInfos}
                         selectedLgCatCd={selectedLgCatCd}
+                        selectedLgCatNm={selectedLgCatNm}
                       />
                     )
                   )}