theme menu 화면내 상/하단 이동시 shelf 정보

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

@@ -135,7 +135,7 @@ export default memo(function TItemCard({
             contentTitle: contentTitle,
           };
 
-          //console.log("#params", params);
+          console.log("#params", params);
           dispatch(sendLogTotalRecommend(params));
         }
       }

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

@@ -599,6 +599,7 @@ export const LOG_CONTEXT_NAME = {
   TRENDING_NOW: "shoptime.trendingnow",
   HOT_PICKS: "shoptime.hotpicks",
   SEARCH: "shoptime.search",
+  THEME_CURATION: "shoptime.themeCuration",
 };
 
 export const LOG_MESSAGE_ID = {

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

@@ -144,6 +144,7 @@ let localLaunchParams = {
   // contentTarget: "V3_3000_AD:SR_SR_1",
   // contentTarget: "V3_2006_HOMEBANNER:6241018_HP_1_1307_2",
   // contentTarget: "V3_2004_HOMEBANNER:4241101_HP_9_889",
+  contentTarget: "V3_2001_HOMEBANNER:1240712_TM_10",
 };
 
 export const getLaunchParams = () => {

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

@@ -8,7 +8,7 @@ import {
   clearThemeMenuShelfInfo,
   getThemeMenuShelfInfo,
 } from "../../actions/homeActions";
-import { sendLogGNB } from "../../actions/logActions";
+import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
 import { popPanel, updatePanel } from "../../actions/panelActions";
 import CustomImage from "../../components/CustomImage/CustomImage";
 import TBody from "../../components/TBody/TBody";
@@ -17,7 +17,12 @@ import THeader from "../../components/THeader/THeader";
 import { removeDotAndColon } from "../../components/TItemCard/TItemCard";
 import TPanel from "../../components/TPanel/TPanel";
 import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
-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 ThemeCurationContents from "./ThemeCurationContents/ThemeCurationContents";
@@ -44,9 +49,10 @@ export default function ThemeCurationPanel({ panelInfo, spotlightId }) {
   const [panelInfos, setPanelInfos] = useState();
   const [hasPanelInfo, setHasPanelInfo] = useState();
   const [previousPanelIsDetail, setPreviousPanelIsDetail] = useState();
-
+  const [currentFocusedId, setCurrentFocusedId] = useState("");
   const cbChangePageRef = useRef(null);
   const focusedContainerIdRef = useRef(0);
+  const prevShelfIndexRef = useRef(null);
 
   const timerRef = useRef(null);
 
@@ -193,6 +199,72 @@ export default function ThemeCurationPanel({ panelInfo, spotlightId }) {
     focusedContainerIdRef.current = containerId;
   }, []);
 
+  useEffect(() => {
+    const handleFocusChange = (spotlightId) => {
+      if (spotlightId !== currentFocusedId) {
+        setCurrentFocusedId(spotlightId);
+        const shelfIndex = () => {
+          const getFocusedContainerId = focusedContainerIdRef.current;
+          if (
+            getFocusedContainerId === "themeCuration_verticalPagenator" ||
+            getFocusedContainerId === "container-2"
+          ) {
+            return 0;
+          }
+          if (getFocusedContainerId.includes("theme-info")) {
+            return Number(getFocusedContainerId.replace("theme-info-", ""));
+          }
+          return;
+        };
+        const currentShelfIndex = shelfIndex();
+        if (currentShelfIndex !== prevShelfIndexRef.current) {
+          prevShelfIndexRef.current = currentShelfIndex;
+          shelfInfos?.map((item, index) => {
+            if (
+              index === currentShelfIndex ||
+              (index === 0 && currentShelfIndex === 0)
+            ) {
+              const params = {
+                curationId: themeMenuShelfInfo?.curationId,
+                curationTitle: themeMenuShelfInfo?.curationNm,
+                shelfLocation: item.shelfExpoOrd,
+                shelfId: item.shelfId,
+                shelfTitle: item.shelfNm,
+                contextName: LOG_CONTEXT_NAME.THEME_CURATION,
+                messageId: LOG_MESSAGE_ID.SHELF,
+              };
+              dispatch(sendLogTotalRecommend(params));
+            }
+          });
+        }
+      }
+    };
+
+    const checkFocus = () => {
+      const focusedElement = Spotlight.getCurrent();
+      if (focusedElement) {
+        const spotlightId = focusedElement.getAttribute("data-spotlight-id");
+        handleFocusChange(spotlightId);
+      }
+    };
+
+    const handleMouseOver = (e) => {
+      const target = e.target.closest("[data-spotlight-id]");
+      if (target) {
+        const spotlightId = target.getAttribute("data-spotlight-id");
+        handleFocusChange(spotlightId);
+      }
+    };
+
+    const intervalId = setInterval(checkFocus, 100);
+    document.addEventListener("mouseover", handleMouseOver);
+
+    return () => {
+      clearInterval(intervalId);
+      document.removeEventListener("mouseover", handleMouseOver);
+    };
+  }, [currentFocusedId, shelfInfos, themeMenuShelfInfo]);
+
   return (
     <TPanel
       className={css.tPanel}