From b102da39d1ed3adf0c0c5941c40cb5bbff87683e Mon Sep 17 00:00:00 2001
From: dongyoungKo <ehddud3254@naver.com>
Date: Tue, 20 May 2025 17:27:02 +0900
Subject: [PATCH] =?UTF-8?q?[=ED=86=B5=ED=95=A9=EB=A1=9C=EA=B7=B8API=20No.1?=
 =?UTF-8?q?5]=20HotPicks=20=ED=99=94=EB=A9=B4=20=EB=82=B4=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=A6=AC=EB=AA=A8=EC=BD=98=EC=9D=84=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=B4=20=EC=83=81/=ED=95=98=EB=8B=A8=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=20=EC=8B=9C=20=EB=85=B8=EC=B6=9C=EB=90=98=EB=8A=94=20hotpicsk?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EB=A1=9C=EA=B7=B8=20=EC=88=98=EC=A7=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 com.twin.app.shoptime/src/utils/Config.js     |  2 ++
 .../src/views/HotPicksPanel/HotPicksPanel.jsx | 36 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js
index 579b7617..4f249502 100644
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -614,4 +614,6 @@ export const LOG_MESSAGE_ID = {
   TOGGLE_CLICK: "AL_TOGGLE_CLICK",
   MYPAGE_DELETE: "AL_MYPAGE_DELETE",
   MYPAGE_CLICK: "AL_MYPAGE_CLICK",
+  HOTPICKS_SHOWN: "AL_HOTPCIKS_SHOWN",
+  HOTPICKS_CLICK: "AL_HOTPICKS_CLICK",
 };
diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
index 16cfed61..648cadf6 100644
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
@@ -31,6 +31,7 @@ import {
   sendLogCuration,
   sendLogGNB,
   sendLogShopByMobile,
+  sendLogTotalRecommend,
 } from "../../actions/logActions";
 import {
   popPanel,
@@ -136,10 +137,12 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   const [smsTpCode, setSmsTpCode] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  const expsOrdRef = useRef(null);
   const shopByMobileLogRef = useRef(null);
   const spotYoffsetRef = useRef(0);
+
+  const currentCurationId = useRef(null);
   const oneLog = useRef(false);
+
   let timerRef = useRef();
 
   const _onScroll = (e) => {
@@ -163,6 +166,24 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
     setScrolling(false);
   }, []);
 
+  const onFocus = useCallback(() => {
+    const { curationId, curationNm, expsOrd } =
+      themeCurationInfoData[currentPage];
+
+    if (curationId !== currentCurationId.current) {
+      const params = {
+        contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
+        messageId: Config.LOG_MESSAGE_ID.HOTPICKS_SHOWN,
+        curationId: curationId,
+        curationTitle: curationNm,
+        location: expsOrd,
+      };
+      dispatch(sendLogTotalRecommend(params));
+
+      currentCurationId.current = curationId;
+    }
+  }, [themeCurationInfoData, currentPage, currentCurationId]);
+
   const themeCurationType = useCallback(
     (
       data,
@@ -172,11 +193,14 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       eventInfoV2,
       index
     ) => {
+      const sendLogClick = () => {
+        console.log("#sendLogClick", sendLogClick);
+      };
+
       let itemData = [];
       itemData.push(JSON.parse(JSON.stringify(data)));
 
       let Component = null;
-
       switch (templateCode) {
         case "TCFI": // Full Image
           Component = TCFI;
@@ -235,6 +259,7 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
             eventInfo={eventInfoV2}
             osVersion={osVersion}
             scrolling={scrolling}
+            sendLogClick={sendLogClick}
           />
         );
       }
@@ -257,6 +282,7 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
 
   const components = useMemo(() => {
     let comps = [];
+
     if (themeCurationInfoData) {
       comps = themeCurationInfoData.map((item, index) =>
         themeCurationType(
@@ -806,7 +832,11 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       >
         {components.length > 0
           ? components.map((component, index) => (
-              <Container key={index} className={css.sectionWrap}>
+              <Container
+                key={index}
+                className={css.sectionWrap}
+                onFocus={onFocus}
+              >
                 {currentPage === index && component}
               </Container>
             ))