Merge pull request #251 from MBTips/feature/사용자-로그인-유지-기한-관리

feat: 사용자 로그인 유지 기한 관리

Author: junjeeong

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Routes,
@@ -19,8 +19,10 @@ import KaKaoLogin from "@/pages/KaKaoLogin";
 import MbtiTestIntro from "@/pages/MbtiTestIntro";
 import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
-import CenteredLayout from "@/components/CenteredLayout";
 import Error from "@/pages/Error";
+import CenteredLayout from "@/components/CenteredLayout";
+import ToastMessage from "@/components/ToastMessage";
+import useAuthStore from "@/store/useAuthStore";
 
 const PageTracker = () => {
   const location = useLocation();
@@ -69,14 +71,37 @@ const PageTracker = () => {
 };
 
 const App = () => {
+  const { logout } = useAuthStore();
+  const [toastMessage, setToastMessage] = useState("");
+  const storageAuth = localStorage.getItem("auth-storage");
+  const parsedAuth = storageAuth ? JSON.parse(storageAuth).state : null;
+
+  const checkSession = () => {
+    const expirationTime = new Date(
+      new Date(parsedAuth.loginTime).getTime() + 24 * 60 * 60 * 1000
+    );
+    const now = new Date();
+    if (now > expirationTime) {
+      setToastMessage("로그인 세션이 만료되었습니다.");
+      logout();
+    }
+  };
+
   useEffect(() => {
     initGA();
+    if (parsedAuth) checkSession();
   }, []);
 
   return (
     <Router>
       <PageTracker />
       <CenteredLayout>
+        {toastMessage && (
+          <ToastMessage
+            message={toastMessage}
+            onClose={() => setToastMessage("")}
+          />
+        )}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/select-info" element={<SelectInfo />} />

src/store/useAuthStore.ts

@@ -5,27 +5,34 @@ import instance from "@/api/axios";
 interface AuthStore {
   isLoggedIn: boolean;
   accessToken: string | null;
+  loginTime: string | null;
   login: (code: string) => Promise<{ ok: boolean }>;
   logout: () => void;
 }
 
+interface LoginResponse {
+  data: string;
+}
+
 const useAuthStore = create(
   persist<AuthStore>(
     (set) => ({
       isLoggedIn: false,
       accessToken: null,
+      loginTime: null,
       login: async (code: string) => {
         try {
           const requestURI =
-            // 아래 코드는 백엔드팀에서 작업해주시면 동일한 uri로 바뀔 예정 -> 4.24 정준영
             import.meta.env.MODE === "production"
               ? `/api/kakao/login?code=${code}`
               : `/api/kakao/login?code=${code}&redirectUrl=https://localhost:5173/kakao-login`;
 
-          const res = await instance.get(requestURI);
+          const res = await instance.get<LoginResponse>(requestURI);
+          const currentTime = new Date().toISOString();
           set({
             isLoggedIn: true,
-            accessToken: res.data.data as string
+            accessToken: res.data.data,
+            loginTime: currentTime
           });
           return {
             ok: true
@@ -37,8 +44,10 @@ const useAuthStore = create(
       logout: () => {
         set({
           isLoggedIn: false,
-          accessToken: null
+          accessToken: null,
+          loginTime: null
         });
+        window.location.href = "/";
         return { ok: true };
       }
     }),