✨feat:token을 localStorage에서 관리 (#576)

Author: minjoon97

src/api/apis/index.tsx

@@ -10,7 +10,7 @@ const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   (config) => {
-    const token = sessionStorage.getItem('token');
+    const token = localStorage.getItem('token');
     if (token) {
       config.headers.Authorization = token;
     }

src/components/route/ProtectedRoute.tsx

@@ -10,7 +10,7 @@ const ProtectedRoute = ({ children }: PropsWithChildren) => {
   const [hasBasicInfo, setHasBasicInfo] = useState<boolean | null>(null);
   const location = useLocation();
   const loginType = useLoginStore((state) => state.loginType);
-  const token = sessionStorage.getItem('token');
+  const token = localStorage.getItem('token');
 
   useEffect(() => {
     let isMounted = true; // 컴포넌트 언마운트 체크
@@ -29,7 +29,7 @@ const ProtectedRoute = ({ children }: PropsWithChildren) => {
         if (isMounted) {
           // 토큰 만료 체크
           if (axiosError.response?.status === 401 || axiosError.response?.status === 403) {
-            sessionStorage.removeItem('token');
+            localStorage.removeItem('token');
             // 로그인 리다이렉트 로직 필요하면 추가하기
           }
           console.error('상세정보 확인 실패:', error);

src/layout/header/Header.tsx

@@ -64,7 +64,7 @@ export default function Header() {
     let eventSource: EventSourcePolyfill;
 
     const connectSSE = () => {
-      const token = sessionStorage.getItem('token');
+      const token = localStorage.getItem('token');
       eventSource = new EventSourcePolyfill(`${import.meta.env.VITE_APP_BASE_URL}/api/sse/subscribe`, {
         headers: {
           Authorization: `${token}`

src/pages/login-page/logic/useLogin.ts

@@ -45,13 +45,13 @@ export const useLogin = (): useReturn => {
     if (idErr !== '' || pwdErr !== '') throw new Error('id와 pwd 형식을 확인해주세요.');
     else {
       try {
-        //현재 -> 토큰을 그대로 받아서 session에 넣고 사용
-        //나중 -> 쿠키에 단기토큰 넣고 그거로 token을 가져오는 api호출 후, session에 넣고 사용
+        //현재 -> 토큰을 그대로 받아서 local에 넣고 사용
+        //나중 -> 쿠키에 단기토큰 넣고 그거로 token을 가져오는 api호출 후, local에 넣고 사용
         const response = await handleLogin(id, pwd);
         const token = response.headers['authorization'];
 
         //token을 세션스토리지에 저장
-        sessionStorage.setItem('token', token);
+        localStorage.setItem('token', token);
         navigate('/success');
       } catch (error) {
         console.error('Login failed:', error);

src/pages/main-page/MainPage.tsx

@@ -11,7 +11,7 @@ import axiosInstance from '@/api/apis';
 import useInterestStore from '@/store/stores/interest-center/interestStore';
 
 export default function MainPage() {
-  const token = sessionStorage.getItem('token');
+  const token = localStorage.getItem('token');
 
   const loginType = useLoginStore((state) => state.loginType);
   const setLoginInfo = useLoginStore((state) => state.setLoginInfo);

src/pages/success-page/index.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 
 const SuccessPage = () => {
-  const token = sessionStorage.getItem('token');
+  const token = localStorage.getItem('token');
 
   const loginType = useLoginStore((state) => state.loginType);
   const setLoginInfo = useLoginStore((state) => state.setLoginInfo);
@@ -13,7 +13,7 @@ const SuccessPage = () => {
   const navigate = useNavigate();
 
   //단기토큰 받는거로 바뀌면, 해당 단기토큰으로 ACCESS토큰 받아오는 useEffect하나 더 필요 (쿠키에서 꺼내서 보내는거로)
-  //로그인 로직에서는 session에 저장하는 것 삭제하고, 여기서 ACCESS받아서 session에 저장하도록 해야함.
+  //로그인 로직에서는 local에 저장하는 것 삭제하고, 여기서 ACCESS받아서 local에 저장하도록 해야함.
 
   ///////////////////////////////
   //토큰을 해석해서 zustand에 저장

src/store/stores/login/loginStore.ts

@@ -26,7 +26,7 @@ export const useLoginStore = create(
           isLoggedIn: true
         })),
       clearLoginInfo: () => {
-        sessionStorage.removeItem('token');
+        localStorage.removeItem('token');
         window.history.replaceState({}, document.title);
         set((state) => ({
           ...state,