diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx index 740815f8..0e36490b 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx @@ -34,15 +34,13 @@ const ContainerBasic = SpotlightContainerDecorator({ enterTo: null }, "div"); export default function Favorites({ title, panelInfo, isOnTop }) { const dispatch = useDispatch(); - const favoritesDatas = useSelector( - (state) => state.myPage.favoriteData.favorites - ); - const favoriteRetCode = useSelector((state) => state.myPage.favoriteRetCode); - + const favoritesDatas = useSelector((state) => state.myPage.favoriteData.favorites); + const showLoadingPanel = useSelector((state) => state.common.appStatus.showLoadingPanel); const [activeDelete, setActiveDelete] = useState(false); const [selectedItems, setSelectedItems] = useState({}); const [selectAll, setSelectAll] = useState(false); const [loading, setLoading] = useState(true); + const spotRestoredRef = useRef(false); let timerRef = useRef(); @@ -50,15 +48,18 @@ export default function Favorites({ title, panelInfo, isOnTop }) { const focusedContainerIdRef = useRef(null); useEffect(() => { - if (isOnTop) { - timerRef.current = setTimeout(() => { - if ( - panelInfo.currentSpot && - document.querySelector( - `[data-spotlight-id="${panelInfo.currentSpot}"]` - ) - ) { - Spotlight.focus(panelInfo.currentSpot); + if (isOnTop && !loading) { + setTimeout(() => { + if (activeDelete) { + Spotlight.focus("favorites_header"); + return; + } + let ret = null; + if (!spotRestoredRef.current && panelInfo.currentSpot) { + ret = Spotlight.focus(panelInfo.currentSpot); + } + if (ret) { + spotRestoredRef.current = true; } else { if (favoritesDatas && favoritesDatas.length > 0) { Spotlight.focus(SpotlightIds.MY_PAGE_FAVORITES_BOX); @@ -68,36 +69,17 @@ export default function Favorites({ title, panelInfo, isOnTop }) { } }, 0); } - }, [isOnTop, panelInfo, favoritesDatas]); + }, [isOnTop, loading, panelInfo, favoritesDatas]); useEffect(() => { - if (favoritesDatas) { - if (favoritesDatas.length === 0) { - timerRef.current = setTimeout( - () => Spotlight.focus("mypage-favorites-nodata"), - 0 - ); - } - - if (favoriteRetCode === 0) { - setLoading(false); - - if (!panelInfo.currentSpot) { - timerRef.current = setTimeout( - () => Spotlight.focus(SpotlightIds.MY_PAGE_FAVORITES_BOX), - 0 - ); - } - } - } - }, [dispatch, favoritesDatas, favoriteRetCode, loading, panelInfo]); + clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => { + setLoading(showLoadingPanel.show); + }, 100); + }, [dispatch, showLoadingPanel]); useEffect(() => { dispatch(getMyFavorite()); - - if (!panelInfo?.currentSpot) { - clearFavorites(); - } }, [dispatch, panelInfo]); useEffect(() => { @@ -157,20 +139,8 @@ export default function Favorites({ title, panelInfo, isOnTop }) { })); } } - setActiveDelete((prev) => !prev); - if (favoritesDatas) { - timerRef.current = setTimeout( - () => Spotlight.focus(SpotlightIds.MY_PAGE_FAVORITES_BOX), - 0 - ); - } - }, [ - dispatch, - favoritesDatas, - selectedItems, - activeDelete, - ]); + }, [dispatch, favoritesDatas, selectedItems, activeDelete]); const handleSelectAllToggle = useCallback(() => { const newState = !selectAll; @@ -192,7 +162,9 @@ export default function Favorites({ title, panelInfo, isOnTop }) { const handleCancelButtonClick = useCallback(() => { setActiveDelete(false); - + setTimeout(() => { + Spotlight.focus("favorites_header"); + }, 0); const initialSelectedItems = favoritesDatas?.reduce((acc, item) => { acc[item.prdtId] = false; return acc; @@ -200,13 +172,6 @@ export default function Favorites({ title, panelInfo, isOnTop }) { setSelectedItems(initialSelectedItems); setSelectAll(false); - - if (favoritesDatas) { - timerRef.current = setTimeout( - () => Spotlight.focus(SpotlightIds.MY_PAGE_FAVORITES_BOX), - 0 - ); - } }, [favoritesDatas, activeDelete]); const handleItemClick = useCallback( @@ -256,6 +221,7 @@ export default function Favorites({ title, panelInfo, isOnTop }) { return ( <> state.common); - let timerRef = useRef(); - useEffect(() => { - if (recentlyDatas.length === 0) { - timerRef.current = setTimeout( - () => Spotlight.focus("mypage-recentlyViewed-nodata"), - 0 - ); - } if (recentlyDatas) { - timerRef.current = setTimeout(() => { + setTimeout(() => { const node = document.querySelector(`[id="${SpotlightIds.TBODY}"]`); - if (node) { + if (activeDelete) { + Spotlight.focus("recentlyviewed_header"); + } else if (recentlyDatas.length === 0) { + Spotlight.focus("mypage-recentlyViewed-nodata"); + } else if (node) { Spotlight.focus(node); } }, 0); } - }, [recentlyDatas, activeDelete]); + }, [recentlyDatas]); useEffect(() => { if (panelInfo) { @@ -86,10 +82,6 @@ export default function RecentlyViewed({ title, panelInfo, isOnTop }) { } }, [panelInfo]); - useEffect(() => { - return () => timerRef.current && clearTimeout(timerRef.current); - }, []); - useEffect(() => { // selectedItems 초기화 작업 const initialSelectedItems = recentlyDatas?.reduce((acc, currVal) => { @@ -197,7 +189,9 @@ export default function RecentlyViewed({ title, panelInfo, isOnTop }) { const handleCancelButtonClick = useCallback(() => { setActiveDelete(false); - + setTimeout(() => { + Spotlight.focus("recentlyviewed_header"); + }, 0); const initialSelectedItems = recentlyDatas?.reduce((acc, currVal) => { currVal.productInfos.map((item) => { acc[item.prdtId] = false; @@ -321,6 +315,7 @@ export default function RecentlyViewed({ title, panelInfo, isOnTop }) { return ( <>