[feat]Home page 구현 완료

frontend/src/App.jsx

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

frontend/src/Attendance.jsx

@@ -0,0 +1,9 @@
+const Attendance = () => {
+  return (
+    <div>
+      <h1>Attendance</h1>
+      <p>Attendance page content goes here.</p>
+    </div>
+  );
+};
+export default Attendance;

frontend/src/Home.jsx

@@ -1,9 +1,32 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./Home.module.css";
+import logo from "./assets/img/logo.svg";
 
 const Home = () => {
-  return <div className={styles.home_container}></div>;
+  const navigate = useNavigate();
+  return (
+    <div className={styles.home_container}>
+      <div className={styles.home}>
+        <h1 className={styles.pirocheck}>PIROCHECK</h1>
+        <button
+          className={styles.button}
+          onClick={() => navigate("/assignment")}
+        >
+          <p>ASSIGNMENT</p>
+          <p>CHECK</p>
+        </button>
+        <button
+          className={styles.button}
+          onClick={() => navigate("/attendance")}
+        >
+          <p>ATTENDANCE</p>
+          <p>CHECK</p>
+        </button>
+        <img src={logo} alt="로고" />
+      </div>
+    </div>
+  );
 };
 
 export default Home;

frontend/src/Home.module.css

@@ -0,0 +1,49 @@
+.home {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+.pirocheck {
+  margin-top: 43px;
+  font-size: 1.25rem;
+  transform: scaleX(1.5);
+  margin-bottom: 103px;
+}
+.home_container {
+  background-color: var(--background-black);
+  color: var(--main-green);
+  font-family: "Cafe24Moyamoya-Regular-v1.0", sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.button {
+  width: 309px;
+  height: 81px;
+  border-radius: 14px;
+  background-color: var(--border-gray);
+  color: var(--text-white);
+  font-weight: 400;
+  font-size: 20px;
+  border: 1px var(--background-black) solid;
+  padding: 15px;
+  font-weight: bold;
+  margin-bottom: 26px;
+  z-index: 1;
+}
+.button p {
+  text-align: start;
+  transform: scale(1.3, 0.9);
+  margin-left: 40px;
+}
+.button:hover {
+  background-color: var(--card-toggle-green);
+  color: var(--text-white);
+}
+.home img {
+  position: relative;
+  opacity: 0.8;
+  top: -92px;
+  z-index: 0;
+}

frontend/src/Intro.module.css

@@ -1,12 +1,24 @@
 .intro {
-  background-image: url("./assets/img/home.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
+  width: 390px;
+  position: relative;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.intro::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("./assets/img/logo.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  opacity: 0.5;
+  z-index: -1;
 }
 .pirocheck {
   font-size: 1.25rem;
@@ -16,6 +28,7 @@
   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);
+  display: flex;
+  justify-content: center;
 }

frontend/src/Login.jsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import InputBlock from "./components/InputBlock";
 import { useNavigate } from "react-router-dom";
 import styles from "./Login.module.css";
+import { loginUser } from "./api/user";
 
 const Login = () => {
   const [name, setName] = useState("");
@@ -18,14 +19,7 @@ const Login = () => {
 
   const handleLogin = async () => {
     try {
-      const res = await fetch("/api/login", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        credentials: "include",
-        body: JSON.stringify({ name, password }),
-      });
+      const res = await loginUser({ name, password });
 
       if (!res.ok) {
         const data = await res.json();

frontend/src/Login.module.css

@@ -14,7 +14,6 @@
   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 {

frontend/src/api/user.js

@@ -0,0 +1,14 @@
+export const loginUser = async ({ name, password }) => {
+  const res = await fetch("/api/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({ name, password }),
+  });
+
+  return res;
+};
+
+export default loginUser;