diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index d521e0d0..9df668f3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/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 dispatch = useDispatch(); - const bestSellerDatas = useSelector( - (state) => state.product.bestSellerData?.bestSeller - ); - const [drawChk, setDrawChk] = useState(false); +const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => { 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( - pushPanel( - { + + const handleCardClick = useCallback( + (patnrId, prdtId) => () => { + dispatch( + pushPanel({ name: panel_names.DETAIL_PANEL, panelInfo: { patnrId: patnrId, prdtId: prdtId }, - }, - [dispatch] - ) - ); - }); + }) + ); + }, + [dispatch] + ); + const handleMoreCardClick = useCallback(() => { dispatch( - pushPanel( - { - name: panel_names.TRENDING_NOW_PANEL, - panelInfo: { - pageName: "BS", - }, + pushPanel({ + name: panel_names.TRENDING_NOW_PANEL, + panelInfo: { + pageName: "BS", }, - [dispatch] - ) + }) ); - }); + }, [dispatch]); - const handleBlur = useCallback((itemIndex) => { - if (itemIndex === 0) { - handleStopScrolling(); - } - }, []); + const handleBlur = useCallback( + (itemIndex) => () => { + 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 ( { isBestSeller={true} productId={prdtId} rank={rankOrd} - onFocus={() => handleFocus(itemIndex)} - onBlur={() => handleBlur(itemIndex)} - onClick={() => handleCardClick(patnrId, prdtId)} + onFocus={handleFocus(itemIndex)} + onBlur={handleBlur(itemIndex)} + onClick={handleCardClick(patnrId, prdtId)} offerInfo={offerInfo} spotlightId={"bestsellerItem" + itemIndex} /> diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index 483d951e..fb948b98 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/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 (
@@ -183,6 +191,7 @@ export default function HomeBanner({ isHorizontal={true} spotlightId={"banner01"} scrollTopBody={scrollTopBody} + handleItemFocus={_handleItemFocus} /> ) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? ( ) : ( { + const onFocus = useCallback(() => { + if (handleItemFocus) { + handleItemFocus(); + } + setIsFocused(true); handleScrollReset(); - }; + }, [handleItemFocus, handleScrollReset]); // 포커스 아웃 const onBlur = (ev) => { diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index 537c138f..dca1fb25 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/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) => { - setrollingFocus(focus); - }; + const rollingStart = useCallback((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 = () => { diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index e76c5478..0e2dc1ef 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/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 homeOnSaleInfos = useSelector( - (state) => state.onSale.onSaleData?.data.homeOnSaleInfos - ); - const { cursorVisible } = useSelector((state) => state.common.appStatus); - +const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => { 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 ( @@ -98,8 +117,8 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => { key={index} homeOnSaleInfos={homeOnSaleInfos} itemData={itemData} - onFocus={(e) => handleFocus(e, index)} - onBlur={() => handleBlur(index)} + onFocus={handleFocus(index)} + onBlur={handleBlur(index)} /> ); })} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 08223605..21f8d930 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/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} /> )}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index e30f1d62..1ce43dd9 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/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 dispatch = useDispatch(); - const topInfos = useSelector((state) => state.main.top20ShowData.topInfos); - - const [drawChk, setDrawChk] = useState(false); +const PopularShow = ({ + homeChk = true, + order, + scrollTopBody, + 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) => { - dispatch( - startVideoPlayer({ - showId, - patnrId, - shptmBanrTpNm: "VOD", - lgCatCd: catCd, - modal: false, - showUrl: showUrl, - }) - ); - }); + const handleCardClick = useCallback( + (patnrId, showId, catCd, showUrl) => () => { + dispatch( + startVideoPlayer({ + showId, + patnrId, + shptmBanrTpNm: "VOD", + lgCatCd: catCd, + 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) { - handleStopScrolling(); - } - }, []); + + const handleBlur = useCallback( + (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 ( { logo={patncLogoPath} catNm={catNm} productId={showId} - onFocus={() => handleFocus(itemIndex)} - onBlur={() => handleBlur(itemIndex)} - onClick={() => - handleCardClick(patnrId, showId, catCd, showUrl) - } + onFocus={handleFocus(itemIndex)} + onBlur={handleBlur(itemIndex)} + onClick={handleCardClick(patnrId, showId, catCd, showUrl)} /> ); } @@ -164,6 +196,7 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => { diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx index c4730e2f..a8d76e42 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx +++ b/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 ( diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 68ae468f..6d5f60ca 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/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 ( @@ -203,6 +217,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { type="home" scrollTopBody={scrollTopBody} data-title-index="subCategoryNav" + handleItemFocus={_handleItemFocus} /> @@ -251,6 +266,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { spotlightId={"home-cate-more-btn"} data-catcd-num={currentLgCatCd} onClick={handleMoreCardClick} + onFocus={_handleItemFocus} > )}