From 48e32345b2a12c10c920a8e276f2d7dfa7e54be6 Mon Sep 17 00:00:00 2001 From: qkrxogmla Date: Tue, 6 May 2025 01:27:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[refactor]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?API=20fetch=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC=20(api/us?= =?UTF-8?q?er.js)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Login.jsx | 10 ++-------- frontend/src/api/user.js | 0 2 files changed, 2 insertions(+), 8 deletions(-) create mode 100644 frontend/src/api/user.js diff --git a/frontend/src/Login.jsx b/frontend/src/Login.jsx index 166e8a9..e74413a 100644 --- a/frontend/src/Login.jsx +++ b/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(); diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js new file mode 100644 index 0000000..e69de29 From 2ac7f4a7f18d903ac2504512ffcad81e6ec3cdd9 Mon Sep 17 00:00:00 2001 From: qkrxogmla Date: Tue, 6 May 2025 02:49:03 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[feat]Home=20page=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.jsx | 2 + frontend/src/Attendance.jsx | 9 ++++ frontend/src/Home.jsx | 27 +++++++++- frontend/src/Home.module.css | 49 +++++++++++++++++++ frontend/src/Intro.module.css | 23 +++++++-- frontend/src/Login.module.css | 1 - frontend/src/api/user.js | 14 ++++++ .../src/assets/img/{home.svg => logo.svg} | 2 +- 8 files changed, 118 insertions(+), 9 deletions(-) create mode 100644 frontend/src/Attendance.jsx rename frontend/src/assets/img/{home.svg => logo.svg} (99%) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index a8edf28..db217ff 100644 --- a/frontend/src/App.jsx +++ b/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() { } /> } /> } /> + } /> } /> } /> diff --git a/frontend/src/Attendance.jsx b/frontend/src/Attendance.jsx new file mode 100644 index 0000000..13dedd9 --- /dev/null +++ b/frontend/src/Attendance.jsx @@ -0,0 +1,9 @@ +const Attendance = () => { + return ( +
+

Attendance

+

Attendance page content goes here.

+
+ ); +}; +export default Attendance; diff --git a/frontend/src/Home.jsx b/frontend/src/Home.jsx index 8ac2af7..d8b1c7c 100644 --- a/frontend/src/Home.jsx +++ b/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
; + const navigate = useNavigate(); + return ( +
+
+

PIROCHECK

+ + + 로고 +
+
+ ); }; export default Home; diff --git a/frontend/src/Home.module.css b/frontend/src/Home.module.css index e69de29..4165919 100644 --- a/frontend/src/Home.module.css +++ b/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; +} diff --git a/frontend/src/Intro.module.css b/frontend/src/Intro.module.css index 1344aaa..9fc44ae 100644 --- a/frontend/src/Intro.module.css +++ b/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; } diff --git a/frontend/src/Login.module.css b/frontend/src/Login.module.css index ece282e..6bb5f64 100644 --- a/frontend/src/Login.module.css +++ b/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 { diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js index e69de29..3964bac 100644 --- a/frontend/src/api/user.js +++ b/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; diff --git a/frontend/src/assets/img/home.svg b/frontend/src/assets/img/logo.svg similarity index 99% rename from frontend/src/assets/img/home.svg rename to frontend/src/assets/img/logo.svg index 9b5895e..62a3683 100644 --- a/frontend/src/assets/img/home.svg +++ b/frontend/src/assets/img/logo.svg @@ -1,5 +1,5 @@ - +