From aa45fe41cd0b314b78e55a2921dabd2f948a1a85 Mon Sep 17 00:00:00 2001 From: yonghyon Date: Mon, 7 Oct 2024 18:17:57 +0900 Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3348]=20My=20page=20/=20Favorites,=20?= =?UTF-8?q?Recently=20Viewed=20Delete=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=ED=8F=AC=EC=BB=A4=EC=8B=B1=EC=9D=B4=20?= =?UTF-8?q?=EC=B2=AB=EB=B2=88=EC=A7=B8=20item=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=80=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=9B=90=EC=9D=B8=20?= =?UTF-8?q?:=20=EA=B8=B0=EB=B3=B8=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=EB=A5=BC?= =?UTF-8?q?=20=ED=95=98=EB=8B=A8=20body=20=EC=98=81=EC=97=AD=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95=ED=95=A8.=20=EB=8C=80=EC=B1=85?= =?UTF-8?q?=20:=20delete=20=EB=AA=A8=EB=93=9C=EC=9D=B8=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0,=20=ED=97=A4=EB=8D=94=20=EC=98=81=EC=97=AD=EC=97=90?= =?UTF-8?q?=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EA=B0=80=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPageSub/Favorites/Favorites.jsx | 86 ++++++------------- .../RecentlyViewed/RecentlyViewed.jsx | 27 +++--- 2 files changed, 37 insertions(+), 76 deletions(-) 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 ( <>