[Feat] 로그인 상태 관리

package.json

@@ -29,7 +29,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/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 = (e: MouseEvent) => {
@@ -24,8 +30,9 @@
     logoutMutate(undefined, {
       onSuccess: () => {
         localStorage.removeItem('accessToken');
+        resetUser();
         onClose();
-        window.location.reload();
+        navigate(PATH.ROOT);
       },
       onError: (error) => {
         console.error('로그아웃 실패:', error);
@@ -41,7 +48,7 @@
     };
   }, []);
 
-  if (isLoading || isError || !user) {
+  if (!user) {
     return null;
   }
 

src/page/callback/GoogleCallback.tsx

@@ -20,9 +20,12 @@ const GoogleCallback = () => {
         state: { isWritten: userData.onboardingCompleted },
       });
     } else {
-      navigate(PATH.SIGNUP, {
-        state: { userData },
+      navigate(PATH.INTRO, {
+        state: { isWritten: userData.onboardingCompleted },
       });
+      // navigate(PATH.SIGNUP, {
+      //   state: { userData },
+      // });
     }
   }, [userData, navigate]);
 

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 
 import * as styles from './Header.css';
@@ -9,6 +9,7 @@
 import { useModal } from '@/common/hook/useModal';
 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 +21,13 @@
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { data: user, isLoading } = useGetUser();
+  const { data: userData, isLoading } = useGetUser();
+
+  const setUser = useAuthStore((state) => state.setUser);
+  const resetUser = useAuthStore((state) => state.resetUser);
+
+  const user = useAuthStore((state) => state.user);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const findActiveMenu = MENUS.find((menu) => location.pathname.startsWith(menu.path));
   const initialMenu = findActiveMenu ? findActiveMenu.label : '';
@@ -30,6 +37,18 @@
 
   const { openModal, closeModal, ModalWrapper } = useModal();
 
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (userData) {
+      setUser(userData);
+    } else {
+      resetUser();
+    }
+  }, [userData, setUser, resetUser]);
+
   const handleLogin = () => {
     openModal(<LoginModal onClose={closeModal} />);
   };
@@ -62,17 +81,13 @@
           );
         })}
       </nav>
-      {!isLoading && user && (
-        <>
-          <img
-            src={user.profileImageUrl}
-            alt="유저 프로필 이미지"
-            className={styles.profilePlaceholder}
-            onClick={handleProfile}
-          />
-          {openProfile && <UserModal onClose={handleProfile} />}
-        </>
-      )}
+      <img
+        src={user.profileImageUrl}
+        alt="유저 프로필 이미지"
+        className={styles.profilePlaceholder}
+        onClick={handleProfile}
+      />
+      {openProfile && <UserModal onClose={handleProfile} />}
     </>
   );
 
@@ -83,7 +98,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,21 @@
+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;
+}

src/store/useAuthStore.tsx

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+import type { AuthStoreType, UserType } from '@/store/types/authTypes';
+
+const defaultUser: UserType = {
+  name: '',
+  email: '',
+  profileImageUrl: '',
+};
+const token = localStorage.getItem('accessToken');
+
+export const useAuthStore = create<AuthStoreType>()(
+  persist(
+    (set) => ({
+      user: defaultUser,
+      isLoggedIn: !!token,
+      setUser: (newUser) => set({ user: newUser, isLoggedIn: true }),
+      resetUser: () => set({ user: defaultUser, isLoggedIn: false }),
+    }),
+    {
+      name: 'auth-storage',
+      storage: createJSONStorage(() => ({
+        getItem: (name) => localStorage.getItem(name),
+        setItem: (name, value) => {
+          const { state } = JSON.parse(value) as { state: AuthStoreType };
+          if (!state.isLoggedIn) {
+            localStorage.removeItem(name);
+            return;
+          }
+          localStorage.setItem(name, value);
+        },
+        removeItem: (name) => localStorage.removeItem(name),
+      })),
+    },
+  ),
+);