diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js index f383b96..83e77ef 100644 --- a/src/components/pages/LoginPage.js +++ b/src/components/pages/LoginPage.js @@ -1,6 +1,7 @@ "use client"; import { useState } from "react"; +import { useRouter } from "next/navigation"; import Label from "../Label"; import Input from "../Input"; import Button from "../Button"; @@ -9,11 +10,16 @@ import Link from "next/link"; import styles from "./LoginPage.module.css"; function LoginPage() { + const router = useRouter(); + const [values, setValues] = useState({ email: "", password: "", }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + function handleChange(e) { const { name, value } = e.target; @@ -25,12 +31,38 @@ function LoginPage() { async function handleSubmit(e) { e.preventDefault(); - // TODO: 로그인 처리 - // 1. fetch 를 사용하여 로그인 요청을 보냅니다. - // 2. 성공 시 Application 에 쿠키 내 토큰 저장 여부를 확인합니다. - // 3. 로딩 상태를 만들고 로딩중일 때는 로그인 버튼을 비활성화 합니다. - // 4. 추가로 로딩중일 때는 로그인 버튼텍스트를 "로그인 중..."으로 변경합니다. - // 5. 에러 상태를 만들고 로그인 요청이 실패 시 에러 메시지를 로그인버튼 바로 위에 표시합니다. + setError(""); + setLoading(true); + + try { + const res = await fetch( + "https://learn.codeit.kr/api/link-service/auth/login", + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + email: values.email, + password: values.password, + }), + credentials: "include", + } + ); + + if (!res.ok) { + if (res.status === 401) { + setError("이메일 또는 비밀번호가 올바르지 않습니다."); + } else { + setError("로그인에 실패했습니다."); + } + return; + } + + router.push("/me"); + } catch { + setError("로그인에 실패했습니다."); + } finally { + setLoading(false); + } } return (