[Feat] 로그인 상태 관리

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",

src/api/auth/refreshToken/index.ts

@@ -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/axiosInstance.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/domain/signup/index.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/common/component/UserModal/UserModal.tsx

@@ -2,16 +2,22 @@
 
 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 handleLogout = () => {
     logoutMutate(undefined, {
       onSuccess: () => {
-        localStorage.removeItem('accessToken');
+        resetUser();
         onClose();
-        window.location.reload();
+        navigate(PATH.ROOT);
       },
       onError: (error) => {
         console.error('로그아웃 실패:', error);
@@ -44,7 +50,7 @@
     };
   }, [handleClickOutside]);
 
-  if (isLoading || isError || !user) {
+  if (!user) {
     return null;
   }
 

src/common/hook/useGoogleAuth.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/page/callback/GoogleCallback.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/page/intro/Intro.tsx

@@ -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>

src/shared/component/Layout/layoutHeader/Header.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { useShallow } from 'zustand/react/shallow';
 
 import * as styles from './Header.css';
 
@@ -9,6 +10,7 @@
 import { useOverlayModal } from '@/common/hook/useOverlayModal';
 import { useGetUser } from '@/api/domain/signup/hook/useGetUser';
 import UserModal from '@/common/component/UserModal/UserModal';
+import { useAuthStore } from '@/store/useAuthStore';
 
 const MENUS = [
   { label: '나의 할 일', path: PATH.TODO },
@@ -20,7 +22,16 @@
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { data: user, isLoading } = useGetUser();
+  const { data: userData, isLoading } = useGetUser();
+
+  const { user, isLoggedIn, setUser, resetUser } = useAuthStore(
+    useShallow((s) => ({
+      user: s.user,
+      isLoggedIn: s.isLoggedIn,
+      setUser: s.setUser,
+      resetUser: s.resetUser,
+    })),
+  );
 
   const findActiveMenu = MENUS.find((menu) => location.pathname.startsWith(menu.path));
   const initialMenu = findActiveMenu ? findActiveMenu.label : '';
@@ -30,6 +41,18 @@
 
   const { openModal, closeModal } = useOverlayModal();
 
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (userData) {
+      setUser(userData);
+    } else {
+      resetUser();
+    }
+  }, [userData, setUser, resetUser]);
+
   const handleLogin = () => {
     openModal(<LoginModal onClose={closeModal} />);
   };
@@ -62,17 +85,14 @@
           );
         })}
       </nav>
-      {!isLoading && user && (
-        <>
-          <img
-            src={user.profileImageUrl}
-            alt="유저 프로필 이미지"
-            className={styles.profilePlaceholder}
-            onClick={handleProfile}
-          />
-          {openProfile && <UserModal onClose={handleProfile} />}
-        </>
-      )}
+      <button onClick={handleProfile}>
+        <img
+          src={user.profileImageUrl}
+          alt="유저 프로필 이미지"
+          className={styles.profilePlaceholder}
+        />
+      </button>
+      {openProfile && <UserModal onClose={handleProfile} />}
     </>
   );
 
@@ -83,7 +103,7 @@
           <IcLogo className={styles.logoImage} />
         </Link>
 
-        {!isLoading && user ? (
+        {isLoggedIn ? (
           renderNavMenu()
         ) : (
           <button className={styles.loginButton} onClick={handleLogin} type="button">

src/store/types/authTypes.ts

@@ -0,0 +1,22 @@
+export interface AnswerType {
+  questionId: number;
+  choiceId: number;
+}
+
+export interface UserType {
+  id?: number;
+  name: string;
+  email: string;
+  birthday?: string;
+  job?: string;
+  profileImageUrl: string;
+  answers?: AnswerType[];
+}
+
+export interface AuthStoreType {
+  user: UserType;
+  isLoggedIn: boolean;
+  setUser: (newUser: UserType) => void;
+  resetUser: () => void;
+  updateLoginStatus: () => void;
+}