From 9d53937d656014696ab0f8f04c5c78ffd6da2842 Mon Sep 17 00:00:00 2001 From: Dev TWIN0906 Date: Thu, 22 May 2025 17:00:35 +0900 Subject: [PATCH] =?UTF-8?q?theme=20menu=20=ED=99=94=EB=A9=B4=EB=82=B4=20?= =?UTF-8?q?=EC=83=81/=ED=95=98=EB=8B=A8=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20sh?= =?UTF-8?q?elf=20=EC=A0=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TItemCard/TItemCard.jsx | 2 +- com.twin.app.shoptime/src/utils/Config.js | 1 + .../src/utils/helperMethods.js | 1 + .../ThemeCurationPanel/ThemeCurationPanel.jsx | 78 ++++++++++++++++++- 4 files changed, 78 insertions(+), 4 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx index 1b66a38c..d20aa911 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx +++ b/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)); } } diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index 1e424f28..212c532d 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/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 = { diff --git a/com.twin.app.shoptime/src/utils/helperMethods.js b/com.twin.app.shoptime/src/utils/helperMethods.js index f401db85..e5dcd1b3 100644 --- a/com.twin.app.shoptime/src/utils/helperMethods.js +++ b/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 = () => { diff --git a/com.twin.app.shoptime/src/views/ThemeCurationPanel/ThemeCurationPanel.jsx b/com.twin.app.shoptime/src/views/ThemeCurationPanel/ThemeCurationPanel.jsx index c43a37a7..d553a9cc 100644 --- a/com.twin.app.shoptime/src/views/ThemeCurationPanel/ThemeCurationPanel.jsx +++ b/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 (