feat/#49/useAuthStore에 isAuthLoading을 추가하여 isLoggedIn 관리, 자동 로그인 오류 해결

src/components/LoginModal/LoginModel.tsx

@@ -163,14 +163,14 @@ const Modal: React.FC<ModalProps> = ({
       const response = await login(email, password);
       console.log("response");
       console.log(response);
-      const token = response.data.accessToken;
+      // const token = response.data.accessToken;
       if (response.success) {
         setAccessToken(response.data.accessToken);
 
         try {
           const response = await getUserInfo();
           if (response.success) {
-            setLoginState(token, response.data);
+            setLoginState(response.data);
           }
         } catch {
           console.log("error");

src/components/Navigation/Navigation.tsx

@@ -29,16 +29,19 @@ const Navigation: React.FC = () => {
   const [initialStep, setInitialStep] = useState<
     "main" | "signup" | "emailLogin" | "emailSignup"
   >("main");
-  const [isAuthLoading, setIsAuthLoading] = useState(true); // 로그인 관련 로딩 상태
+  // const [isAuthLoading, setIsAuthLoading] = useState(true); // 로그인 관련 로딩 상태
   const {
     isLoggedIn,
+    isAuthLoading,
     setAccessToken,
     login,
     logout: clearAuthState,
+    setIsAuthLoading,
   } = useAuthStore();
 
   // 자동 로그인 처리
   useEffect(() => {
+    setIsAuthLoading(true);
     const autoLogin = async () => {
       try {
         const refreshResponse = await reIssue();
@@ -49,7 +52,7 @@ const Navigation: React.FC = () => {
           setAccessToken(newAccessToken);
           apiClient.defaults.headers.common.Authorization = `Bearer ${newAccessToken}`;
           const userInfo = await getUserInfo();
-          login(newAccessToken, userInfo.data);
+          login(userInfo.data);
         }
       } catch (error) {
         console.error("자동 로그인 실패:", error);
@@ -60,7 +63,7 @@ const Navigation: React.FC = () => {
     };
 
     autoLogin();
-  }, []);
+  }, [clearAuthState, login, setAccessToken]);
 
   const handleLogout = async () => {
     try {

src/pages/_app.tsx

@@ -11,26 +11,26 @@ import { useEffect, useRef } from "react";
 const myFont = localFont({ src: "../fonts/PretendardVariable.woff2" });
 
 export default function App({ Component, pageProps }: AppProps) {
-  const { isLoggedIn } = useAuthStore();
-  const hasAlerted = useRef(false);
+  const { isLoggedIn, isAuthLoading } = useAuthStore();
   const router = useRouter();
+  const hasAlerted = useRef(false);
 
-  // "/mypage는 로그인된 상태에서만 접근할 수 있음"
   useEffect(() => {
     const protectedRoutes = ["/mypage"];
     const isProtectedRoute = protectedRoutes.some((route) =>
       router.pathname.startsWith(route),
     );
 
-    if (isProtectedRoute && !hasAlerted.current) {
-      hasAlerted.current = true;
-
+    if (isProtectedRoute && !isAuthLoading) {
       if (!isLoggedIn) {
-        alert("로그인이 필요합니다");
-        router.replace("/");
+        if (!hasAlerted.current) {
+          hasAlerted.current = true;
+          alert("로그인이 필요합니다");
+          router.replace("/");
+        }
       }
     }
-  }, [isLoggedIn, router]);
+  }, [isLoggedIn, isAuthLoading, router]);
 
   return (
     <div className={myFont.className}>

src/stores/authStore.ts

@@ -5,7 +5,9 @@ interface AuthState {
   isLoggedIn: boolean;
   accessToken: string | null;
   user: IUser | null;
-  login: (token: string, user: IUser) => void;
+  isAuthLoading: boolean;
+  setIsAuthLoading: (loading: boolean) => void;
+  login: (user: IUser) => void;
   logout: () => void;
   setAccessToken: (accessToken: string) => void;
 }
@@ -14,8 +16,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   isLoggedIn: false,
   accessToken: null,
   user: null,
+  isAuthLoading: true,
 
-  login: (token, user) => {
+  setIsAuthLoading: (loading: boolean) => {
+    set({ isAuthLoading: loading });
+  },
+
+  login: (user: IUser) => {
     set({ isLoggedIn: true, user: user });
   },