Merge pull request #129 from Moaguide-develop/feat/notification

fix: 토큰 관리

Author: jiohjung98

src/app/mypage/page.tsx

@@ -25,37 +25,31 @@ const Mypage = () => {
     queryFn: fetchBookmarks
   });
 
-  const handleLogout = useCallback(async () => {
+  useEffect(() => {
+    if (!isLoggedIn) {
+      router.push('/');
+    }
+  }, [isLoggedIn, router]);
+  
+  useEffect(() => {
+    const checkLoginStatus = async () => {
+      const accessToken = getCookie('access_token');
+      if (!accessToken || accessToken === 'undefined') {
+        router.push('/sign');
+      } else {
+        setLoading(false);
+      }
+    };
+    checkLoginStatus();
+  }, [router]);
+
+  const handleLogout = async () => {
     await logout();
     setIsLoggedIn(false);
     removeCookie('access_token');
     removeCookie('refresh');
     router.push('/sign');
-  }, [router, setIsLoggedIn]);
-
-  const checkAndRefreshToken = useCallback(async () => {
-    const accessToken = getCookie('access_token');
-    const refreshToken = getCookie('refresh');
-    
-    if (!accessToken && refreshToken) {
-      try {
-        await refreshAccessToken();
-        setIsLoggedIn(true);
-        setLoading(false);
-      } catch (error) {
-        handleLogout();
-      }
-    } else if (!accessToken) {
-      handleLogout();
-    } else {
-      setIsLoggedIn(true);
-      setLoading(false);
-    }
-  }, [setIsLoggedIn, handleLogout]);
-
-  useEffect(() => {
-    checkAndRefreshToken();
-  }, [checkAndRefreshToken]);
+  };
 
   if (loading) {
     return null;

src/components/common/Gnb.tsx

@@ -2,9 +2,9 @@
 
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuthStore } from '@/store/userAuth.store';
-import { getCookie, removeCookie } from '@/utils/cookie';
+import { getCookie } from '@/utils/cookie';
 import { refreshAccessToken } from '@/service/auth';
 
 const Gnb = () => {
@@ -13,35 +13,38 @@ const Gnb = () => {
   const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
 
-  const handleLogout = useCallback(() => {
-    removeCookie('access_token');
-    removeCookie('refresh');
-    setIsLoggedIn(false);
-    router.push('/sign');
-  }, [setIsLoggedIn, router]);
-
-  const checkAndRefreshToken = useCallback(async () => {
+  const checkAndRefreshToken = async () => {
     const accessToken = getCookie('access_token');
     const refreshToken = getCookie('refresh');
-    
+
+    // 만약 accessToken이 없고 refreshToken이 있으면 토큰 갱신 시도
     if (!accessToken && refreshToken) {
       try {
-        await refreshAccessToken();
-        setIsLoggedIn(true);
+        const newAccessToken = await refreshAccessToken();
+        if (newAccessToken) {
+          setIsLoggedIn(true);
+        } else {
+          setIsLoggedIn(false);
+        }
       } catch (error) {
-        handleLogout();
+        console.error('토큰 갱신 실패:', error);
+        setIsLoggedIn(false);
       }
-    } else if (!accessToken) {
-      handleLogout();
     } else {
-      setIsLoggedIn(true);
+      setIsLoggedIn(!!accessToken); // accessToken이 있으면 로그인 상태 유지
     }
-  }, [handleLogout, setIsLoggedIn]);
+    setIsLoading(false);
+  };
 
   useEffect(() => {
     checkAndRefreshToken();
-    setIsLoading(false);
-  }, [checkAndRefreshToken]);
+
+    // 주기적으로 토큰 갱신
+    const interval = setInterval(checkAndRefreshToken, 30 * 1000); // 55분마다 갱신
+
+    // 컴포넌트가 언마운트될 때 interval 해제
+    return () => clearInterval(interval);
+  }, [setIsLoggedIn]);
 
   if (isLoading) return null;
 

src/utils/localStorage.ts

@@ -1,6 +1,6 @@
 import { getCookie, removeCookie, setCookie } from "./cookie";
 
-const TOKEN_EXPIRATION_TIME = 60 * 60 * 1000;
+const TOKEN_EXPIRATION_TIME = 60 * 1000;
 
 export const setToken = (token: string) => {
   const expires = new Date(Date.now() + TOKEN_EXPIRATION_TIME);