update

next.config.mjs

@@ -1,8 +1,12 @@
+// const isProd = process.env.NODE_ENV === "production";
+
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	output: "export",
 
 	basePath: "/holytechnics",
+	assetPrefix: "/holytechnics/",
 
 	// 에셋 압축용 sharp 패키지 설치하기 귀찮아...
 	compress: false,

src/app/components/navbar/index.tsx

@@ -14,6 +14,8 @@ import "./index.css";
 
 
 
+const placeholder = randomKeyword();
+
 export default function Navbar() {
 	return (
 		<nav>
@@ -29,12 +31,12 @@ export default function Navbar() {
 			<form
 				id="search"
 				role="search"
-				action="/search"
+				action="./search"
 				onSubmit={e => e.preventDefault()}
 			>
 				<input
 					type="search"
-					placeholder={randomKeyword()}
+					placeholder={placeholder}
 				/>
 				<button type="submit">
 					<FaSearch size={22}/>

src/app/global.css

@@ -12,6 +12,14 @@ body {
 	.divider {
 		margin: 0 7px;
 	}
+
+	input[type="number"] {
+		&::-webkit-inner-spin-button,
+		&::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
 }
 
 * {

src/app/login/page.css

@@ -1,5 +1,71 @@
-/* main {
+main#login {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-} */
+	align-items: center;
+
+	h1 {
+		margin: 20px 0;
+	}
+
+	form {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+
+		> #inputs {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			> input {
+				margin: 5px 0;
+
+				width: 240px;
+				height: 40px;
+
+				border: 1px solid black;
+				border-radius: 3px;
+
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+			}
+		}
+
+		> #button {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+
+			> button {
+				margin: 0 0 0 8px;
+
+				width: 80px;
+				height: 90px;
+
+				border: 0;
+				border-radius: 3px;
+
+				background-color: #18A8F1;
+				color: white;
+
+				font-size: 18px;
+
+				&:hover {
+					background-color: #0F6E9C;
+				}
+			}
+		}
+	}
+
+	hr {
+		margin: 20px 0;
+		width: 70%;
+	}
+}

src/app/login/page.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import Link from 'next/link';
+
 import Navbar from "@/app/components/navbar";
 import Footer from "@/app/components/footer";
 
@@ -11,22 +13,33 @@ export default function Login() {
 	return (
 		<>
 			<Navbar/>
-			<main>
+			<main id="login">
 				<h1>로그인</h1>
-				<form>
-					<input
-						type="text"
-						placeholder="아이디"
-					/>
-					<input
-						type="password"
-						placeholder="비밀번호"
-					/>
-					<button type="submit">로그인</button>
+				<form
+					action="./login"
+					method="post"
+					onSubmit={e => e.preventDefault()}
+				>
+					<div id="inputs">
+						<input
+							type="text"
+							placeholder="아이디"
+						/>
+						<input
+							type="password"
+							placeholder="비밀번호"
+						/>
+					</div>
+					<div id="button">
+						<button type="submit">로그인</button>
+					</div>
 				</form>
+				<div id="find">
+					<Link href="/find">아이디/비밀번호 찾기</Link>
+				</div>
 				<hr/>
 				<p>
-					아직 회원이 아니신가요? <a href="/register">회원가입</a>
+					아직 회원이 아니신가요? <Link href="/register">회원가입</Link>
 				</p>
 			</main>
 			<Footer/>

src/app/page.css

@@ -1,4 +1,4 @@
-#main {
+main#main {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;

src/app/privacy/page.css

@@ -0,0 +1,10 @@
+main#privacy {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+
+	h1 {
+		margin: 20px 0;
+	}
+}

src/app/privacy/page.tsx

@@ -3,14 +3,16 @@
 import Navbar from "@/app/components/navbar";
 import Footer from "@/app/components/footer";
 
+import "./page.css"
+
 
 
 export default function Login() {
 	return (
 		<>
 			<Navbar/>
-			<main>
-					<h1>개인정보처리방침 페이지</h1>
+			<main id="privacy">
+					<h1>개인정보처리방침</h1>
 			</main>
 			<Footer/>
 		</>

src/app/register/page.css

@@ -0,0 +1,58 @@
+main#register {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	h1 {
+		margin: 20px 0;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		> input {
+			margin: 5px 0;
+
+			width: 300px;
+			height: 40px;
+		}
+
+		> #agrees {
+			> label {
+				margin-left: 5px;
+
+				user-select: none;
+			}
+		}
+
+		> button {
+			margin: 10px 0;
+
+			width: 300px;
+			height: 40px;
+
+			border: 0;
+			border-radius: 3px;
+
+			background-color: #18A8F1;
+			color: white;
+
+			font-size: 18px;
+
+			cursor: pointer;
+
+			&:not([disabled]):hover {
+				background-color: #0E70A4;
+			}
+
+			&[disabled] {
+				background-color: #B0B0B0;
+				cursor: not-allowed;
+			}
+		}
+	}
+}

src/app/register/page.tsx

@@ -1,16 +1,97 @@
 'use client';
 
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
 import Navbar from "@/app/components/navbar";
 import Footer from "@/app/components/footer";
 
-
+import "./page.css";
 
 export default function Login() {
+	const [password, setPassword] = useState("");
+	const [passwordCheck, setPasswordCheck] = useState("");
+	const [agree, setAgree] = useState(false);
+	const [error, setError] = useState(true);
+
+	useEffect(() => {
+		if (password === passwordCheck && agree === true) {
+			setError(false);
+		} else {
+			setError(true);
+		}
+	}, [password, passwordCheck, agree]);
+
+
 	return (
 		<>
 			<Navbar/>
-			<main>
-				<h1>회원가입 페이지</h1>
+			<main id="register">
+				<h1>회원가입</h1>
+				<form
+					action="./register"
+					method="post"
+					onSubmit={e => e.preventDefault()}
+				>
+					<input
+						type="text"
+						placeholder="아이디"
+						required={true}
+					/>
+					<input
+						type="password"
+						placeholder="비밀번호"
+						required={true}
+						value={password}
+						onChange={e => {
+							setPassword(e.target.value);
+						}}
+					/>
+					<input
+						type="password"
+						placeholder="비밀번호 확인"
+						required={true}
+						value={passwordCheck}
+						onChange={e => {
+							setPasswordCheck(e.target.value);
+						}}
+					/>
+					<input
+						type="number"
+						placeholder="학번"
+						required={true}
+					/>
+					<input
+						type="email"
+						placeholder="이메일"
+						required={false}
+					/>
+					<input
+						type="number"
+						placeholder="전화번호"
+						required={false}
+					/>
+					<div id="agrees">
+						<input
+							type="checkbox"
+							id="privacy"
+							required={true}
+							checked={agree}
+							onChange={e => {
+								setAgree(e.target.checked);
+							}}
+						/>
+						<label htmlFor="privacy">
+							<Link href="/privacy">개인정보 수집</Link>에 동의합니다.
+						</label>
+					</div>
+					<button
+						type="submit"
+						disabled={error}
+					>
+						회원가입
+					</button>
+				</form>
 			</main>
 			<Footer/>
 		</>