feat: login

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 (