src/App.js

@@ -51,23 +51,23 @@ function App() {
   const [user, setUser] = useState(() => {
     const token = localStorage.getItem('token');
     if (token) {
-      try {
-        const decoded = jwt_decode(token);
-        return {
-          _id: decoded.userId,
-          email: decoded.email,
-          name: decoded.name
-        };
-      } catch (error) {
-        return null;
-      }
+      const decoded = jwt_decode(token);
+      return {
+        _id: decoded.userId,
+        email: decoded.email,
+        name: decoded.name
+      };
     }
     return null;
   });
 
   const [lastActivity, setLastActivity] = useState(Date.now());
-  const [lastTokenRefresh, setLastTokenRefresh] = useState(Date.now());
-  
+  const INACTIVITY_TIMEOUT = 60000; // 1분
+
+  // 사용자 활동 감지 함수
+  const updateLastActivity = () => {
+    setLastActivity(Date.now());
+  };
 
   // // 토큰 만료 체크 함수
   // const checkTokenExpiration = () => {
@@ -134,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(2 - 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(() => {
@@ -200,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}>