♻ refactor: 로그인 만료 로직 Header 컴포넌트로 이동

JECT-Study · Oct 22, 2024 · 14be663 · 14be663
1 parent 55df6a7
commit 14be663
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 63 deletions.
diff --git a/grass-diary/src/components/Layout/Header.tsx b/grass-diary/src/components/Layout/Header.tsx
@@ -5,11 +5,61 @@ import { Profile } from '@components/index';
 import { useNavigate } from 'react-router-dom';
 import { useUser } from '@state/user/useUser';
 import { useModal } from '@state/modal/useModal';
+import { useEffect } from 'react';
+import { MODAL } from '@constants/message';
+import { semantic } from '@styles/semantic';
+import { INTERACTION } from '@styles/interaction';
+import { useAuthExpDate } from '@state/auth/authStore';
+import useExpDate from '@state/auth/useExpDate';
+import useLogout from '@hooks/useLogout';
 
 const Header = () => {
   const memberId = useUser();
-  const { loginModal } = useModal();
+  const { loginModal, modal } = useModal();
   const navigate = useNavigate();
+  const clearAuth = useLogout();
+  const expDate = useAuthExpDate();
+  const { handleExpDate } = useExpDate();
+
+  const hasExpired = (expirationDate: Date) => {
+    if (!expirationDate) return false;
+    const currentDate = new Date();
+    const timeDiff = expirationDate.getTime() - currentDate.getTime();
+    return timeDiff <= 0 ? true : false;
+  };
+
+  // 로그인 만료 타이머
+  useEffect(() => {
+    let expireInterval: NodeJS.Timeout;
+    if (!expDate) handleExpDate();
+
+    if (expDate) {
+      expireInterval = setInterval(() => {
+        if (hasExpired(expDate)) {
+          const setting = {
+            title: MODAL.authentication_error.title,
+            content: MODAL.authentication_error.content,
+          };
+
+          const button1 = {
+            active: true,
+            text: MODAL.confirm,
+            color: semantic.light.accent.solid.hero,
+            interaction: INTERACTION.accent.subtle(),
+            clickHandler: () => (window.location.href = '/'),
+          };
+
+          clearAuth(true);
+          clearInterval(expireInterval);
+          modal(setting, button1);
+        }
+      }, 60000);
+    }
+
+    return () => {
+      if (expireInterval) clearInterval(expireInterval);
+    };
+  }, [memberId, expDate]);
 
   return (
     <S.Header>

diff --git a/grass-diary/src/state/user/useUser.ts b/grass-diary/src/state/user/useUser.ts
@@ -11,38 +11,14 @@ import { semantic } from '@styles/semantic';
 import { INTERACTION } from '@styles/interaction';
 import { useModal } from '@state/modal/useModal';
 import { useNetwork } from '@hooks/useNetwork';
-import { jwtDecode } from 'jwt-decode';
-import { useAuthActions } from '@state/auth/authStore';
-
-const getTokenExpirationDate = (token: string) => {
-  try {
-    const decode = jwtDecode(token);
-    if (!decode.exp) return;
-    const date = new Date(0);
-    date.setUTCSeconds(decode.exp);
-    return date;
-  } catch (error) {
-    console.error('Failed to decode token:', error);
-    return null;
-  }
-};
-
-const hasExpired = (expirationDate: Date) => {
-  if (!expirationDate) return false;
-  const currentDate = new Date();
-  const timeDiff = expirationDate.getTime() - currentDate.getTime();
-  return timeDiff <= 0 ? true : false;
-};
 
 const fetchAxios = async () => {
   const res = await API.get(END_POINT.member_info);
   return res.data.memberId;
 };
 
 export const useUser = () => {
-  const accessToken = localStorage.getItem('accessToken');
   const { isAuthenticated } = useAuth();
-  const { setIsAuthenticated } = useAuthActions();
   const memberId = useMemberId();
   const setMemberId = useSetMemberId();
   const { modal } = useModal();
@@ -93,43 +69,5 @@ export const useUser = () => {
     }
   }, [isAuthenticated, isError, isSuccess]);
 
-  // 로그인 만료 타이머
-  useEffect(() => {
-    let expireInterval: NodeJS.Timeout;
-
-    if (accessToken) {
-      const expirationDate = getTokenExpirationDate(accessToken);
-
-      if (expirationDate) {
-        expireInterval = setInterval(() => {
-          if (hasExpired(expirationDate)) {
-            const setting = {
-              title: MODAL.authentication_error.title,
-              content: MODAL.authentication_error.content,
-            };
-
-            const button1 = {
-              active: true,
-              text: MODAL.confirm,
-              color: semantic.light.accent.solid.hero,
-              interaction: INTERACTION.accent.subtle(),
-              clickHandler: () => (window.location.href = '/'),
-            };
-
-            localStorage.removeItem('accessToken');
-            localStorage.setItem('logout', 'true');
-            setIsAuthenticated(false);
-            setMemberId(0);
-            clearInterval(expireInterval);
-            modal(setting, button1);
-          }
-        }, 60000);
-      }
-    }
-    return () => {
-      if (expireInterval) clearInterval(expireInterval);
-    };
-  }, [accessToken]);
-
   return memberId;
 };