diff --git a/src/components/auth/LoginGuard.tsx b/src/components/auth/LoginGuard.tsx index c2c08f5..e7a88be 100644 --- a/src/components/auth/LoginGuard.tsx +++ b/src/components/auth/LoginGuard.tsx @@ -18,7 +18,7 @@ interface LoginGuardProps { } export function LoginGuard({ children }: LoginGuardProps) { - const { tokens, setTokens, clearTokens, isLoggedIn } = useAuthStore(); + const { tokens, setTokens, clearTokens, isLoggedIn, isLoading } = useAuthStore(); const { bridge, isAvailable } = useNativeBridge(); const { data: userInfo, @@ -29,6 +29,17 @@ export function LoginGuard({ children }: LoginGuardProps) { const { data: activities } = useActivities(5); const { data: storesData } = useMyStores({ page: 0, size: 10 }); const pathname = usePathname(); + + // 디버깅용 로그 + console.log('🛡️ [LoginGuard] 렌더링, 상태:', { + tokens: !!tokens, + isLoggedIn, + isLoading, + userInfoLoading, + userInfo: !!userInfo, + userInfoError: !!userInfoError, + isAvailable + }); // 개발 모드에서 임시 로그인 (테스트용) const handleDevLogin = () => { @@ -48,24 +59,27 @@ export function LoginGuard({ children }: LoginGuardProps) { window.location.reload(); }; - // 로딩 중이거나 토큰이 없으면 적절한 UI 표시 - if (userInfoLoading || (isLoggedIn === false && !tokens)) { - const loadingText = userInfoLoading - ? "로그인 상태를 확인하는 중..." - : "로그인 화면으로 이동 중..."; + // 사용자 정보 로딩 중일 때만 로딩 화면 표시 (토큰이 있을 때) + if (userInfoLoading && isLoggedIn && tokens) { + console.log('🛡️ [LoginGuard] 사용자 정보 로딩 화면 표시'); return (
-

{loadingText}

+

사용자 정보를 불러오는 중...

); } - // 토큰이 없고 로딩이 끝났으면 로그인 필요 화면 표시 + // 토큰이 없거나 로그인 상태가 아니면 로그인 필요 화면 표시 if (!isLoggedIn || !tokens) { + console.log('🛡️ [LoginGuard] 로그인 필요 화면 표시:', { + isLoggedIn, + hasTokens: !!tokens, + isLoading + }); // 기존 로그인 필요 화면으로 바로 이동 return (
@@ -203,17 +217,6 @@ export function LoginGuard({ children }: LoginGuardProps) { ); } - // 토큰이 있는데 여전히 사용자 정보 로딩 중 - if (userInfoLoading && (isLoggedIn || tokens)) { - return ( -
-
-
-

사용자 정보를 불러오는 중...

