[251019] fix: MainView.jsx optimization-1

🕐 커밋 시간: 2025. 10. 19. 23:02:43

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +56줄
  • 삭제: -34줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/MainView/MainView.jsx (javascript):
    ❌ Deleted: checkForAlerts()

com.twin.app.shoptime/src/views/MainView/MainView.jsx

@@ -273,7 +273,7 @@ export default function MainView({ className, initService }) {
     }
 
     return null;
-  }, [panels, tabActivated, isHomeOnTop, errorCode]);
+  }, [panels, tabActivated, isHomeOnTop]);
 
   const onTabActivated = useCallback((activated) => {
     setTabActivated(activated);
@@ -367,7 +367,7 @@ export default function MainView({ className, initService }) {
       }
 
       if (panel?.name) {
-        setTimeout(() => {
+        const timeoutId = setTimeout(() => {
           // focus to panel if it's not preview video status changing case
           if (
             !lastPanelAction ||
@@ -377,9 +377,11 @@ export default function MainView({ className, initService }) {
             Spotlight.focus(panel?.name);
           }
         }, 0);
+
+        return () => clearTimeout(timeoutId);
       }
     }
-  }, [panels]);
+  }, [panels, lastPanelAction]);
 
   const cursorStateChange = useCallback(
     (ev) => {
@@ -414,14 +416,15 @@ export default function MainView({ className, initService }) {
   const popupTimerRef = useRef(null); // 타이머 ID를 저장할 상태 변수
 
   const { upComingAlertShow } = useSelector((state) => state.myPage.upComingData);
+  const upComingAlertShowRef = useRef(upComingAlertShow);
+  const firstAlertItem = useMemo(() => alertItems[0], [alertItems]);
 
   useEffect(() => {
-    if (
-      activePopup === Config.ACTIVE_POPUP.watchPopup &&
-      alertItems &&
-      alertItems.length > 0 &&
-      popupVisible
-    ) {
+    upComingAlertShowRef.current = upComingAlertShow;
+  }, [upComingAlertShow]);
+
+  useEffect(() => {
+    if (activePopup === Config.ACTIVE_POPUP.watchPopup && firstAlertItem && popupVisible) {
       const {
         hstNm,
         lgCatCd,
@@ -431,7 +434,7 @@ export default function MainView({ className, initService }) {
         showId,
         showNm,
         strtDt: alarmDt,
-      } = alertItems[0];
+      } = firstAlertItem;
 
       dispatch(
         sendLogAlarmPop({
@@ -448,10 +451,16 @@ export default function MainView({ className, initService }) {
         })
       );
     }
-  }, [activePopup, alertItems, popupVisible]);
+  }, [activePopup, firstAlertItem, popupVisible, dispatch]);
 
   // 팝업 30초 후 종료
   useEffect(() => {
+    // 이전 타이머 정리
+    if (popupTimerRef.current) {
+      clearTimeout(popupTimerRef.current);
+      popupTimerRef.current = null;
+    }
+
     if (popupVisible && activePopup === Config.ACTIVE_POPUP.watchPopup) {
       const timerId = setTimeout(() => {
         dispatch(setHidePopup());
@@ -460,15 +469,33 @@ export default function MainView({ className, initService }) {
       // 타이머 ID를 상태 변수에 저장
       popupTimerRef.current = timerId;
     }
-  }, [popupVisible, activePopup]);
 
-  useEffect(() => {
     return () => {
       if (popupTimerRef.current) {
         clearTimeout(popupTimerRef.current);
+        popupTimerRef.current = null;
       }
     };
-  }, []);
+  }, [popupVisible, activePopup, dispatch]);
+
+  // 알림 팝업
+  const checkForAlerts = useCallback(() => {
+    const currentUpComingAlertShow = upComingAlertShowRef.current;
+    if (
+      currentUpComingAlertShow?.upcomAlamUseFlag === 'Y' &&
+      currentUpComingAlertShow.alertShows?.length > 0
+    ) {
+      const alertList = currentUpComingAlertShow.alertShows.filter((show) =>
+        isSameDateTime(show.strtDt)
+      );
+
+      if (alertList.length > 0) {
+        setAlertItems(alertList);
+        dispatch(setShowPopup(Config.ACTIVE_POPUP.watchPopup));
+        setIntervalActive((prev) => !prev);
+      }
+    }
+  }, [dispatch]);
 
   // 알람 체크 - 50초 마다 시간 체크(분까지만 체크)
   useEffect(() => {
@@ -478,20 +505,7 @@ export default function MainView({ className, initService }) {
       }
     }, 50000);
     return () => clearInterval(interval);
-  }, [intervalActive, upComingAlertShow]);
-
-  // 알림 팝업
-  const checkForAlerts = () => {
-    if (upComingAlertShow?.upcomAlamUseFlag === 'Y' && upComingAlertShow.alertShows?.length > 0) {
-      const alertList = upComingAlertShow.alertShows.filter((show) => isSameDateTime(show.strtDt));
-
-      if (alertList.length > 0) {
-        setAlertItems(alertList);
-        dispatch(setShowPopup(Config.ACTIVE_POPUP.watchPopup));
-        setIntervalActive((prev) => !prev);
-      }
-    }
-  };
+  }, [intervalActive, checkForAlerts]);
 
   // 날짜 같은지 확인 하는 함수
   const isSameDateTime = (dateString) => {
@@ -509,6 +523,8 @@ export default function MainView({ className, initService }) {
 
   // 알림 확인 FEATURED_BRANDS_PANEL 이동
   const handleClick = useCallback(() => {
+    if (!firstAlertItem) return;
+
     const {
       hstNm,
       lgCatCd,
@@ -518,7 +534,7 @@ export default function MainView({ className, initService }) {
       showId,
       showNm,
       strtDt: alarmDt,
-    } = alertItems[0];
+    } = firstAlertItem;
 
     dispatch(
       sendLogAlarmClick({
@@ -552,7 +568,7 @@ export default function MainView({ className, initService }) {
       clearTimeout(popupTimerRef.current); // 버튼 클릭 시 타이머 제거
       popupTimerRef.current = null;
     }
-  }, [dispatch, alertItems]);
+  }, [dispatch, firstAlertItem]);
 
   const onClickNetworkError = useCallback(() => {
     if (initService) {
@@ -566,6 +582,8 @@ export default function MainView({ className, initService }) {
   }, [dispatch]);
 
   const onWatchClose = useCallback(() => {
+    if (!firstAlertItem) return;
+
     const {
       hstNm,
       lgCatCd,
@@ -575,7 +593,7 @@ export default function MainView({ className, initService }) {
       showId,
       showNm,
       strtDt: alarmDt,
-    } = alertItems[0];
+    } = firstAlertItem;
 
     dispatch(
       sendLogAlarmClick({
@@ -597,7 +615,7 @@ export default function MainView({ className, initService }) {
 
     setIntervalActive((prev) => !prev);
     dispatch(setHidePopup());
-  }, [alertItems, dispatch]);
+  }, [firstAlertItem, dispatch]);
 
   const sendLogIfNeeded = useCallback(() => {
     if (!watchRecordRef.current || Object.keys(watchRecordRef.current).length === 0) {
@@ -635,7 +653,7 @@ export default function MainView({ className, initService }) {
 
       return () => clearTimeout(timeoutId);
     }
-  }, [activePopup, loadingComplete]);
+  }, [activePopup]);
 
   useEffect(() => {
     if (deviceCountryCode === 'US') {
@@ -688,7 +706,7 @@ export default function MainView({ className, initService }) {
       {isLoading && <Loader />}
 
       {/* 시청예약 알림 팝업 */}
-      {activePopup === Config.ACTIVE_POPUP.watchPopup && (
+      {activePopup === Config.ACTIVE_POPUP.watchPopup && firstAlertItem && (
         <TPopUp
           kind="watchPopup"
           open={popupVisible}
@@ -697,17 +715,17 @@ export default function MainView({ className, initService }) {
           hasText
           hasButton
           hasLogo
-          logo={alertItems[0]?.patncLogoPath}
+          logo={firstAlertItem?.patncLogoPath}
           hasThumbnail
           thumbnail={
-            alertItems[0]?.thumbnailUrl == null || alertItems[0]?.thumbnailUrl == ''
+            firstAlertItem?.thumbnailUrl == null || firstAlertItem?.thumbnailUrl == ''
               ? defaultWatchItem
-              : alertItems[0]?.thumbnailUrl
+              : firstAlertItem?.thumbnailUrl
           }
           button1Text={$L('YES')}
           button2Text={$L('NO')}
           title={$L('Watch Now!')}
-          text={alertItems[0]?.showNm}
+          text={firstAlertItem?.showNm}
         />
       )}