diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 00000000..68601ed9
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React, { useState } from "react";
+import { LoginForm } from "@/features/auth/ui/LoginForm/LoginForm";
+import { Modal } from "@/shared/ui/Modal/Modal";
+import { useRouter } from "next/navigation";
+
+export default function SignUpPage() {
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4">
+      <h1 className="text-2xl font-bold text-black-900 mb-8">로그인</h1>
+      <LoginForm
+        size="lg"
+        onSuccess={() => {
+          router.push("/"); //메인 페이지 이동
+        }}
+        onError={(msg) => {
+          setErrorMessage(msg);
+        }}
+      />
+
+      {!!errorMessage && (
+        <Modal
+          size="md"
+          message={errorMessage}
+          buttonText="확인"
+          onClick={() => setErrorMessage(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/features/auth/ui/LoginForm/LoginForm.tsx b/src/features/auth/ui/LoginForm/LoginForm.tsx
index af741655..4ba5b011 100644
--- a/src/features/auth/ui/LoginForm/LoginForm.tsx
+++ b/src/features/auth/ui/LoginForm/LoginForm.tsx
@@ -3,6 +3,8 @@
 import React, { useState } from "react";
 import { Input } from "@/entities/user/ui/Input/Input";
 import Button from "@/shared/ui/Button/Button";
+import { useAuthStore } from "../../model/auth.store";
+import { apiFetch } from "@/shared/api/fetcher";
 
 type FormSize = "sm" | "md" | "lg";
 
@@ -24,12 +26,27 @@ export const LoginForm = ({
   const [emailError, setEmailError] = useState<string | null>(null);
   const [passwordError, setPasswordError] = useState<string | null>(null);
 
+  const { setAccessToken } = useAuthStore();
+
   //로그인 요청 제출 핸들러, 추후 API 호출 예정
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // TODO : api 호출 및 검증 로직 추가, Zustand를 통한 토큰 저장 및 부모 핸들러 전달 로직 추가
+
     console.log("로그인 요청 폼 제출");
-    const res = {}; //
+    try {
+      const res = await apiFetch<{
+        accessToken: string;
+      }>("/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ email, password }),
+        noAuth: true,
+      });
+
+      setAccessToken(res.accessToken);
+      onSuccess?.();
+    } catch {
+      onError?.("로그인에 실패하였습니다.\n이메일과 비밀번호를 확인해주세요.");
+    }
   };
 
   // 이메일 유효성 검사 함수