Merge pull request #191 from SOPT-36-NINEDOT/feat/#187/loginState

[Feat] 로그인 상태 관리

Author: kwonsaebom

package.json

@@ -30,7 +30,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^7.6.3"
+    "react-router-dom": "^7.6.3",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import axiosInstance from '@/api/axiosInstance';
+import { END_POINT } from '@/api/constant/endPoint';
+import type { BaseResponse } from '@/type/api';
+
+export type RefreshResponse = {
+  accessToken: string;
+  message: string;
+};
+
+export const postRefreshToken = async () => {
+  const { data } = await axiosInstance.post<BaseResponse<RefreshResponse>>(
+    `/${END_POINT.AUTH}/refresh`,
+  );
+  return data.data;
+};

src/api/auth/refreshToken/index.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 import { HTTP_STATUS } from '@/api/constant/httpStatus';
+import { postRefreshToken } from '@/api/auth/refreshToken';
 
 const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -24,12 +25,23 @@ axiosInstance.interceptors.request.use(
 // 응답 인터셉터
 axiosInstance.interceptors.response.use(
   (response) => response,
-  (error) => {
+  async (error) => {
+    const originalRequest = error.config;
+
     if (error.response) {
       const { status } = error.response;
 
       if (status === HTTP_STATUS.UNAUTHORIZED) {
-        // 인증 실패 처리
+        try {
+          const { accessToken } = await postRefreshToken();
+          localStorage.setItem('accessToken', accessToken);
+
+          axiosInstance.defaults.headers.Authorization = `Bearer ${accessToken}`;
+          originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+        } catch (refreshError) {
+          console.error('리프레시 토큰 만료, 재로그인 필요');
+          return Promise.reject(refreshError);
+        }
       }
 
       if (status === HTTP_STATUS.INTERNAL_SERVER_ERROR) {

src/api/axiosInstance.ts

@@ -3,7 +3,7 @@ import { END_POINT } from '@/api/constant/endPoint';
 import type { JobResponse } from '@/api/domain/signup/type/JobResponse';
 import type { PersonaResponse } from '@/api/domain/signup/type/PersonaResponse';
 import type { SignupResponse } from '@/api/domain/signup/type/SignupResponse';
-import type { UserInfoResponse } from '@/api/domain/signup/type/UserInfoResponse';
+import type { UserType } from '@/store/types/authTypes';
 import type { BaseResponse } from '@/type/api';
 
 export const getJobList = async () => {
@@ -21,7 +21,7 @@ export const postSignUp = async (payload: SignupResponse) => {
 };
 
 export const getUser = async () => {
-  const { data } = await axiosInstance.get<BaseResponse<UserInfoResponse>>('/users/info');
+  const { data } = await axiosInstance.get<BaseResponse<UserType>>('/users/info');
   return data.data;
 };
 

src/api/domain/signup/index.ts

@@ -2,16 +2,22 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { IcDivider } from '@/assets/svg';
 import * as styles from '@/common/component/UserModal/UserModal.css';
-import { useGetUser } from '@/api/domain/signup/hook/useGetUser';
 import { usePostLogout } from '@/api/domain/signup/hook/usePostLogout';
+import { useAuthStore } from '@/store/useAuthStore';
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '@/route';
 
 interface UserModalProps {
   onClose: () => void;
 }
 
 const UserModal = ({ onClose }: UserModalProps) => {
   const modalRef = useRef<HTMLDivElement>(null);
-  const { data: user, isLoading, isError } = useGetUser();
+  const navigate = useNavigate();
+
+  const user = useAuthStore((state) => state.user);
+  const resetUser = useAuthStore((state) => state.resetUser);
+
   const { mutate: logoutMutate } = usePostLogout();
 
   const handleClickOutside = useCallback(
@@ -26,9 +32,9 @@ const UserModal = ({ onClose }: UserModalProps) => {
   const handleLogout = () => {
     logoutMutate(undefined, {
       onSuccess: () => {
-        localStorage.removeItem('accessToken');
+        resetUser();
         onClose();
-        window.location.reload();
+        navigate(PATH.ROOT);
       },
       onError: (error) => {
         console.error('로그아웃 실패:', error);
@@ -44,7 +50,7 @@ const UserModal = ({ onClose }: UserModalProps) => {
     };
   }, [handleClickOutside]);
 
-  if (isLoading || isError || !user) {
+  if (!user) {
     return null;
   }
 

src/api/domain/signup/type/UserInfoResponse.ts

@@ -4,14 +4,10 @@ import getGoogleAuthCode from '@/api/auth/googleLogin/util/getGoogleAuthCode';
 import getAccessToken from '@/api/auth/googleLogin/util/getAccessToken';
 
 interface UserData {
-  email: string;
-  name: string;
-  profileImageUrl: string;
-  socialProvider: string;
-  socialToken: string;
   exists: boolean;
+  userId?: number;
   accessToken?: string;
-  onboardingCompleted?: boolean;
+  onboardingPage: string;
 }
 
 export const useGoogleAuth = (): UserData | null => {

src/common/component/UserModal/UserModal.tsx

@@ -13,16 +13,19 @@ const GoogleCallback = () => {
       return;
     }
 
-    const isExistingUser = userData.exists;
+    const { exists, onboardingPage } = userData;
 
-    if (isExistingUser) {
-      navigate(PATH.INTRO, {
-        state: { isWritten: userData.onboardingCompleted },
-      });
-    } else {
+    if (!exists) {
       navigate(PATH.SIGNUP, {
         state: { userData },
       });
+      return;
+    }
+
+    if (onboardingPage === 'ONBOARDING_COMPLETED') {
+      navigate(PATH.MANDAL);
+    } else {
+      navigate(PATH.INTRO, { state: { pageState: onboardingPage } });
     }
   }, [userData, navigate]);
 

src/common/hook/useGoogleAuth.ts

@@ -1,6 +1,15 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import * as styles from '@/page/intro/Intro.css';
+import { PATH } from '@/route';
+
+type PageStateType = 'MANDALART' | 'CORE_GOAL' | 'SUB_GOALS';
+
+const ROUTE_BY_STATE: Record<PageStateType, string> = {
+  MANDALART: PATH.TODO,
+  CORE_GOAL: PATH.TODO_UPPER,
+  SUB_GOALS: PATH.TODO_LOWER,
+};
 
 const MESSAGE = {
   START: {
@@ -16,13 +25,19 @@ const MESSAGE = {
 const Intro = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const isWritten = location.state?.isWritten ?? false; // 기본값 false
 
-  const handleNavigateToTodo = () => {
-    navigate('/todo');
-  };
+  const pageState = (location.state as { pageState?: PageStateType })?.pageState;
+  const isStart = pageState === 'MANDALART';
+
+  const content = isStart ? MESSAGE.START : MESSAGE.CONTINUE;
 
-  const content = isWritten ? MESSAGE.CONTINUE : MESSAGE.START;
+  const handleGoTodo = () => {
+    if (!pageState) {
+      navigate(PATH.TODO);
+      return;
+    }
+    navigate(ROUTE_BY_STATE[pageState]);
+  };
 
   const renderTitle = content.title.split('<br/>').map((line, index) => (
     <span key={index}>
@@ -34,7 +49,7 @@ const Intro = () => {
   return (
     <main className={styles.introContainer}>
       <h1 className={styles.introText}>{renderTitle}</h1>
-      <button className={styles.buttonContainer} onClick={handleNavigateToTodo}>
+      <button className={styles.buttonContainer} onClick={handleGoTodo}>
         {content.button}
       </button>
     </main>