feat: jwt 토큰 만료 처리

package.json

@@ -22,6 +22,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
+    "react-jwt": "^1.1.8",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
@@ -59,7 +60,7 @@
     ]
   },
   "devDependencies": {
-    "@types/jsonwebtoken": "^9.0.1",
+    "@types/jsonwebtoken": "^9.0.2",
     "@types/react-modal": "^3.16.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",

src/components/pages/login/auth-page/Auth.tsx

@@ -60,8 +60,9 @@ export default function Auth() {
       setUserState(storeUser);
       navigate(`/chat/channel`);
     } catch (error) {
-      alert('인증 코드를 다시 입력해주세요');
+      alert('틀린 인증 코드입니다. 다시 로그인해주세요.');
       console.log(error);
+      removeCookie('token');
       navigate(`/`);
     }
   };
@@ -99,6 +100,7 @@ export default function Auth() {
     } else {
       verifyTimeOut();
       alert('시간이 지났습니다. 다시 로그인해주세요.');
+      removeCookie('token');
       navigate(`/`);
     }
 

src/components/pages/login/login-page/CheckLogin.tsx

@@ -2,20 +2,14 @@ import React, { ReactNode, useEffect, useRef } from 'react';
 import { RecoilRoot, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { Socket, io } from 'socket.io-client';
-// import jwt from 'jsonwebtoken';
+import { isExpired, decodeToken } from 'react-jwt';
 import { userState } from '../../../../recoil/locals/login/atoms/atom';
 import { IError } from '../../chat/chatroom-page';
 
 interface Props {
   children: ReactNode;
 }
 
-// const isTokenExpired = (token: string) => {
-//   const decodedToken = jwt.decode(token);
-//   console.log(decodedToken);
-// };
-// 토큰 만료 시 offline 요청, recoil 비워주기
-
 export default function CheckLogin({ children }: Props) {
   const navigate = useNavigate();
   const userInfo = useRecoilValue(userState);
@@ -24,11 +18,22 @@ export default function CheckLogin({ children }: Props) {
 
   useEffect(() => {
     if (userInfo.token === '') {
+      socketRef.current?.close();
       navigate('/');
+      return;
+    }
+    if (isExpired(userInfo.token) === true) {
+      const resetUser = {
+        token: '',
+        userId: '',
+        nickname: '',
+        imageUrl: '',
+      };
+      setUserState(resetUser);
+      socketRef.current?.close();
+      navigate('/');
+      return;
     }
-  }, []);
-
-  useEffect(() => {
     if (userInfo.token !== '' && socketRef.current === null) {
       socketRef.current = io(`${process.env.REACT_APP_BASE_BACKEND_URL}`, {
         path: '/socket.io',
@@ -38,21 +43,16 @@ export default function CheckLogin({ children }: Props) {
       });
       socketRef.current.emit('login');
       socketRef.current.on('error', (error: IError) => {
-        console.log(error);
-        navigate('/');
-      });
-    }
-    return () => {
-      if (userInfo.token !== '' && socketRef.current === null) {
         const resetUser = {
           token: '',
           userId: '',
           nickname: '',
           imageUrl: '',
         };
         setUserState(resetUser);
-      }
-    };
-  }, [socketRef.current]);
+        navigate('/');
+      });
+    }
+  });
   return <div>{children}</div>;
 }