optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
younghoon100.park
2024-05-23 15:41:22 +09:00
parent ab9b3a4ebc
commit 402be5b9a5
9 changed files with 252 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -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) => {
const handleCardClick = useCallback(
(patnrId, prdtId) => () => {
dispatch(
pushPanel(
{
pushPanel({
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId: patnrId, prdtId: prdtId },
})
);
},
[dispatch]
)
);
});
const handleMoreCardClick = useCallback(() => {
dispatch(
pushPanel(
{
pushPanel({
name: panel_names.TRENDING_NOW_PANEL,
panelInfo: {
pageName: "BS",
},
},
[dispatch]
)
})
);
});
}, [dispatch]);
const handleBlur = useCallback((itemIndex) => {
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 (
<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)}
onBlur={() => handleBlur(itemIndex)}
onClick={() => handleCardClick(patnrId, prdtId)}
onFocus={handleFocus(itemIndex)}
onBlur={handleBlur(itemIndex)}
onClick={handleCardClick(patnrId, prdtId)}
offerInfo={offerInfo}
spotlightId={"bestsellerItem" + itemIndex}
/>

18
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -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

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

@@ -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) => {

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

@@ -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 = () => {

49
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -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) => {
const handleBlur = useCallback(
(itemIndex) => () => {
if (itemIndex === 0) {
handleStopScrolling();
}
}, []);
},
[handleStopScrolling]
);
const orderStyle = useMemo(() => ({ order: order }), [order]);
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)}
onBlur={() => handleBlur(index)}
onFocus={handleFocus(index)}
onBlur={handleBlur(index)}
/>
);
})}

14
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -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>

69
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -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,23 +26,36 @@ 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) => {
const handleCardClick = useCallback(
(patnrId, showId, catCd, showUrl) => () => {
dispatch(
startVideoPlayer({
showId,
@@ -53,7 +66,9 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
showUrl: showUrl,
})
);
});
},
[dispatch]
);
const handleMoreCardClick = useCallback(() => {
dispatch(
@@ -65,14 +80,20 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
)
);
});
const handleBlur = useCallback((itemIndex) => {
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 (
<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)}
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 }) => {
<SpottableComponent
className={css.displayBox}
onClick={handleMoreCardClick}
onFocus={_handleItemFocus}
spotlightId={"home-popularshow-more-btn"}
></SpottableComponent>
</div>

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

@@ -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 (

22
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -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>
)}