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);
}
},
}