[fix] 로그아웃 시 auth/me 자동호출로 401 에러 해결

Author: ahk0413

src/domains/login/components/ClientInitHook.tsx

@@ -6,14 +6,20 @@ import { useEffect } from 'react';
 import { useAuthStore } from '@/domains/shared/store/auth';
 
 function ClientInitHook() {
-  const checkAuth = useAuthStore((state) => state.checkAuth);
+  const { checkAuth, isLoggedIn, isAuthChecked } = useAuthStore();
 
   useIdleLogout();
+
   useFetchInterceptor();
 
   useEffect(() => {
-    checkAuth();
-  }, [checkAuth]);
+    // 로그인 상태가 아니거나 이미 체크 완료면 호출하지 않음
+    if (isLoggedIn && !isAuthChecked) {
+      checkAuth(); // 쿠키 기반 인증 상태 확인
+    }
+  }, [checkAuth, isLoggedIn, isAuthChecked]);
+
   return null;
 }
+
 export default ClientInitHook;

src/domains/shared/store/auth.ts

@@ -13,6 +13,7 @@ export interface User {
 interface AuthState {
   user: User | null;
   isLoggedIn: boolean;
+  isAuthChecked: boolean;
   setUser: (user: User) => void;
   logout: () => Promise<void>;
   loginWithProvider: (provider: User['provider']) => void;
@@ -21,9 +22,12 @@ interface AuthState {
   checkAuth: () => Promise<User | null>;
 }
 
+const hasAccessToken = typeof document !== 'undefined' && document.cookie.includes('accessToken');
+
 export const useAuthStore = create<AuthState>()((set) => ({
   user: null,
-  isLoggedIn: false,
+  isLoggedIn: hasAccessToken,
+  isAuthChecked: false,
 
   loginWithProvider: (provider) => {
     window.location.href = `${getApi}/oauth2/authorization/${provider}`;
@@ -41,11 +45,12 @@ export const useAuthStore = create<AuthState>()((set) => ({
         method: 'POST',
         credentials: 'include',
       });
-      set({ user: null, isLoggedIn: false });
+
+      // 상태 초기화
+      set({ user: null, isLoggedIn: false, isAuthChecked: true });
     } catch (err) {
       console.error('로그아웃 실패', err);
-    } finally {
-      set({ user: null, isLoggedIn: false });
+      set({ user: null, isLoggedIn: false, isAuthChecked: true });
     }
   },
 
@@ -75,25 +80,21 @@ export const useAuthStore = create<AuthState>()((set) => ({
     }
   },
 
-  // 시작 시 로그인 상태 확인
   checkAuth: async () => {
+    const state = useAuthStore.getState();
+    if (!state.isLoggedIn || state.isAuthChecked) return null;
+
     try {
-      const res = await fetch(`${getApi}/user/auth/me`, {
-        method: 'GET',
-        credentials: 'include',
-      });
-      if (!res.ok) throw new Error('인증 실패');
+      const res = await fetch(`${getApi}/user/auth/me`, { method: 'GET', credentials: 'include' });
+      if (!res.ok) return set({ user: null, isLoggedIn: false });
 
       const data = await res.json();
       const userInfo = data?.data?.user;
-      if (userInfo) {
-        set({ user: userInfo, isLoggedIn: true });
-        return userInfo;
-      }
-      return null;
-    } catch {
-      set({ user: null, isLoggedIn: false });
-      return null;
+      if (userInfo) set({ user: userInfo, isLoggedIn: true });
+
+      return userInfo || null;
+    } finally {
+      set({ isAuthChecked: true });
     }
   },
 }));