feat: 로그인 시 delay 추가

apps/client/src/contexts/authContext.tsx

@@ -1,53 +1,54 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { getStoredUser, setStoredUser } from '@/utils/authStorage';
-import { sleep } from '@/utils/sleep';
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 
 export interface AuthContext {
 	isAuthenticated: boolean;
-	login: (username: string) => Promise<void>;
+	login: (username: string, accessToken: string) => Promise<void>;
 	logout: () => Promise<void>;
-	user: string | null;
+	username: string;
+	accessToken: string;
 }
 
-const AuthContext = createContext<AuthContext | null>(null);
-
-/* eslint-disable react/jsx-no-constructed-context-values */
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-	const [user, setUser] = useState<string | null>(getStoredUser());
-	const isAuthenticated = !!user;
-
-	const login = useCallback(async (username: string) => {
-		// TODO: 로그인 API 호출
-		await sleep(100);
-		setStoredUser(username);
-		setUser(username);
+export const initialAuthContext: AuthContext = {
+	isAuthenticated: false,
+	login: async () => {},
+	logout: async () => {},
+	username: '',
+	accessToken: '',
+};
+
+const AuthContext = createContext<AuthContext>(initialAuthContext);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+	const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+	const [username, setUsername] = useState<string>('');
+	const [accessToken, setAccessToken] = useState<string>('');
+
+	const login = useCallback(async (username: string, accessToken: string) => {
+		setIsAuthenticated(true);
+		setUsername(username);
+		setAccessToken(accessToken);
 	}, []);
 
 	const logout = useCallback(async () => {
-		// TODO: 로그아웃 API 호출
-		await sleep(100);
-		setStoredUser(null);
-		setUser(null);
-	}, []);
-
-	useEffect(() => {
-		setUser(getStoredUser());
+		setIsAuthenticated(false);
+		setUsername('');
+		setAccessToken('');
 	}, []);
 
-	return (
-		<AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
-			{children}
-		</AuthContext.Provider>
+	const value = useMemo(
+		() => ({
+			isAuthenticated,
+			login,
+			logout,
+			username,
+			accessToken,
+		}),
+		[isAuthenticated, login, logout, username, accessToken]
 	);
-}
-/* eslint-disable react/jsx-no-constructed-context-values */
-
-export function useAuth() {
-	const context = useContext(AuthContext);
 
-	if (!context) {
-		throw new Error('useAuth must be used within an AuthProvider');
-	}
-
-	return context;
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
+
+export const useAuth = () => {
+	return useContext(AuthContext);
+};

apps/client/src/pages/Login.tsx

@@ -25,14 +25,19 @@ const login = async ({ username, password }: { username: string; password: strin
 
 function Login() {
 	const auth = useAuth();
-	const navigate = useNavigate();
+	const navigate = useNavigate({ from: '/login' });
 
 	const { isPending, mutate } = useMutation({
 		mutationFn: login,
 		onSuccess: async (response) => {
 			const { username, accessToken } = response;
-			auth.login(username, accessToken);
-			navigate({ to: '/account' });
+
+			await auth.login(username, accessToken);
+			await new Promise((resolve) => {
+				setTimeout(resolve, 100);
+			});
+
+			await navigate({ to: '/account' });
 		},
 		onError: (error) => {
 			console.error('Login failed:', error);