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 daa3b37d..4d88cea4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -6,7 +6,11 @@ import Spotlight from '@enact/spotlight'; import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; -import { pushPanel, updatePanel, navigateFromBestSeller } from '../../../actions/panelActions'; +import { + navigateFromBestSeller, + pushPanel, + updatePanel, +} from '../../../actions/panelActions'; import { navigateToDetailFromHome } from '../../../actions/panelNavigationActions'; import SectionTitle from '../../../components/SectionTitle/SectionTitle'; import Tag from '../../../components/TItemCard/Tag'; @@ -15,13 +19,20 @@ import TItemCardNew from '../../../components/TItemCard/TItemCard.new'; import TScroller from '../../../components/TScroller/TScroller'; import useScrollReset from '../../../hooks/useScrollReset'; import useScrollTo from '../../../hooks/useScrollTo'; -import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config'; +import { + LOG_CONTEXT_NAME, + LOG_MESSAGE_ID, + panel_names, +} from '../../../utils/Config'; import { $L, scaleW } from '../../../utils/helperMethods'; import { SpotlightIds } from '../../../utils/SpotlightIds'; import css from './BestSeller.module.less'; const SpottableComponent = Spottable('div'); -const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); +const Container = SpotlightContainerDecorator( + { enterTo: 'last-focused' }, + 'div' +); const BestSeller = ({ order, @@ -33,15 +44,26 @@ const BestSeller = ({ shelfTitle, }) => { const { getScrollTo, scrollLeft } = useScrollTo(); - const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, true); + const { handleScrollReset, handleStopScrolling } = useScrollReset( + scrollLeft, + true + ); const dispatch = useDispatch(); const { cursorVisible } = useSelector((state) => state.common.appStatus); - const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller); + const bestSellerDatas = useSelector( + (state) => state.product.bestSellerData?.bestSeller + ); - const bestSellerNewDatas = useSelector((state) => state.foryou?.recommendInfo?.recommendProduct); + const bestSellerNewDatas = useSelector( + (state) => state.foryou?.recommendInfo?.recommendProduct + ); + + const { userNumber } = useSelector( + (state) => state.common.appStatus.loginUserData + ); const [drawChk, setDrawChk] = useState(false); const [firstChk, setFirstChk] = useState(0); @@ -51,37 +73,45 @@ const BestSeller = ({ useEffect(() => { setBestInfos( - bestSellerNewDatas?.filter((item) => item.recommendTpCd === 'BESTSELLER') || [] // 기본값으로 빈 배열 설정 + bestSellerNewDatas?.filter( + (item) => item.recommendTpCd === 'BESTSELLER' + ) || [] // 기본값으로 빈 배열 설정 ); }, [bestSellerNewDatas]); useEffect(() => { - if (!bestInfos || bestInfos.length === 0) { + if (userNumber) { + if (!bestInfos || bestInfos.length === 0) { + const baseData = + bestSellerDatas?.map((item) => ({ + ...item, + foryou: false, + })) || []; + setBestItemNewData(baseData); + return; + } + + const recommendedData = + bestInfos[0].productInfos?.map((item) => ({ + ...item, + foryou: true, + })) || []; + + const recommendedPrdtIds = new Set( + recommendedData.map((item) => item.prdtId) + ); + const baseData = bestSellerDatas?.map((item) => ({ ...item, - foryou: false, + foryou: recommendedPrdtIds.has(item.prdtId), })) || []; + setBestItemNewData(baseData); - return; + } else { + setBestItemNewData(bestSellerDatas); } - - const recommendedData = - bestInfos[0].productInfos?.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]); + }, [bestSellerDatas, bestInfos, userNumber]); const orderStyle = useMemo(() => ({ order: order }), [order]); @@ -144,7 +174,10 @@ const BestSeller = ({ if (c) { let cAriaLabel = c.getAttribute('aria-label'); if (cAriaLabel) { - const newcAriaLabel = cAriaLabel.replace('Best Seller, Heading 1,', ''); + const newcAriaLabel = cAriaLabel.replace( + 'Best Seller, Heading 1,', + '' + ); c.setAttribute('aria-label', newcAriaLabel); } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 8ac2ae8f..37af3f0c 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -7,10 +7,7 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { applyMiddleware } from 'redux'; import Spotlight from '@enact/spotlight'; @@ -23,11 +20,11 @@ import { import hsn from '../../../assets/images/bg/hsn_new.png'; import koreaKiosk from '../../../assets/images/bg/koreaKiosk_new.png'; import lgelectronics from '../../../assets/images/bg/lgelectronics_new.png'; +import nbcu from '../../../assets/images/bg/nbcu_new.png'; import ontv4u from '../../../assets/images/bg/ontv4u_new.png'; import Pinkfong from '../../../assets/images/bg/Pinkfong_new.png'; import qvc from '../../../assets/images/bg/qvc_new.png'; import shoplc from '../../../assets/images/bg/shoplc_new.png'; -import nbcu from '../../../assets/images/bg/nbcu_new.png'; import { types } from '../../actions/actionTypes'; import { changeAppStatus, @@ -45,14 +42,8 @@ import { getHomeMainContents, updateHomeInfo, } from '../../actions/homeActions'; -import { - sendLogGNB, - sendLogTotalRecommend, -} from '../../actions/logActions'; -import { - getSubCategory, - getTop20Show, -} from '../../actions/mainActions'; +import { sendLogGNB, sendLogTotalRecommend } from '../../actions/logActions'; +import { getSubCategory, getTop20Show } from '../../actions/mainActions'; import { setMyPageTermsAgree } from '../../actions/myPageActions'; import { getHomeOnSaleInfo } from '../../actions/onSaleActions'; import { updatePanel } from '../../actions/panelActions'; @@ -69,8 +60,7 @@ import TButton, { TYPES } from '../../components/TButton/TButton'; import TPanel from '../../components/TPanel/TPanel'; import TNewPopUp from '../../components/TPopUp/TNewPopUp'; import TPopUp from '../../components/TPopUp/TPopUp'; -import TVerticalPagenator - from '../../components/TVerticalPagenator/TVerticalPagenator'; +import TVerticalPagenator from '../../components/TVerticalPagenator/TVerticalPagenator'; import useDebugKey from '../../hooks/useDebugKey'; import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory'; import usePrevious from '../../hooks/usePrevious'; @@ -178,68 +168,113 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { // }); const isGnbOpened = useSelector((state) => state.common.isGnbOpened); const homeLayoutInfo = useSelector((state) => state.home.layoutData); - const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {}); + const panelInfo = useSelector( + (state) => state.home.homeInfo?.panelInfo ?? {} + ); const panels = useSelector((state) => state.panels.panels); - const webOSVersion = useSelector((state) => state.common.appStatus?.webOSVersion); + const webOSVersion = useSelector( + (state) => state.common.appStatus?.webOSVersion + ); const enterThroughGNB = useSelector((state) => state.home.enterThroughGNB); const defaultFocus = useSelector((state) => state.home.defaultFocus); - const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos); + const bannerDataList = useSelector( + (state) => state.home.bannerData?.bannerInfos + ); // ✅ PlayerPanel의 shouldShrinkTo1px 상태 추적 const playerPanelShouldShrink = useSelector((state) => { - const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL); + const playerPanel = state.panels.panels.find( + (p) => p.name === panel_names.PLAYER_PANEL + ); return playerPanel?.panelInfo?.shouldShrinkTo1px ?? false; }); // ✅ PlayerPanel의 modal 상태 추적 (false → true 감지용) const playerModalState = useSelector((state) => { - const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL); + const playerPanel = state.panels.panels.find( + (p) => p.name === panel_names.PLAYER_PANEL + ); return playerPanel?.panelInfo?.modal ?? false; }); const prevPlayerModalStateRef = useRef(false); - const categoryInfos = useSelector((state) => state.onSale.homeOnSaleData?.data?.categoryInfos); + const categoryInfos = useSelector( + (state) => state.onSale.homeOnSaleData?.data?.categoryInfos + ); - const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos); + const categoryItemInfos = useSelector( + (state) => state.main.subCategoryData?.categoryItemInfos + ); - const { popupVisible, activePopup } = useSelector((state) => state.common.popup); + const { popupVisible, activePopup } = useSelector( + (state) => state.common.popup + ); - const eventPopInfosData = useSelector((state) => state.event.eventData.eventPopInfo); + const eventPopInfosData = useSelector( + (state) => state.event.eventData.eventPopInfo + ); const eventData = useSelector((state) => state.event.eventData); - const eventClickSuccess = useSelector((state) => state.event.eventClickSuccess); - const homeOnSaleInfos = useSelector((state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos); - const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller); + const eventClickSuccess = useSelector( + (state) => state.event.eventClickSuccess + ); + const homeOnSaleInfos = useSelector( + (state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos + ); + const bestSellerDatas = useSelector( + (state) => state.product.bestSellerData?.bestSeller + ); const topInfos = useSelector((state) => state.main.top20ShowData.topInfos); - const isDeepLink = useSelector((state) => state.common.deepLinkInfo.isDeepLink); + const isDeepLink = useSelector( + (state) => state.common.deepLinkInfo.isDeepLink + ); // 선택약관 관련 Redux 상태 const termsData = useSelector((state) => state.home.termsData); const termsIdMap = useSelector((state) => state.home.termsIdMap); - const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable); + const optionalTermsAvailable = useSelector( + (state) => state.home.optionalTermsAvailable + ); const optionalTermsData = useSelector((state) => { - if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) { - return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405'); + if ( + state.home.termsData && + state.home.termsData.data && + state.home.termsData.data.terms + ) { + return state.home.termsData.data.terms.find( + (term) => term.trmsTpCd === 'MST00405' + ); } return null; }); const termsLoading = useSelector((state) => state.common.termsLoading); const currentTermsFlag = useSelector((state) => state.common.termsFlag); - const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow); + const optionalTermsPopupFlow = useSelector( + (state) => state.common.optionalTermsPopupFlow + ); + + const { userNumber } = useSelector( + (state) => state.common.appStatus.loginUserData + ); const [btnDisabled, setBtnDisabled] = useState(true); const [arrowBottom, setArrowBottom] = useState(true); const [firstSpot, setFirstSpot] = useState(false); const [eventPopOpen, setEventPopOpen] = useState(false); const [nowShelf, setNowShelf] = useState(panelInfo.nowShelf); - const [firstLgCatCd, setFirstLgCatCd] = useState(panelInfo.currentCatCd ?? null); + const [firstLgCatCd, setFirstLgCatCd] = useState( + panelInfo.currentCatCd ?? null + ); const [cateCd, setCateCd] = useState(panelInfo.currentCatCd ?? null); const [cateNm, setCateNm] = useState(panelInfo.currentCateName ?? null); // 선택약관 팝업 상태 - const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false); + const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = + useState(false); const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false); const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false); const { entryMenu, nowMenu } = useSelector((state) => state.common.menu); - const [focusedContainerId, setFocusedContainerId] = useState(panelInfo.focusedContainerId); + const [focusedContainerId, setFocusedContainerId] = useState( + panelInfo.focusedContainerId + ); // DetailPanel 진입 시 포커스 대상 저장 const lastFocusedTargetRef = useRef(panelInfo.lastFocusedTargetId || null); @@ -254,7 +289,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { useEffect(() => { if (prevIsOnTopRef.current && !isOnTop) { const current = Spotlight.getCurrent(); - const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`); + const tBody = document.querySelector( + `[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]` + ); if (current && tBody && tBody.contains(current)) { const targetId = current.getAttribute('data-spotlight-id'); @@ -286,7 +323,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { ImagePreloader.preloadAllImages(BACKGROUND_IMAGES) .then((results) => { const successCount = results.filter((r) => r !== null).length; - dlog(`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`); + dlog( + `[HomePanel] Background images preloaded: ${successCount}/${results.length} images` + ); // 프리로딩 통계 정보 로깅 (디버깅용) const stats = ImagePreloader.getStats(); @@ -312,7 +351,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { const sortedHomeLayoutInfo = useMemo(() => { if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) { - const sorted = [...homeLayoutInfo.homeLayoutInfo].sort((x, y) => x.expsOrd - y.expsOrd); + const sorted = [...homeLayoutInfo.homeLayoutInfo].sort( + (x, y) => x.expsOrd - y.expsOrd + ); return sorted; } return []; @@ -337,7 +378,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { const expandAttemptRef = useRef(0); // 복구 시도 횟수 const loadingComplete = useSelector((state) => state.common?.loadingComplete); - const isVideoTransitionLocked = useSelector((state) => state.home.videoTransitionLocked); + const isVideoTransitionLocked = useSelector( + (state) => state.home.videoTransitionLocked + ); // 선택약관 동의 핸들러 const handleOptionalAgree = useCallback(() => { @@ -415,9 +458,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { optionalTerms: 'Y', }, }); - setTimeout(()=>{ + setTimeout(() => { Spotlight.focus('home_tbody'); - },100) + }, 100); }, [handleOptionalAgree, dispatch, currentTermsFlag]); const handleOptionalDeclineClick = useCallback(() => { @@ -426,9 +469,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { } dispatch(updateOptionalTermsAgreement(false)); setIsOptionalConfirmVisible(false); - setTimeout(()=>{ + setTimeout(() => { Spotlight.focus('home_tbody'); - },100) + }, 100); }, [dispatch]); const handleTermsPopupClosed = useCallback(() => { @@ -499,7 +542,12 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { return () => clearTimeout(timer); } - }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]); + }, [ + shouldShowOptionalTermsPopup, + termsLoading, + isOptionalConfirmVisible, + dispatch, + ]); const onCancel = useCallback(() => { const currentSpot = Spotlight.getCurrent(); @@ -550,7 +598,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { const containerId = sortedHomeLayoutInfo[0].shptmApphmDspyOptCd; const navigableEls = getContainerNavigableElements(containerId); const navigableIds = navigableEls.filter((el) => typeof el === 'string'); - const target = containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId; + const target = + containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId; if (navigableIds.length > 0) { setContainerLastFocusedElement(null, navigableIds); @@ -626,7 +675,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { { } else break; } case TEMPLATE_CODE_CONF.PICK_FOR_YOU: { - if (bestSellerDatas && bestSellerDatas.length > 0) { + if (userNumber) { return ( { } } })} - {loadingComplete && sortedHomeLayoutInfo && sortedHomeLayoutInfo.length > 0 && ( - - )} + {loadingComplete && + sortedHomeLayoutInfo && + sortedHomeLayoutInfo.length > 0 && ( + + )} ); }, [ @@ -914,7 +967,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { // console.log('[HomePanel] playVideo 호출 완료'); if (isDeepLink || (!panels.length && !panelInfo.focusedContainerId)) { - dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })); + dispatch( + changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }) + ); dispatch(getHomeMainContents()); dispatch(getHomeLayout()); dispatch( @@ -1084,7 +1139,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { // 🔽 videoPlayIntentRef가 null인 경우: 비디오 재생 가능한 첫 번째 배너 찾기 if (!videoPlayIntentRef.current && bannerDataList) { - dlog('[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색'); + dlog( + '[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색' + ); // HomeBanner.jsx의 defaultFocus 계산 로직과 동일 let targetIndex = 0; @@ -1138,7 +1195,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { }; lastPlayedBannerIdRef.current = bannerId; - dlog('[HomePanel] *** videoPlayIntentRef 설정 완료:', videoPlayIntentRef.current); + dlog( + '[HomePanel] *** videoPlayIntentRef 설정 완료:', + videoPlayIntentRef.current + ); } else { dlog('[HomePanel] *** ⚠️ 비디오 재생 가능한 배너를 찾지 못함'); } @@ -1181,7 +1241,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { // 🔽 DetailPanel에서 돌아온 뒤 포커스를 마지막 포커스 대상에 복원 dlog('[HomePanel] *** 🎯 Focus 복원 준비'); - const targetFocusId = panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current; + const targetFocusId = + panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current; dlog( '[HomePanel] *** 📍 targetFocusId:', targetFocusId, @@ -1250,7 +1311,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { targetSpotlightCateNm = c.getAttribute('data-catcd-nm'); } - const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`); + const tBody = document.querySelector( + `[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]` + ); const currentSpot = c && tBody.contains(c) ? targetSpotlightId : null; dispatch(checkEnterThroughGNB(false)); @@ -1263,7 +1326,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { currentCateName: targetSpotlightCateNm, // <<<<<<< HEAD focusedContainerId: focusedContainerIdRef.current, - lastFocusedTargetId: lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId, + lastFocusedTargetId: + lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId, // ======= // focusedContainerId: focusedContainerId, // >>>>>>> gitlab/develop @@ -1339,7 +1403,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => { <> {/* HomePanel용 메모리 상주 그라데이션 배경 */} )} 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 8aa77e27..6a0a52a3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -8,21 +8,32 @@ import { setContainerLastFocusedElement } from '@enact/spotlight/src/container'; import { sendLogCuration } from '../../../actions/logActions'; import { getSubCategory } from '../../../actions/mainActions'; -import { pushPanel, navigateFromSubCategory } from '../../../actions/panelActions'; +import { + navigateFromSubCategory, + pushPanel, +} from '../../../actions/panelActions'; import Tag from '../../../components/TItemCard/Tag'; import TItemCardNew from '../../../components/TItemCard/TItemCard.new'; import TScroller from '../../../components/TScroller/TScroller'; import usePrevious from '../../../hooks/usePrevious'; import useScrollReset from '../../../hooks/useScrollReset'; import useScrollTo from '../../../hooks/useScrollTo'; -import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, LOG_TP_NO, panel_names } from '../../../utils/Config'; +import { + LOG_CONTEXT_NAME, + LOG_MESSAGE_ID, + LOG_TP_NO, + panel_names, +} from '../../../utils/Config'; import { SpotlightIds } from '../../../utils/SpotlightIds'; import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav'; import css from '../../HomePanel/SubCategory/SubCategory.module.less'; const SpottableComponent = Spottable('div'); const Container = SpotlightContainerDecorator({ enterTo: null }, 'div'); -const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); +const ContainerBasic = SpotlightContainerDecorator( + { enterTo: 'last-focused' }, + 'div' +); const getExpsOrdByLgCatCd = (array, value) => { const expsOrd = array.findIndex(({ lgCatCd }) => value === lgCatCd) + 1; @@ -40,12 +51,24 @@ export default memo(function SubCategory({ }) { const dispatch = useDispatch(); const { getScrollTo, scrollLeft } = useScrollTo(); - const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, false); + const { handleScrollReset, handleStopScrolling } = useScrollReset( + scrollLeft, + false + ); - const categoryInfos = useSelector((state) => state.home.menuData?.data?.homeCategory); - const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos); + const categoryInfos = useSelector( + (state) => state.home.menuData?.data?.homeCategory + ); + const categoryItemInfos = useSelector( + (state) => state.main.subCategoryData?.categoryItemInfos + ); - const foruItemInfos = useSelector((state) => state.main.recommendProduct[0]?.productInfos); + const foruItemInfos = useSelector( + (state) => state.main.recommendProduct[0]?.productInfos + ); + const { userNumber } = useSelector( + (state) => state.common.appStatus.loginUserData + ); const nowMenu = useSelector((state) => state.common.menu.nowMenu); @@ -207,35 +230,45 @@ export default memo(function SubCategory({ }, [handleShelfFocus]); useEffect(() => { - if (!foruItemInfos || foruItemInfos.length === 0) { + if (userNumber) { + if (!foruItemInfos || foruItemInfos.length === 0) { + const baseData = + categoryItemInfos?.subCatItemList?.map((item) => ({ + ...item, + foryou: false, + })) || []; + setCategoryItemNewData(baseData); + return; + } + + const recommendedData = + foruItemInfos?.map((item) => ({ + ...item, + foryou: true, + })) || []; + + const recommendedPrdtIds = new Set( + recommendedData.map((item) => item.prdtId) + ); + const baseData = categoryItemInfos?.subCatItemList?.map((item) => ({ ...item, - foryou: false, + foryou: recommendedPrdtIds.has(item.prdtId), })) || []; - setCategoryItemNewData(baseData); - return; + + setCategoryItemNewData([...baseData]); + } else { + setCategoryItemNewData(categoryItemInfos?.subCatItemList); } - - const recommendedData = - foruItemInfos?.map((item) => ({ - ...item, - foryou: true, - })) || []; - - const recommendedPrdtIds = new Set(recommendedData.map((item) => item.prdtId)); - - const baseData = - categoryItemInfos?.subCatItemList?.map((item) => ({ - ...item, - foryou: recommendedPrdtIds.has(item.prdtId), - })) || []; - - setCategoryItemNewData([...baseData]); - }, [categoryItemInfos?.subCatItemList, foruItemInfos]); + }, [categoryItemInfos?.subCatItemList, foruItemInfos, userNumber]); return ( - +