-
-
- ); - } // 개발 환경에서 캐시 정보 표시를 위한 데이터 const cacheInfo = getCacheInfo(); diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 3d35e93..df533eb 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -101,7 +101,33 @@ export const useAuth = () => { // 컴포넌트 마운트 시 토큰 초기화 useEffect(() => { + console.log('🔥 [useAuth] useEffect 시작, 현재 상태:', { + tokens: !!tokens, + isLoggedIn, + isLoading + }); + + // 즉시 초기화 시도 initializeTokens(); + + // fallback: 2초 후에도 여전히 로딩 중이면 강제 초기화 + const fallbackTimer = setTimeout(() => { + const currentState = useAuthStore.getState(); + console.log('🔥 [useAuth] Fallback 타이머 실행, 현재 상태:', { + tokens: !!currentState.tokens, + isLoggedIn: currentState.isLoggedIn, + isLoading: currentState.isLoading + }); + + if (currentState.isLoading) { + console.log('🔥 [useAuth] 여전히 로딩 중 - 강제 초기화'); + currentState.initializeFromLocalStorage(); + } + }, 2000); + + return () => { + clearTimeout(fallbackTimer); + }; }, [initializeTokens]); diff --git a/src/store/useAuthStore.ts b/src/store/useAuthStore.ts index 2cc6a48..0163b25 100644 --- a/src/store/useAuthStore.ts +++ b/src/store/useAuthStore.ts @@ -14,27 +14,20 @@ interface AuthState { initializeFromLocalStorage: () => void; } +// Store 생성 export const useAuthStore = create()( persist( - (set) => ({ - tokens: null, - isLoggedIn: false, - isLoading: true, - - setTokens: (tokens) => { - set({ - tokens, - isLoggedIn: tokens !== null, - isLoading: false, - }); - }, - - - // 로컬스토리지에서 accessToken 확인 및 자동 로그인 - initializeFromLocalStorage: () => { + (set) => { + // 초기화 함수 정의 + const initializeFromLocalStorage = () => { + console.log('🚀 [initializeFromLocalStorage] 시작'); + try { const accessToken = localStorage.getItem("accessToken"); + console.log('🚀 [initializeFromLocalStorage] accessToken:', !!accessToken); + if (accessToken) { + console.log('🚀 [initializeFromLocalStorage] 토큰 발견, 로그인 상태로 설정'); const tokenObject = { accessToken: accessToken, refreshToken: "", @@ -53,40 +46,79 @@ export const useAuthStore = create()( Date.now().toString() ); } + console.log('🚀 [initializeFromLocalStorage] 완료: 로그인됨'); } else { + console.log('🚀 [initializeFromLocalStorage] 토큰 없음, 로그아웃 상태로 설정'); set({ isLoading: false, isLoggedIn: false, tokens: null }); + console.log('🚀 [initializeFromLocalStorage] 완료: 로그아웃됨'); } } catch (error) { - console.error('토큰 초기화 실패:', error); + console.error('🚀 [initializeFromLocalStorage] 에러:', error); set({ isLoading: false, isLoggedIn: false, tokens: null }); } - }, + }; - setLoading: (loading) => { - set({ isLoading: loading }); - }, + // 즉시 초기화 시도 (브라우저 환경에서만) + if (typeof window !== 'undefined') { + console.log('🏗️ [Store] 브라우저 환경 감지, 즉시 초기화 시도'); + setTimeout(() => initializeFromLocalStorage(), 50); + } - clearTokens: () => { - localStorage.removeItem("accessToken"); - localStorage.removeItem("auth-storage-timestamp"); - set({ - tokens: null, - isLoggedIn: false, - isLoading: false, - }); - }, - }), + return { + tokens: null, + isLoggedIn: false, + isLoading: true, + + setTokens: (tokens) => { + set({ + tokens, + isLoggedIn: tokens !== null, + isLoading: false, + }); + }, + + + // 로컬스토리지에서 accessToken 확인 및 자동 로그인 (외부에서 호출 가능) + initializeFromLocalStorage, + + setLoading: (loading) => { + set({ isLoading: loading }); + }, + + clearTokens: () => { + localStorage.removeItem("accessToken"); + localStorage.removeItem("auth-storage-timestamp"); + set({ + tokens: null, + isLoggedIn: false, + isLoading: false, + }); + }, + }; + }, { name: "auth-storage", partialize: (state) => ({ tokens: state.tokens, isLoggedIn: state.isLoggedIn, }), - onRehydrateStorage: () => (state) => { + onRehydrateStorage: () => (state, error) => { + console.log('🔄 [Zustand] onRehydrateStorage 호출됨', { state: !!state, error }); + + if (error) { + console.error('🔄 [Zustand] 복원 에러:', error); + } + if (state) { - state.setLoading(false); - // 초기 설치시 토큰 초기화 확실히 수행 - setTimeout(() => state.initializeFromLocalStorage(), 0); + console.log('🔄 [Zustand] 상태 복원 성공, 토큰 초기화 실행'); + state.initializeFromLocalStorage(); + } else { + console.log('🔄 [Zustand] 상태 없음 - 새 설치로 간주'); + // 새 설치인 경우 직접 초기화 + setTimeout(() => { + const currentState = useAuthStore.getState(); + currentState.initializeFromLocalStorage(); + }, 100); } }, }