refactor: 토큰을 기준으로 로그인 기준 처리

Author: kwonsaebom

src/common/component/UserModal/UserModal.tsx

@@ -29,7 +29,6 @@ const UserModal = ({ onClose }: UserModalProps) => {
   const handleLogout = () => {
     logoutMutate(undefined, {
       onSuccess: () => {
-        localStorage.removeItem('accessToken');
         resetUser();
         onClose();
         navigate(PATH.ROOT);

src/store/types/authTypes.ts

@@ -18,4 +18,5 @@ export interface AuthStoreType {
   isLoggedIn: boolean;
   setUser: (newUser: UserType) => void;
   resetUser: () => void;
+  updateLoginStatus: () => void;
 }

src/store/useAuthStore.tsx

@@ -8,23 +8,31 @@ const defaultUser: UserType = {
   email: '',
   profileImageUrl: '',
 };
-const token = localStorage.getItem('accessToken');
+const getToken = () => 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 }),
+      isLoggedIn: false,
+      setUser: (newUser) => set({ user: newUser, isLoggedIn: !!getToken() }),
+      resetUser: () => {
+        localStorage.removeItem('accessToken');
+        set({ user: defaultUser, isLoggedIn: false });
+      },
+      updateLoginStatus: () => set({ isLoggedIn: !!getToken() }),
     }),
     {
       name: 'auth-storage',
+      partialize: (state) => ({ user: state.user }),
+      onRehydrateStorage: () => (state) => {
+        state?.updateLoginStatus();
+      },
       storage: createJSONStorage(() => ({
         getItem: (name) => localStorage.getItem(name),
         setItem: (name, value) => {
-          const { state } = JSON.parse(value) as { state: AuthStoreType };
-          if (!state.isLoggedIn) {
+          const hasToken = !!getToken();
+          if (!hasToken) {
             localStorage.removeItem(name);
             return;
           }