[SHOPTIME-3348] My page / Favorites, Recently Viewed Delete 버튼 클릭시 포커싱이 첫번째 item으로 가는 현상

원인 : 기본 포커스를 하단 body 영역으로 설정함.
대책 : delete 모드인 경우, 헤더 영역에 포커스 가도록 수정

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 (
     <>
       <THeader
+        spotlightId="favorites_header"
         title={title}
         className={css.favoritesHeader}
         ariaLabel="FAVORITE, heading 1"

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx

@@ -58,24 +58,20 @@ export default function RecentlyViewed({ title, panelInfo, isOnTop }) {
 
   const { httpHeader } = useSelector((state) => 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 (
     <>
       <THeader
+        spotlightId="recentlyviewed_header"
         title={title}
         className={css.recentlyViewedHeader}
         ariaLabel="RECENTLY VIEWED, heading 1"