통합로그 피드백 : shelf_shown, shelf_click 관련 수정

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -119,7 +119,6 @@ export default memo(function TItemCard({
 
       if (onClick) {
         onClick(e);
-
         if (contextName && messageId) {
           const params = {
             contextName: contextName,
@@ -142,7 +141,7 @@ export default memo(function TItemCard({
             curationId: curationId,
             curationTitle: curationTitle,
           };
-
+          console.log("###shelfContentClick", params);
           dispatch(sendLogTotalRecommend(params));
         }
       }
@@ -173,8 +172,8 @@ export default memo(function TItemCard({
         ? " " + offerInfo
         : ""
       : originalPrice
-      ? " Original price " + originalPrice + ", "
-      : "";
+        ? " Original price " + originalPrice + ", "
+        : "";
   const lastLabeltext = lastLabel ? lastLabel : "";
   const firstLabeltext = firstLabel ? firstLabel + " " : "";
   const soldOutText = soldoutFlag === "Y" ? "Sold Out " : "";

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

@@ -1,11 +1,11 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useState, useRef } 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 { useDispatch, useSelector } from "react-redux";
 import { sendLogTotalRecommend } from "../../../actions/logActions";
 import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from "../../../utils/Config";
 
@@ -23,20 +23,33 @@ export default memo(function OnSaleContents({
   selectedLgCatCd,
   selectedLgCatNm,
   shelfOrder,
+  onShelfFocus,
 }) {
   const dispatch = useDispatch();
 
   const onFocus = useCallback(() => {
-    const params = {
-      contextName: LOG_CONTEXT_NAME.ON_SALE,
-      messageId: LOG_MESSAGE_ID.SHELF,
-      category: selectedLgCatNm,
-      shelfLocation: shelfOrder,
-      shelfId: selectedLgCatCd,
-      shelfTitle: saleNm,
-    };
-    dispatch(sendLogTotalRecommend(params));
-  }, [selectedLgCatNm, shelfOrder, selectedLgCatCd, saleNm]);
+    // 부모 컴포넌트에서 shelf 포커스
+    const shouldDispatch = onShelfFocus ? onShelfFocus(shelfOrder) : true;
+    if (shouldDispatch) {
+      const params = {
+        contextName: LOG_CONTEXT_NAME.ON_SALE,
+        messageId: LOG_MESSAGE_ID.SHELF,
+        category: selectedLgCatNm,
+        shelfLocation: shelfOrder,
+        shelfId: selectedLgCatCd,
+        shelfTitle: saleNm,
+      };
+      console.log("###shelfListShown", params);
+      dispatch(sendLogTotalRecommend(params));
+    }
+  }, [
+    shelfOrder,
+    selectedLgCatNm,
+    selectedLgCatCd,
+    saleNm,
+    dispatch,
+    onShelfFocus,
+  ]);
 
   return (
     <Container

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

@@ -179,7 +179,7 @@ export default function OnSaleProductList({
           category={selectedLgCatNm}
           patnerName={patncNm}
           brandName={brndNm}
-          order={contentsIndex + 1}
+          order={index + 1}
           className={css.tItemCard}
           data-lg-category-code={lgCatCd}
           data-exposure-order={contentsIndex + 1}
@@ -196,7 +196,15 @@ export default function OnSaleProductList({
         />
       );
     },
-    [contentsIndex, handleClick, saleProductInfos]
+    [
+      contentsIndex,
+      handleClick,
+      saleProductInfos,
+      selectedLgCatNm,
+      shelfOrder,
+      shelfTitle,
+      spotlightId,
+    ]
   );
 
   return (

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

@@ -53,6 +53,7 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
   const [selectedLgCatCd, setSelectedLgCatCd] = useState();
   const [selectedLgCatNm, setSelectedLgCatNm] = useState();
   const [spotlightDisabled, setSpotlightDisabled] = useState(true);
+  const [currentFocusedShelf, setCurrentFocusedShelf] = useState(null);
 
   const enteredThroughEventPopup = Object.keys(panelInfo).length === 1;
   const enteredThroughGNB = Object.keys(panelInfo).length === 0;
@@ -300,6 +301,18 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
     }
   }, []);
 
+  const handleShelfFocus = useCallback(
+    (shelfOrder) => {
+      // 현재 포커스된 shelf와 다른 shelf에 포커스될 때만 true 반환
+      if (currentFocusedShelf !== shelfOrder) {
+        setCurrentFocusedShelf(shelfOrder);
+        return true; // dispatch 해야 함
+      }
+      return false; // dispatch 하지 않음
+    },
+    [currentFocusedShelf]
+  );
+
   const handleCancel = useCallback(
     (e) => {
       if (panelInfo.nowShelf) {
@@ -372,6 +385,7 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
                         saleProductInfos={saleProductInfos}
                         selectedLgCatCd={selectedLgCatCd}
                         selectedLgCatNm={selectedLgCatNm}
+                        onShelfFocus={handleShelfFocus}
                       />
                     )
                   )}