[SHOPTIME-3347] My Page / Reminders / 사방향키 Delete All 한후 포커싱 사라짐

Changed files:
1. Reminders.jsx

Detail note:
1. Modify the initial focus logic and delete the duplicate API request

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

@@ -56,6 +56,75 @@ export default function Reminders({ title, cbScrollTo }) {
   const focusTimerRef = useRef();
   const alertShowTimer = useRef(null);
 
+  useEffect(() => {
+    if (upComingAlertShow && Object.keys(upComingAlertShow).length > 0) {
+      const alertShowsArray = upComingAlertShow?.alertShows;
+      const alertShowsLength = upComingAlertShow?.alertShows.length;
+
+      if (alertShowsArray) {
+        const focusTarget =
+          alertShowsLength > 0
+            ? SpotlightIds.MY_PAGE_REMINDRES_BOX
+            : "mypage-reminder-checkbox";
+
+        focusTimerRef.current = setTimeout(() => Spotlight.focus(focusTarget));
+      }
+    }
+  }, [upComingAlertShow]);
+
+  useEffect(() => {
+    setUseAlarm(upComingAlertShow?.upcomAlamUseFlag === "Y");
+  }, [upComingAlertShow?.upcomAlamUseFlag]);
+
+  useEffect(() => {
+    const initialSelectedItems = {};
+    upComingAlertShow.alertShows?.forEach((item) => {
+      initialSelectedItems[item.showId] = false;
+    });
+    setSelectedItems(initialSelectedItems);
+  }, [upComingAlertShow]);
+
+  useEffect(() => {
+    const removeOldItems = () => {
+      let showList = [];
+
+      if (
+        upComingAlertShow?.alertShows &&
+        upComingAlertShow.alertShows.length > 0
+      ) {
+        const currentDate = new Date();
+
+        for (let i = 0; i < upComingAlertShow.alertShows.length; i++) {
+          const regDate = new Date(upComingAlertShow.alertShows[i].regDt);
+          const daysDifference = Math.floor(
+            (regDate - currentDate) / (1000 * 60 * 60 * 24)
+          );
+
+          if (daysDifference >= 30) {
+            showList.push({
+              patnrId: upComingAlertShow.alertShows[i].patnrId,
+              showId: upComingAlertShow.alertShows[i].showId,
+            });
+          }
+        }
+      }
+
+      if (showList.length > 0) {
+        dispatch(deleteMyUpcomingAlertShow({ showList }));
+        dispatch(getMyUpcomingAlertShow());
+      }
+    };
+
+    removeOldItems();
+  }, [dispatch, upComingAlertShow]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(focusTimerRef.current);
+      clearTimeout(alertShowTimer.current);
+    };
+  }, []);
+
   const handleToggleSwitchButton = useCallback(() => {
     const flag = useAlarm ? "N" : "Y";
 
@@ -166,81 +235,6 @@ export default function Reminders({ title, cbScrollTo }) {
     setSelectAll(false);
   }, [upComingAlertShow]);
 
-  useEffect(() => {
-    if (
-      upComingAlertShow &&
-      upComingAlertShow.alertShows &&
-      upComingAlertShow.alertShows.length > 0
-    ) {
-      focusTimerRef.current = setTimeout(
-        () => Spotlight.focus(SpotlightIds.MY_PAGE_REMINDRES_BOX),
-        0
-      );
-    } else {
-      focusTimerRef.current = setTimeout(
-        () => Spotlight.focus("mypage-reminder-checkbox"),
-        0
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(focusTimerRef.current);
-      clearTimeout(alertShowTimer.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    setUseAlarm(upComingAlertShow?.upcomAlamUseFlag === "Y");
-  }, []);
-
-  useEffect(() => {
-    dispatch(getMyUpcomingAlertShow());
-  }, [dispatch]);
-
-  useEffect(() => {
-    const initialSelectedItems = {};
-    upComingAlertShow.alertShows?.forEach((item) => {
-      initialSelectedItems[item.showId] = false;
-    });
-    setSelectedItems(initialSelectedItems);
-  }, [upComingAlertShow]);
-
-  useEffect(() => {
-    const removeOldItems = () => {
-      let showList = [];
-
-      if (
-        upComingAlertShow?.alertShows &&
-        upComingAlertShow.alertShows.length > 0
-      ) {
-        const currentDate = new Date();
-
-        for (let i = 0; i < upComingAlertShow.alertShows.length; i++) {
-          const regDate = new Date(upComingAlertShow.alertShows[i].regDt);
-          const daysDifference = Math.floor(
-            (regDate - currentDate) / (1000 * 60 * 60 * 24)
-          );
-
-          if (daysDifference >= 30) {
-            showList.push({
-              patnrId: upComingAlertShow.alertShows[i].patnrId,
-              showId: upComingAlertShow.alertShows[i].showId,
-            });
-          }
-        }
-      }
-
-      if (showList.length > 0) {
-        dispatch(deleteMyUpcomingAlertShow({ showList }));
-        dispatch(getMyUpcomingAlertShow());
-      }
-    };
-
-    removeOldItems();
-  }, [dispatch, upComingAlertShow]);
-
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const sortedAlertShows = upComingAlertShow.alertShows
@@ -370,7 +364,7 @@ export default function Reminders({ title, cbScrollTo }) {
               dangerouslySetInnerHTML={{
                 __html: `${$L("Reminder Notification turned OFF")}`,
               }}
-            ></div>
+            />
           }
           onClose={handleCancel}
         />
@@ -389,7 +383,7 @@ export default function Reminders({ title, cbScrollTo }) {
               dangerouslySetInnerHTML={{
                 __html: `${$L("Reminder Notification turned ON")}`,
               }}
-            ></div>
+            />
           }
           onClose={handleCancel}
         />