diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index 5ee4cdd3..ad76b2ef 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/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) { - clearTimeout(popupTimer); + if (popupTimerRef.current) { + clearTimeout(popupTimerRef.current); } }; - }, [popupTimer]); + }, []); // 알람 체크 - 50초 마다 시간 체크(분까지만 체크) useEffect(() => { @@ -470,10 +470,11 @@ export default function MainView({ className }) { dispatch(setHidePopup()); setIntervalActive((prev) => !prev); - if (popupTimer) { - clearTimeout(popupTimer); // 버튼 클릭 시 타이머 제거 + if (popupTimerRef.current) { + clearTimeout(popupTimerRef.current); // 버튼 클릭 시 타이머 제거 + popupTimerRef.current = null; } - }, [dispatch, alertItems, popupTimer, sendLogAlarmClick]); + }, [dispatch, alertItems, sendLogAlarmClick]); const onWatchClose = useCallback(() => { const {