[Log] Log, IF-LGSP-LOG-005, HomePanel 반영

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -13,7 +13,7 @@ import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
-import { panel_names } from "../../../utils/Config";
+import { LOG_MENU, panel_names } from "../../../utils/Config";
 import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
@@ -23,55 +23,66 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
+const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => {
-  const dispatch = useDispatch();
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData?.bestSeller
-  );
-  const [drawChk, setDrawChk] = useState(false);
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
   const { scrollTopByDistance } = useScrollTopByDistance();
+
+  const dispatch = useDispatch();
+
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
+
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData?.bestSeller
+  );
+
+  const [drawChk, setDrawChk] = useState(false);
+
+  const orderStyle = useMemo(() => ({ order: order }), [order]);
+
   useEffect(() => {
     setDrawChk(true);
   }, [bestSellerDatas]);
-  const handleCardClick = useCallback((patnrId, prdtId) => {
+
-    dispatch(
+  const handleCardClick = useCallback(
-      pushPanel(
+    (patnrId, prdtId) => () => {
-        {
+      dispatch(
+        pushPanel({
           name: panel_names.DETAIL_PANEL,
           panelInfo: { patnrId: patnrId, prdtId: prdtId },
-        },
+        })
-        [dispatch]
+      );
-      )
+    },
-    );
+    [dispatch]
-  });
+  );
+
   const handleMoreCardClick = useCallback(() => {
     dispatch(
-      pushPanel(
+      pushPanel({
-        {
+        name: panel_names.TRENDING_NOW_PANEL,
-          name: panel_names.TRENDING_NOW_PANEL,
+        panelInfo: {
-          panelInfo: {
+          pageName: "BS",
-            pageName: "BS",
-          },
         },
-        [dispatch]
+      })
-      )
     );
-  });
+  }, [dispatch]);
 
-  const handleBlur = useCallback((itemIndex) => {
+  const handleBlur = useCallback(
-    if (itemIndex === 0) {
+    (itemIndex) => () => {
-      handleStopScrolling();
+      if (itemIndex === 0) {
-    }
+        handleStopScrolling();
-  }, []);
+      }
+    },
+    [handleStopScrolling]
+  );
 
   const handleFocus = useCallback(
-    (itemIndex) => {
+    (itemIndex) => () => {
+      _handleItemFocus();
+
       if (itemIndex === 0) {
         handleScrollReset();
       }
@@ -87,10 +98,15 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
         36
       );
     },
-    [cursorVisible]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
 
-  const orderStyle = useMemo(() => ({ order: order }), [order]);
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
     const x = container.scrollWidth - container.clientWidth + 60;
@@ -99,6 +115,13 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
       scrollLeft({ x, animate: true });
     });
   };
+
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_BEST_SELLER);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container className={css.bestSellerWrap} style={orderStyle}>
       <SectionTitle
@@ -135,9 +158,9 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
                 isBestSeller={true}
                 productId={prdtId}
                 rank={rankOrd}
-                onFocus={() => handleFocus(itemIndex)}
+                onFocus={handleFocus(itemIndex)}
-                onBlur={() => handleBlur(itemIndex)}
+                onBlur={handleBlur(itemIndex)}
-                onClick={() => handleCardClick(patnrId, prdtId)}
+                onClick={handleCardClick(patnrId, prdtId)}
                 offerInfo={offerInfo}
                 spotlightId={"bestsellerItem" + itemIndex}
               />

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -13,6 +13,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import css from "./HomeBanner.module.less";
 import Random from "./RandomUnit";
 import Rolling from "./RollingUnit";
+import { LOG_MENU } from "../../../utils/Config";
 
 const SpottableComponent = Spottable("div");
 
