timer to ref

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState, useRef } from "react";
 
 import classNames from "classnames";
 import { indexOf } from "ilib/lib/JSUtils";
@@ -329,7 +329,7 @@ export default function MainView({ className }) {
 
   const [intervalActive, setIntervalActive] = useState(true);
   const [alertItems, setAlertItems] = useState([]);
-  const [popupTimer, setPopupTimer] = useState(null); // 타이머 ID를 저장할 상태 변수
+  const popupTimerRef = useRef(null); // 타이머 ID를 저장할 상태 변수
 
   const { upComingAlertShow } = useSelector(
     (state) => state.myPage.upComingData
@@ -377,17 +377,17 @@ export default function MainView({ className }) {
         setIntervalActive((prev) => !prev);
       }, 30000);
       // 타이머 ID를 상태 변수에 저장
-      setPopupTimer(timerId);
+      popupTimerRef.current = timerId;
     }
   }, [popupVisible, activePopup]);
 
   useEffect(() => {
     return () => {
-      if (popupTimer) {
+      if (popupTimerRef.current) {
-        clearTimeout(popupTimer);
+        clearTimeout(popupTimerRef.current);
       }
     };
-  }, [popupTimer]);
+  }, []);
 
   // 알람 체크 - 50초 마다 시간 체크(분까지만 체크)
   useEffect(() => {
@@ -470,10 +470,11 @@ export default function MainView({ className }) {
     dispatch(setHidePopup());
     setIntervalActive((prev) => !prev);
 
-    if (popupTimer) {
+    if (popupTimerRef.current) {
-      clearTimeout(popupTimer); // 버튼 클릭 시 타이머 제거
+      clearTimeout(popupTimerRef.current); // 버튼 클릭 시 타이머 제거
+      popupTimerRef.current = null;
     }
-  }, [dispatch, alertItems, popupTimer, sendLogAlarmClick]);
+  }, [dispatch, alertItems, sendLogAlarmClick]);
 
   const onWatchClose = useCallback(() => {
     const {