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 ad163fd4..da67d568 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -85,30 +85,37 @@ const BestSeller = ({ const [bestItemNewData, setBestItemNewData] = useState([]); useEffect(()=>{ - setBestInfos( - bestSellerNewDatas?.filter( - (item) => item.recommendTpCd === "BESTSELLER" - ) - ) - },[bestSellerNewDatas]) + setBestInfos( + bestSellerNewDatas?.filter( + (item) => item.recommendTpCd === "BESTSELLER" + ) || [] // 기본값으로 빈 배열 설정 + ) +},[bestSellerNewDatas]) - useEffect(() => { - const recommendedData = bestInfos?.[0].productInfos?.slice(0, 2).map((item) => ({ - ...item, - foryou: true, - })) || []; - - const recommendedPrdtIds = new Set(recommendedData.map(item => item.prdtId)); - - const baseData = bestSellerDatas?.filter( - (item) => !recommendedPrdtIds.has(item.prdtId) - ).map((item) => ({ - ...item, - foryou: false, - })) || []; - - setBestItemNewData([...recommendedData, ...baseData]); - }, [bestSellerDatas, bestInfos?.[0].productInfos]); + useEffect(() => { + if (!bestInfos || bestInfos.length === 0) { + const baseData = bestSellerDatas?.map((item) => ({ + ...item, + foryou: false, + })) || []; + setBestItemNewData(baseData); + return; + } + + const recommendedData = bestInfos[0].productInfos?.slice(0, 20).map((item) => ({ + ...item, + foryou: true, + })) || []; + + const recommendedPrdtIds = new Set(recommendedData.map(item => item.prdtId)); + + const baseData = bestSellerDatas?.map((item) => ({ + ...item, + foryou: recommendedPrdtIds.has(item.prdtId), + })) || []; + + setBestItemNewData(baseData); + }, [bestSellerDatas, bestInfos]); const orderStyle = useMemo(() => ({ order: order }), [order]); @@ -286,7 +293,7 @@ const BestSeller = ({ offerInfo={offerInfo} spotlightId={"bestsellerItem" + itemIndex} firstLabel={rankText} - label={itemIndex * 1 + 1 + " of " + bestInfos?.[0].productInfos.length} + label={itemIndex * 1 + 1 + " of " + bestItemNewData.length} lastLabel=" go to detail, button" euEnrgLblInfos={euEnrgLblInfos} > @@ -311,4 +318,4 @@ const BestSeller = ({ ); }; -export default BestSeller; +export default BestSeller; \ No newline at end of file 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 d7b12e44..3244ff02 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -121,7 +121,7 @@ export default memo(function SubCategory({ } setDrawChk(true); } - }, [currentLgCatCd, dispatch]); + }, [currentLgCatCd, dispatch, firstChk]); useEffect(() => { if (!nowMenuRef.current || !nowMenuRef.current.startsWith("Home")) { @@ -138,7 +138,7 @@ export default memo(function SubCategory({ dispatch(sendLogCuration(params)); } - }, [categoryInfos, currentLgCatCd, currentLgCatNm]); + }, [categoryInfos, currentLgCatCd, currentLgCatNm, dispatch, nowMenuRef]); const handleCategoryNav = useCallback( (lgCatCd, lgCatNm) => { @@ -153,7 +153,7 @@ export default memo(function SubCategory({ setContainerLastFocusedElement(null, [SpotlightIds.HOME_CATEGORY_NAV]); }, - [currentLgCatCd] + [currentLgCatCd, handleScrollReset] ); const handleFocus = useCallback( @@ -164,7 +164,7 @@ export default memo(function SubCategory({ handleScrollReset(); } }, - [_handleItemFocus] + [_handleItemFocus, handleScrollReset] ); const handleBlur = useCallback( @@ -173,7 +173,7 @@ export default memo(function SubCategory({ handleStopScrolling(); } }, - [] + [handleStopScrolling] ); const handleCardClick = useCallback( @@ -185,7 +185,7 @@ export default memo(function SubCategory({ }) ); }, - [] + [dispatch, spotlightId] ); const handleScrollRight = useCallback((e) => { @@ -193,7 +193,7 @@ export default memo(function SubCategory({ const x = container.scrollWidth - container.clientWidth; setTimeout(() => scrollLeft({ x, animate: true })); - }, []); + }, [scrollLeft]); const handleMoreCardClick = useCallback((e) => { const lgCatCd = e.currentTarget?.getAttribute("data-catcd-num"); @@ -212,7 +212,7 @@ export default memo(function SubCategory({ }) ); } - }, []); + }, [dispatch]); const _handleItemFocus = useCallback(() => { if (handleItemFocus) { @@ -227,7 +227,16 @@ export default memo(function SubCategory({ }, [handleShelfFocus]); useEffect(() => { - const recommendedData = foruItemInfos?.slice(0, 2).map((item) => ({ + if (!foruItemInfos || foruItemInfos.length === 0) { + const baseData = categoryItemInfos?.subCatItemList?.map((item) => ({ + ...item, + foryou: false, + })) || []; + setCategoryItemNewData(baseData); + return; + } + + const recommendedData = foruItemInfos?.slice(0, 10).map((item) => ({ ...item, foryou: true, })) || []; @@ -267,59 +276,6 @@ export default memo(function SubCategory({ cbScrollTo={getScrollTo} noScrollByWheel > - {/* {categoryItemInfos && - categoryItemInfos?.subCatItemList.map( - ( - { - prdtId, - imgUrl, - priceInfo, - prdtNm, - patnrId, - offerInfo, - brndNm, - patncNm, - }, - itemIndex - ) => { - return ( - - - - - - ); - } - )} 원본 보관*/} {categoryItemNewData && categoryItemNewData.slice(0, 10).map( ( @@ -342,7 +298,7 @@ export default memo(function SubCategory({ key={"subItem" + itemIndex} contextName={LOG_CONTEXT_NAME.HOME} messageId={LOG_MESSAGE_ID.SHELF_CLICK} - catNm={categoryItemInfos.catNm} + catNm={categoryItemInfos?.catNm} order={itemIndex + 1} shelfId={spotlightId} shelfLocation={shelfLocation} @@ -364,7 +320,7 @@ export default memo(function SubCategory({ itemIndex * 1 + 1 + " of " + - categoryItemInfos?.subCatItemList.length + (categoryItemNewData?.length || 0) } lastLabel=" go to detail, button" euEnrgLblInfos={euEnrgLblInfos} @@ -391,4 +347,4 @@ export default memo(function SubCategory({ ); -}); +}); \ No newline at end of file