@@ -31,6 +32,7 @@ export default function HomeBanner({
   selectTemplate,
   order,
   firstSpot,
+  handleItemFocus,
 }) {
   const dispatch = useDispatch();
   const { handleScrollReset, handleStopScrolling } =
@@ -162,6 +164,12 @@ export default function HomeBanner({
   const forthBanner = homeMainContentsBannerInfos ? templateBanner(3) : null;
   const orderStyle = useMemo(() => ({ order: order }), [order]);
 
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_TOP);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container className={css.container} spotlightId={"top"} style={orderStyle}>
       <div className={css.homeTemplateBox}>
@@ -183,6 +191,7 @@ export default function HomeBanner({
                 isHorizontal={true}
                 spotlightId={"banner01"}
                 scrollTopBody={scrollTopBody}
+                handleItemFocus={_handleItemFocus}
               />
             ) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? (
               <Random
@@ -190,6 +199,7 @@ export default function HomeBanner({
                 isHorizontal={true}
                 spotlightId={"banner01"}
                 scrollTopBody={scrollTopBody}
+                handleItemFocus={_handleItemFocus}
               />
             ) : (
               <SpottableComponent
@@ -210,6 +220,7 @@ export default function HomeBanner({
                 isHorizontal={true}
                 spotlightId={"banner02"}
                 scrollTopBody={scrollTopBody}
+                handleItemFocus={_handleItemFocus}
               />
             ) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? (
               <Random
@@ -217,6 +228,7 @@ export default function HomeBanner({
                 isHorizontal={true}
                 spotlightId={"banner02"}
                 scrollTopBody={scrollTopBody}
+                handleItemFocus={_handleItemFocus}
               />
             ) : (
               <SpottableComponent
@@ -247,6 +259,7 @@ export default function HomeBanner({
               isHorizontal={false}
               spotlightId={"banner03"}
               scrollTopBody={scrollTopBody}
+              handleItemFocus={_handleItemFocus}
             />
           ) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? (
             <Random
@@ -254,6 +267,7 @@ export default function HomeBanner({
               isHorizontal={false}
               spotlightId={"banner03"}
               scrollTopBody={scrollTopBody}
+              handleItemFocus={_handleItemFocus}
             />
           ) : (
             <SpottableComponent
@@ -283,6 +297,7 @@ export default function HomeBanner({
               isHorizontal={false}
               spotlightId={"banner04"}
               scrollTopBody={scrollTopBody}
+              handleItemFocus={_handleItemFocus}
             />
           ) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? (
             <Random
@@ -290,6 +305,7 @@ export default function HomeBanner({
               isHorizontal={false}
               spotlightId={"banner04"}
               scrollTopBody={scrollTopBody}
+              handleItemFocus={_handleItemFocus}
             />
           ) : (
             <SpottableComponent

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx

@@ -35,6 +35,7 @@ export default function RandomUnit({
   spotlightId,
   scrollTopBody,
   isHorizontal,
+  handleItemFocus,
 }) {
   const bannerDetailInfos = bannerData.bannerDetailInfos;
 
@@ -122,10 +123,14 @@ export default function RandomUnit({
   }, [isFocused, dispatch]);
 
   // 포커스 인
-  const onFocus = (ev) => {
+  const onFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus();
+    }
+
     setIsFocused(true);
     handleScrollReset();
-  };
+  }, [handleItemFocus, handleScrollReset]);
 
   // 포커스 아웃
   const onBlur = (ev) => {

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -32,13 +32,14 @@ export default function RollingUnit({
   spotlightId,
   scrollTopBody,
   isHorizontal,
+  handleItemFocus,
 }) {
   const rollingData = bannerData.bannerDetailInfos;
   const rollingDataLength = bannerData.bannerDetailInfos.length;
 
   const [startIndex, setStartIndex] = useState(0);
   const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
-  const [rollingFocus, setrollingFocus] = useState(false);
+  const [rollingFocus, setRollingFocus] = useState(false);
   const [contentsFocus, setContentsFocus] = useState(false);
   const [prevFocus, setPrevFocus] = useState(false);
   const [nextFocus, setNextFocus] = useState(false);
@@ -59,9 +60,9 @@ export default function RollingUnit({
   };
 
   // 롤링 시작 여부 true = stop, false = start
-  const rollingStart = (focus) => {
+  const rollingStart = useCallback((focus) => {
-    setrollingFocus(focus);
+    setRollingFocus(focus);
-  };
+  }, []);
 
   // 롤링 이전 버튼
   const handlePrev = useCallback(() => {
@@ -82,16 +83,20 @@ export default function RollingUnit({
   }, [startIndex]);
 
   // 베너 포커스 인
-  const onFocus = () => {
+  const onFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus();
+    }
+
     rollingStart(true);
-    setrollingFocus(true);
+    setRollingFocus(true);
     handleScrollReset();
-  };
+  }, [handleItemFocus, handleScrollReset, rollingStart]);
 
   // 배너 포커스 아웃
   const onBlur = () => {
     rollingStart(false);
-    setrollingFocus(false);
+    setRollingFocus(false);
     handleStopScrolling();
   };
 
@@ -112,13 +117,17 @@ export default function RollingUnit({
   };
 
   // 인디케이터 포커스
-  const indicatorFocus = () => {
+  const indicatorFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus();
+    }
+
     setNextFocus(false);
     setContentsFocus(false);
     setPrevFocus(false);
     rollingStart(true);
     handleScrollReset();
-  };
+  }, [handleItemFocus, handleScrollReset, rollingStart]);
 
   // 인디케이터 포커스 아웃
   const indicatorBlur = () => {

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

@@ -12,18 +12,14 @@ import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "./HomeOnSale.module.less";
 import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
+import { LOG_MENU } from "../../../utils/Config";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
 
-const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
+const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => {
-  const homeOnSaleInfos = useSelector(
-    (state) => state.onSale.onSaleData?.data.homeOnSaleInfos
-  );
-  const { cursorVisible } = useSelector((state) => state.common.appStatus);
-
   const { scrollTopByDistance } = useScrollTopByDistance();
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
@@ -31,7 +27,12 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
     true
   );
 
-  const homeOnSaleInfosLength = homeOnSaleInfos?.length;
+  const homeOnSaleInfos = useSelector(
+    (state) => state.onSale.onSaleData?.data.homeOnSaleInfos
+  );
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);
+
+  const orderStyle = useMemo(() => ({ order: order }), [order]);
 
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
@@ -44,12 +45,14 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
   };
 
   const handleFocus = useCallback(
-    (e, index) => {
+    (index) => (e) => {
+      _handleItemFocus();
+
       if (index === 0) {
         handleScrollReset();
       }
 
-      if (index === homeOnSaleInfosLength - 1) {
+      if (index === homeOnSaleInfos?.length - 1) {
         handleScrollRight(e);
       }
 
@@ -64,15 +67,31 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
         36
       );
     },
-    [cursorVisible, homeOnSaleInfos]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      handleScrollRight,
+      homeOnSaleInfos?.length,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
-  const handleBlur = useCallback((itemIndex) => {
-    if (itemIndex === 0) {
-      handleStopScrolling();
-    }
-  }, []);
 
-  const orderStyle = useMemo(() => ({ order: order }), [order]);
+  const handleBlur = useCallback(
+    (itemIndex) => () => {
+      if (itemIndex === 0) {
+        handleStopScrolling();
+      }
+    },
+    [handleStopScrolling]
+  );
+
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_ON_SALE);
+    }
+  }, [handleItemFocus]);
 
   return (
     <Container {...rest} className={css.container} style={orderStyle}>
@@ -98,8 +117,8 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
                       key={index}
                       homeOnSaleInfos={homeOnSaleInfos}
                       itemData={itemData}
-                      onFocus={(e) => handleFocus(e, index)}
+                      onFocus={handleFocus(index)}
-                      onBlur={() => handleBlur(index)}
+                      onBlur={handleBlur(index)}
                     />
                   );
                 })}

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

@@ -33,6 +33,7 @@ import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
 import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
+import useLogService from "../../hooks/useLogService";
 
 const TEMPLATE_CODE_CONF = {
   TOP: "DSP00101",
@@ -54,6 +55,7 @@ const hasTemplateCodeWithValue = (array, value) =>
   );
 
 export default function HomePanel({ isOnTop }) {
+  const { sendLogGNB } = useLogService();
   const dispatch = useDispatch();
   const homeLayoutInfo = useSelector((state) => state.home.layoutData);
   const homeSpotlight = useSelector((state) => state.home.spotData?.panelInfo);
@@ -245,6 +247,13 @@ export default function HomePanel({ isOnTop }) {
     }
   };
 
+  const handleItemFocus = useCallback(
+    (nowMenu) => {
+      sendLogGNB(nowMenu);
+    },
+    [sendLogGNB]
+  );
+
   return (
     <>
       {homeLayoutInfo && homeTopDisplayInfos && (
@@ -271,6 +280,7 @@ export default function HomePanel({ isOnTop }) {
                     )}
                     firstSpot={firstSpot}
                     className={css.homeBannerWrap}
+                    handleItemFocus={handleItemFocus}
                   />
                 )}
               {hasTemplateCodeWithValue(
@@ -284,6 +294,7 @@ export default function HomePanel({ isOnTop }) {
                   )}
                   scrollTopBody={scrollTopBody}
                   catCd={cateCd}
+                  handleItemFocus={handleItemFocus}
                 />
               )}
               {hasTemplateCodeWithValue(
@@ -296,6 +307,7 @@ export default function HomePanel({ isOnTop }) {
                     TEMPLATE_CODE_CONF.ON_SALE
                   )}
                   scrollTopBody={scrollTopBody}
+                  handleItemFocus={handleItemFocus}
                 />
               )}
               {hasTemplateCodeWithValue(
@@ -308,6 +320,7 @@ export default function HomePanel({ isOnTop }) {
                     TEMPLATE_CODE_CONF.POPULAR_SHOW
                   )}
                   scrollTopBody={scrollTopBody}
+                  handleItemFocus={handleItemFocus}
                 />
               )}
               {hasTemplateCodeWithValue(
@@ -320,6 +333,7 @@ export default function HomePanel({ isOnTop }) {
                     TEMPLATE_CODE_CONF.BEST_SELLER
                   )}
                   scrollTopBody={scrollTopBody}
+                  handleItemFocus={handleItemFocus}
                 />
               )}
             </div>

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -16,7 +16,7 @@ import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
-import { panel_names } from "../../../utils/Config";
+import { LOG_MENU, panel_names } from "../../../utils/Config";
 import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
 
@@ -26,34 +26,49 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
+const PopularShow = ({
-  const dispatch = useDispatch();
+  homeChk = true,
-  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+  order,
-
+  scrollTopBody,
-  const [drawChk, setDrawChk] = useState(false);
+  handleItemFocus,
+  ...rest
+}) => {
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
   const { scrollTopByDistance } = useScrollTopByDistance();
+
+  const dispatch = useDispatch();
+
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
+
+  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+
+  const [drawChk, setDrawChk] = useState(false);
+
+  const orderStyle = useMemo(() => ({ order: order }), [order]);
+
   useEffect(() => {
     setDrawChk(true);
   }, [topInfos]);
 
-  const handleCardClick = useCallback((patnrId, showId, catCd, showUrl) => {
+  const handleCardClick = useCallback(
-    dispatch(
+    (patnrId, showId, catCd, showUrl) => () => {
-      startVideoPlayer({
+      dispatch(
-        showId,
+        startVideoPlayer({
-        patnrId,
+          showId,
-        shptmBanrTpNm: "VOD",
+          patnrId,
-        lgCatCd: catCd,
+          shptmBanrTpNm: "VOD",
-        modal: false,
+          lgCatCd: catCd,
-        showUrl: showUrl,
+          modal: false,
-      })
+          showUrl: showUrl,
-    );
+        })
-  });
+      );
+    },
+    [dispatch]
+  );
 
   const handleMoreCardClick = useCallback(() => {
     dispatch(
@@ -65,14 +80,20 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
       )
     );
   });
-  const handleBlur = useCallback((itemIndex) => {
+
-    if (itemIndex === 0) {
+  const handleBlur = useCallback(
-      handleStopScrolling();
+    (itemIndex) => () => {
-    }
+      if (itemIndex === 0) {
-  }, []);
+        handleStopScrolling();
+      }
+    },
+    [handleStopScrolling]
+  );
 
   const handleFocus = useCallback(
-    (itemIndex) => {
+    (itemIndex) => () => {
+      _handleItemFocus();
+
       if (itemIndex === 0) {
         handleScrollReset();
       }
@@ -88,9 +109,15 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
         36
       );
     },
-    [cursorVisible]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
-  const orderStyle = useMemo(() => ({ order: order }), [order]);
+
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
     const x = container.scrollWidth - container.clientWidth + 60;
@@ -99,6 +126,13 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
       scrollLeft({ x, animate: true });
     });
   };
+
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_POPULAR_SHOWS);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container className={css.popularShow} style={orderStyle}>
       <SectionTitle
@@ -149,11 +183,9 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
                   logo={patncLogoPath}
                   catNm={catNm}
                   productId={showId}
-                  onFocus={() => handleFocus(itemIndex)}
+                  onFocus={handleFocus(itemIndex)}
-                  onBlur={() => handleBlur(itemIndex)}
+                  onBlur={handleBlur(itemIndex)}
-                  onClick={() =>
+                  onClick={handleCardClick(patnrId, showId, catCd, showUrl)}
-                    handleCardClick(patnrId, showId, catCd, showUrl)
-                  }
                 />
               );
             }
@@ -164,6 +196,7 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
             <SpottableComponent
               className={css.displayBox}
               onClick={handleMoreCardClick}
+              onFocus={_handleItemFocus}
               spotlightId={"home-popularshow-more-btn"}
             ></SpottableComponent>
           </div>

com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx

@@ -21,14 +21,20 @@ export default function CategoryNav({
   currentCategoryCode,
   onCategoryNavClick,
   scrollTopBody,
+  handleItemFocus,
   ...rest
 }) {
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const { scrollLeft } = useScrollTo();
   const { handleScrollReset } = useScrollReset(scrollLeft, true);
   const { scrollTopByDistance } = useScrollTopByDistance();
+
   const handleFocus = useCallback(
-    (index) => {
+    (index) => () => {
+      if (handleItemFocus) {
+        handleItemFocus();
+      }
+
       if (index === 0) {
         handleScrollReset();
       }
@@ -44,7 +50,13 @@ export default function CategoryNav({
         36
       );
     },
-    [cursorVisible]
+    [
+      cursorVisible,
+      handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
 
   const renderItem = useCallback(
@@ -55,12 +67,12 @@ export default function CategoryNav({
           currentCategoryCode={currentCategoryCode}
           onCategoryNavClick={onCategoryNavClick}
           index={index}
-          onFocus={() => handleFocus(index)}
+          onFocus={handleFocus(index)}
           {...rest}
         />
       );
     },
-    [categoryInfos, currentCategoryCode, onCategoryNavClick]
+    [categoryInfos, currentCategoryCode, onCategoryNavClick, handleFocus]
   );
 
   return (

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -21,7 +21,7 @@ import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
-import { panel_names } from "../../../utils/Config";
+import { LOG_MENU, panel_names } from "../../../utils/Config";
 import { scaleW } from "../../../utils/helperMethods";
 import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
 import css from "../../HomePanel/SubCategory/SubCategory.module.less";
@@ -40,7 +40,7 @@ const ContainerBasic = SpotlightContainerDecorator(
   "div"
 );
 
-const SubCategory = ({ order, scrollTopBody, catCd }) => {
+const SubCategory = ({ order, scrollTopBody, catCd, handleItemFocus }) => {
   const dispatch = useDispatch();
   const categoryInfos = useSelector(
     (state) => state.onSale.onSaleData?.data.categoryInfos
@@ -163,6 +163,8 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
 
   const handleFocus = useCallback(
     (itemIndex) => {
+      _handleItemFocus();
+
       if (itemIndex === 0) {
         handleScrollReset();
       }
@@ -178,7 +180,13 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
         36
       );
     },
-    [cursorVisible]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
 
   const orderStyle = useMemo(() => ({ order: order }), [order]);
@@ -193,6 +201,12 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
     });
   };
 
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_CATEGORY);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container style={orderStyle}>
       <ContainerBasic>
@@ -203,6 +217,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
           type="home"
           scrollTopBody={scrollTopBody}
           data-title-index="subCategoryNav"
+          handleItemFocus={_handleItemFocus}
         />
       </ContainerBasic>
       <ContainerBasic>
@@ -251,6 +266,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
                 spotlightId={"home-cate-more-btn"}
                 data-catcd-num={currentLgCatCd}
                 onClick={handleMoreCardClick}
+                onFocus={_handleItemFocus}
               ></SpottableComponent>
             </div>
           )}