diff --git a/src/App.js b/src/App.js index d25864e9efb06d467548e9fefaec18d62a4fccdb..2dc813fa3195eb4cea67f96b0ee2773102f2ac1f 100644 --- a/src/App.js +++ b/src/App.js @@ -62,8 +62,12 @@ function App() { }); const [lastActivity, setLastActivity] = useState(Date.now()); - const [lastTokenRefresh, setLastTokenRefresh] = useState(Date.now()); - + const INACTIVITY_TIMEOUT = 60000; // 1분 + + // 사용자 활동 감지 함수 + const updateLastActivity = () => { + setLastActivity(Date.now()); + }; // // 토큰 만료 체크 함수 // const checkTokenExpiration = () => { @@ -130,51 +134,95 @@ function App() { } }; - // 사용자 활동 감지 - useEffect(() => { - const updateActivity = async (e) => { - // input 태그나 textarea에서의 이벤트는 무시 - if (e.target.tagName.toLowerCase() === 'input' || - e.target.tagName.toLowerCase() === 'textarea') { - console.log('입력 필드 이벤트 무시'); - return; - } + // 사용자 활동 감지 - 안되면 다시 활성화 + // useEffect(() => { + // const updateActivity = async (e) => { + // // input 태그나 textarea에서의 이벤트는 무시 + // if (e.target.tagName.toLowerCase() === 'input' || + // e.target.tagName.toLowerCase() === 'textarea') { + // console.log('입력 필드 이벤트 무시'); + // return; + // } - const now = Date.now(); - const timeSinceLastRefresh = now - lastTokenRefresh; - setLastActivity(now); + // const now = Date.now(); + // const timeSinceLastRefresh = now - lastTokenRefresh; + // setLastActivity(now); - console.log('활동 감지:', { - 현재시간: new Date(now).toLocaleString(), - 마지막갱신: new Date(lastTokenRefresh).toLocaleString(), - 경과시간: Math.floor(timeSinceLastRefresh / 1000 / 60) + '분' - }); + // console.log('활동 감지:', { + // 현재시간: new Date(now).toLocaleString(), + // 마지막갱신: new Date(lastTokenRefresh).toLocaleString(), + // 경과시간: Math.floor(timeSinceLastRefresh / 1000 / 60) + '분' + // }); - // 마지막 토큰 갱신으로부터 00분 이상 지났을 때만 갱신 - if (timeSinceLastRefresh > (process.env.REACT_APP_TOKEN_EXPIRATION-1) * 60 * 1000) { - console.log('토큰 갱신 시도...'); - await refreshToken(); - } else { - console.log(`토큰 갱신까지 ${Math.ceil((process.env.REACT_APP_TOKEN_EXPIRATION-1) - timeSinceLastRefresh/1000/60)}분 남음`); + // // 마지막 토큰 갱신으로부터 00분 이상 지났을 때만 갱신 + // if (timeSinceLastRefresh > (process.env.REACT_APP_TOKEN_EXPIRATION-1) * 60 * 1000) { + // console.log('토큰 갱신 시도...'); + // await refreshToken(); + // } else { + // console.log(`토큰 갱신까지 ${Math.ceil((process.env.REACT_APP_TOKEN_EXPIRATION-1) - timeSinceLastRefresh/1000/60)}분 남음`); + // } + // }; + + // console.log('이벤트 리스너 등록됨'); + // window.addEventListener('mousemove', updateActivity); + // window.addEventListener('keydown', updateActivity); + // window.addEventListener('click', updateActivity); + // window.addEventListener('scroll', updateActivity); + // window.addEventListener('touchstart', updateActivity); + + // return () => { + // console.log('이벤트 리스너 제거됨'); + // window.removeEventListener('mousemove', updateActivity); + // window.removeEventListener('keydown', updateActivity); + // window.removeEventListener('click', updateActivity); + // window.removeEventListener('scroll', updateActivity); + // window.removeEventListener('touchstart', updateActivity); + // }; + // }, [lastTokenRefresh]); +//안되면 다시 활성화 ------------- + +const logout = () => { + localStorage.removeItem('token'); + setUser(null); + setIsAuthenticated(false); +}; + + +useEffect(() => { + if (isAuthenticated) { + const checkInactivity = () => { + const inactiveTime = Date.now() - lastActivity; + if (inactiveTime > INACTIVITY_TIMEOUT) { + logout(); + toast.info('장시간 활동이 없어 자동 로그아웃되었습니다.'); } }; - console.log('이벤트 리스너 등록됨'); + const updateActivity = () => { + setLastActivity(Date.now()); + }; + + // 사용자 활동 감지를 위한 이벤트 리스너 window.addEventListener('mousemove', updateActivity); window.addEventListener('keydown', updateActivity); window.addEventListener('click', updateActivity); window.addEventListener('scroll', updateActivity); window.addEventListener('touchstart', updateActivity); + // 비활성 상태 체크 인터벌 설정 (5초마다) + const inactivityCheck = setInterval(checkInactivity, 5000); + return () => { - console.log('이벤트 리스너 제거됨'); + // 이벤트 리스너 및 인터벌 정리 window.removeEventListener('mousemove', updateActivity); window.removeEventListener('keydown', updateActivity); window.removeEventListener('click', updateActivity); window.removeEventListener('scroll', updateActivity); window.removeEventListener('touchstart', updateActivity); + clearInterval(inactivityCheck); }; - }, [lastTokenRefresh]); + } +}, [isAuthenticated, lastActivity, logout]); // 비활성 시간 체크 useEffect(() => { @@ -196,12 +244,7 @@ function App() { setIsAuthenticated(true); }; - const logout = () => { - localStorage.removeItem('token'); - setUser(null); - setIsAuthenticated(false); - }; - + return ( <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}> <ToastContext.Provider value={toast}>