refactor: 로그인 대규모 리팩토링

- 타입 추가
- react query 사용
- api가 be에서 받은 error를 던지고 LoginForm 띄우도록 수정

Author: Nago730

frontend/src/features/auth/api/authApi.ts

@@ -1,12 +1,38 @@
-export async function login({
-	username,
-	password,
-}: { username: string; password: string }) {
+import type {
+	LoginRequest,
+	LoginResponse,
+	RegisterRequest,
+	RegisterResponse,
+} from '../model/auth.types';
+
+export async function register(
+	request: RegisterRequest,
+): Promise<RegisterResponse['data']> {
+	const res = await fetch('/api/auth/register', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(request),
+	});
+
+	const result: RegisterResponse = await res.json();
+	if (!result.success) {
+		throw new Error(result.error.message);
+	}
+	return result.data;
+}
+
+export async function login(
+	request: LoginRequest,
+): Promise<LoginResponse['data']> {
 	const res = await fetch('/api/auth/login', {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ username, password }),
+		body: JSON.stringify(request),
 	});
-	if (!res.ok) throw new Error('로그인 실패');
-	return res.json(); // { token, user }
+
+	const result: LoginResponse = await res.json();
+	if (!result.success) {
+		throw new Error(result.error.message);
+	}
+	return result.data;
 }

frontend/src/features/auth/hooks/useLogin.ts

@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { login } from '../api/authApi';
+import type { LoginRequest, LoginResponse } from '../model/auth.types';
+
+export function useLogin(onSuccess?: (data: LoginResponse['data']) => void) {
+	const navigate = useNavigate();
+	const { mutate, isPending, isSuccess, isError, data, error, reset } =
+		useMutation({
+			mutationFn: (payload: LoginRequest) => login(payload),
+			onSuccess: (data) => {
+				if (data?.accessToken) {
+					localStorage.setItem('token', data.accessToken);
+					navigate('/');
+				}
+				onSuccess?.(data);
+			},
+		});
+
+	return {
+		mutate,
+		isPending,
+		isSuccess,
+		isError,
+		data,
+		error,
+		reset,
+	};
+}

frontend/src/features/auth/model/auth.types.ts

@@ -0,0 +1,35 @@
+// 회원가입 요청
+export interface RegisterRequest {
+	username: string;
+	email: string;
+	imageUrl: string;
+	password: string;
+}
+
+// 회원가입 응답
+export interface RegisterResponse {
+	success: boolean;
+	data: string | null;
+	error: {
+		message: string;
+		code: number;
+	};
+}
+
+// 로그인 요청
+export interface LoginRequest {
+	email: string;
+	password: string;
+}
+
+// 로그인 응답
+export interface LoginResponse {
+	success: boolean;
+	data: {
+		accessToken: string;
+	};
+	error: {
+		message: string;
+		code: number;
+	};
+}

frontend/src/features/auth/model/useAuth.ts

@@ -1,65 +1,51 @@
 import { Input } from '@/shared/ui/Input';
 import { Button } from '@/shared/ui/button';
 import { useState } from 'react';
-import { useAuth } from '../model/useAuth';
+import { useLogin } from '../hooks/useLogin';
 
 export function LoginForm() {
-	const { login } = useAuth();
-	const [username, setUsername] = useState('');
+	const { mutate, isPending, isError, error } = useLogin();
+	const [email, setEmail] = useState('');
 	const [password, setPassword] = useState('');
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(false);
 
-	const handleSubmit = async (e: React.FormEvent) => {
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
-		setError(null);
-		setLoading(true);
-		try {
-			await login(username, password);
-			// 성공시 라우팅 처리 필요하면 여기서!
-		} catch (err) {
-			setError('아이디 또는 비밀번호가 올바르지 않습니다.');
-		} finally {
-			setLoading(false);
-		}
+		mutate({ email, password });
 	};
 
 	return (
 		<form className='flex flex-col gap-4 w-full' onSubmit={handleSubmit}>
 			<Input
-				label='아이디'
-				placeholder='아이디'
-				value={username}
-				onChange={(e) => setUsername(e.target.value)}
-				minLength={6}
-				maxLength={16}
+				label='이메일'
+				placeholder='이메일'
+				value={email}
+				onChange={(e) => setEmail(e.target.value)}
 				required
-				autoComplete='username'
+				autoComplete='email'
 			/>
 			<Input
 				label='비밀번호'
 				placeholder='비밀번호'
 				value={password}
 				onChange={(e) => setPassword(e.target.value)}
-				minLength={6}
-				maxLength={20}
+				type='password'
 				required
 				autoComplete='current-password'
 			/>
-			{error && (
+			{isError && error instanceof Error && (
 				<div className='text-[var(--danger-text-default)] font-display-medium-16 px-2'>
-					{error}
+					{error.message}
 				</div>
 			)}
 			<Button
 				variant='contained'
 				type='submit'
 				size='lg'
-				disabled={loading || !username || !password}
+				disabled={isPending || !email || !password}
 				className='w-full'
 			>
 				<span className='font-available-medium-20'>
-					{loading ? '로그인 중...' : '아이디로 로그인'}
+					{isPending ? '로그인 중...' : '이메일로 로그인'}
 				</span>
 			</Button>
 		</form>

frontend/src/features/auth/ui/LoginForm.tsx

@@ -1,13 +1,11 @@
 import { LogOut } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../model/useAuth';
 
 export function LogoutButton() {
-	const { logout } = useAuth();
 	const navigate = useNavigate();
 
 	const handleLogout = () => {
-		logout();
+		localStorage.removeItem('token');
 		navigate('/login', { replace: true });
 	};