[feat]로그인 페이지 기능 구현 완료

frontend/src/Admin.jsx

@@ -0,0 +1,9 @@
+const Admin = () => {
+  return (
+    <div>
+      <h1>Admin Page</h1>
+      <p>This is the admin page.</p>
+    </div>
+  );
+};
+export default Admin;

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Home from "./Home";
 import Assignment from "./Assignment";
 import Deposit from "./Deposit";
 import Intro from "./Intro";
+import Admin from "./Admin";
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
         <Route path="/home" element={<Home />} />
         <Route path="/assignment" element={<Assignment />} />
         <Route path="/deposit" element={<Deposit />} />
+        <Route path="/admin" element={<Admin />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/Login.jsx

@@ -1,14 +1,96 @@
 import React from "react";
+import { useState } from "react";
+import InputBlock from "./components/InputBlock";
+import { useNavigate } from "react-router-dom";
+import styles from "./Login.module.css";
+
+const Login = () => {
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const [responseMessage, setResponseMessage] = useState("");
+
+  const navigate = useNavigate();
+
+  const handleChange = (index, value) => {
+    if (index === 0) setName(value);
+    else if (index === 1) setPassword(value);
+  };
+
+  const handleLogin = async () => {
+    try {
+      const res = await fetch("/api/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({ name, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+
+        if (res.status === 401) {
+          setResponseMessage(
+            data?.message || "이름 또는 비밀번호를 다시 확인해주세요."
+          );
+        } else {
+          setResponseMessage(
+            data?.message ||
+              "알 수 없는 오류가 발생했습니다. 다시 시도해주세요."
+          );
+        }
+
+        return;
+      }
+
+      const data = await res.json(); // { id, name, role }
+
+      localStorage.setItem("user", JSON.stringify(data));
+
+      if (data.role === "ADMIN") {
+        navigate("/admin");
+      } else if (data.role === "MEMBER") {
+        navigate("/home");
+      } else {
+        setResponseMessage("알 수 없는 사용자 유형입니다.");
+      }
+    } catch (error) {
+      console.error(error);
+      setResponseMessage("서버 연결에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
 
-const Login = ({ onLogin }) => {
   return (
-    <div>
-      <h2>로그인 페이지</h2>
-      <input type="text" placeholder="아이디" />
-      <input type="password" placeholder="비밀번호" />
-      <button onClick={onLogin}>로그인</button>
+    <div className={styles.login_container}>
+      <div className={styles.login}>
+        <h1 className={styles.pirocheck}>PIROCHECK</h1>
+
+        <InputBlock
+          inputs={[
+            {
+              type: "text",
+              placeholder: "이름",
+            },
+            {
+              type: "password",
+              placeholder: "비밀번호",
+            },
+          ]}
+          onChange={handleChange}
+        />
+        <div className={styles.errorWrapper}>
+          <span className={styles.errormessage}>{responseMessage}</span>
+        </div>
+        <button
+          onClick={handleLogin}
+          className={styles.button}
+          disabled={!name || !password}
+        >
+          로그인
+        </button>
+      </div>
     </div>
   );
 };
-
 export default Login;

frontend/src/Login.module.css

@@ -0,0 +1,44 @@
+.login {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.pirocheck {
+  font-size: 1.25rem;
+  transform: scaleX(1.5);
+  margin-bottom: 65px;
+}
+.login_container {
+  background-color: var(--background-black);
+  color: var(--main-green);
+  font-family: "Cafe24Moyamoya-Regular-v1.0", sans-serif;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.button {
+  background-color: var(--main-green);
+  color: white;
+  width: 309px;
+  height: 47px;
+  border-radius: 14px;
+  margin-top: 15px;
+  font-size: 16px;
+}
+button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.errorWrapper {
+  width: 309px;
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 8px;
+}
+.errormessage {
+  font-family: "Noto Sans", sans-serif;
+  color: #ff5858;
+  font-size: 10px;
+  margin-top: 10px;
+}

frontend/src/assets/root.css

@@ -17,7 +17,7 @@
   --fill-gray: #d9d9d9;
   --warn-red: #ff5858;
   --text-white: #ffffff;
-  --border-gray: #c7c7c7;
+  --border-gray: rgba(204, 204, 204, 0.4);
 }
 .noto-sans-kr-context {
   font-family: "Noto Sans KR", sans-serif;

frontend/src/components/InputBlock.jsx

@@ -1,15 +1,16 @@
 import React from "react";
 import "./componentsCss/InfoBlock.css";
 
-const InputBlock = ({ inputs }) => {
+const InputBlock = ({ inputs, onChange }) => {
   return (
-    <div>
+    <div className="inputBlock">
       {inputs.map((input, index) => (
         <input
           key={index}
-          class="inputTag"
+          className="inputTag"
           type={input.type}
           placeholder={input.placeholder}
+          onChange={(e) => onChange && onChange(index, e.target.value)}
         />
       ))}
     </div>

frontend/src/components/componentsCss/InfoBlock.css

@@ -9,7 +9,14 @@
   font-family: "Noto Sans KR", sans-serif;
   border: 1px var(--background-black) solid;
   padding: 10px;
+  margin-top: 11px;
 }
 .inputTag:focus {
   border: 1px var(--main-green) solid;
 }
+.inputBlock {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

frontend/vite.config.js

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+      },
+    },
+  },
+});