fix: fix static components (Navbar, Footer) being hydrated

JadeMin-school · Jun 25, 2024 · aab1b4c · aab1b4c
1 parent 7afc340
commit aab1b4c
Show file tree

Hide file tree

Showing 15 changed files with 393 additions and 182 deletions.
diff --git a/src/app/components/navbar/index.css b/src/app/components/navbar/index.css
@@ -33,6 +33,10 @@ nav {
 			border-right-width: 0;
 			border-top-left-radius: 5px;
 			border-bottom-left-radius: 5px;
+
+			&::-webkit-search-cancel-button {
+				display: none;
+			}
 		}
 		button {
 			width: 40px;

diff --git a/src/app/components/navbar/index.tsx b/src/app/components/navbar/index.tsx
@@ -13,8 +13,6 @@ import "./index.css";
 
 
 
-const placeholder = randomKeyword();
-
 export default function Navbar() {
 	return (
 		<nav>
@@ -35,7 +33,7 @@ export default function Navbar() {
 			>
 				<input
 					type="search"
-					placeholder={placeholder}
+					placeholder={randomKeyword()}
 				/>
 				<button type="submit">
 					<FaSearch size={22}/>

diff --git a/src/app/global.css b/src/app/global.css
@@ -40,6 +40,10 @@ body {
 		}
 	}
 
+	h1 {
+		margin: 20px 0;
+	}
+
 	.divider {
 		margin: 0 7px;
 	}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 
 import Providers from "./components/providers";
+import Navbar from './components/navbar';
+import Footer from "./components/footer";
 
 import "./global.css";
 
@@ -22,7 +24,9 @@ export default function RootLayout(
 		<html lang="ko">
 			<body>
 				<Providers>
+					<Navbar/>
 					{ children }
+					<Footer/>
 				</Providers>
 			</body>
 		</html>

diff --git a/src/app/login/page.css b/src/app/login/page.css
@@ -5,10 +5,6 @@ main#login {
 	align-content: center;
 	justify-content: center;
 	align-items: center;
-
-	h1 {
-		margin: 20px 0;
-	}
 
 	form {
 		display: flex;
@@ -30,16 +26,10 @@ main#login {
 
 				border: 1px solid black;
 				border-radius: 3px;
-
-				&::-webkit-inner-spin-button,
-				&::-webkit-outer-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
 			}
 		}
 
-		> #button {
+		> #submit {
 			display: flex;
 			flex-direction: row;
 			justify-content: center;

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -2,47 +2,40 @@
 
 import Link from 'next/link';
 
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-
 import "./page.css";
 
 
 
 export default function Login() {
 	return (
-		<>
-			<Navbar/>
-			<main id="login">
-				<h1>로그인</h1>
-				<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>
+		<main id="login">
+			<h1>로그인</h1>
+			<form
+				action="./login"
+				method="post"
+				onSubmit={e => e.preventDefault()}
+			>
+				<div id="inputs">
+					<input
+						type="text"
+						placeholder="아이디"
+						required={true}
+					/>
+					<input
+						type="password"
+						placeholder="비밀번호"
+						required={true}
+					/>
+				</div>
+				<div id="submit">
+					<button type="submit">로그인</button>
 				</div>
-				<hr/>
-				<p>
-					아직 회원이 아니신가요? <Link href="/register">회원가입</Link>
-				</p>
-			</main>
-			<Footer/>
-		</>
+			</form>
+			<Link href="/reset">비밀번호를 잊으셨나요?</Link>
+			<hr/>
+			<p>
+				아직 회원이 아니신가요? <Link href="/register">회원가입</Link>
+			</p>
+		</main>
 	);
 }
diff --git a/src/app/my/page.css b/src/app/my/page.css
@@ -0,0 +1,87 @@
+main#my {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: center;
+	align-content: center;
+	justify-content: center;
+	align-items: center;
+
+	margin-top: 10px;
+
+	aside {
+		width: 220px;
+		height: 300px;
+
+		padding: 10px 0 0 10px;
+
+		#hat {
+			padding: 10px;
+
+			border-top-right-radius: 5px;
+			border-top-left-radius: 5px;
+
+			background-color: #1D89FF;
+
+			color: white;
+		}
+
+		#shoes {
+			padding: 10px;
+
+			height: 104%;
+
+			border-bottom-right-radius: 5px;
+			border-bottom-left-radius: 5px;
+
+			background-color: #EEEEEE;
+
+			ul {
+				margin: 0px;
+				padding: 0px;
+
+				li {
+					list-style: none;
+				}
+			}
+		}
+	}
+
+	#content {
+		width: 520px;
+		height: 300px;
+
+		padding: 10px 10px 0 0;
+
+		#next-time {
+			padding: 10px;
+			margin-bottom: 10px;
+
+			background-color: #B8E9FF;
+		}
+
+		#weather {
+			padding: 10px;
+			margin-top: 10px;
+
+			height: 100%;
+
+			background-color: #ccd4dd;
+			text-align: center;
+
+			#icon {
+				display: flex;
+				align-content: center;
+				justify-content: center;
+				align-items: center;
+
+				> svg {
+					margin: 10px 20px;
+				}
+			}
+
+			#description {
+				margin-top: 10px;
+			}
+		}
+	}
+}
diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import {
+	FaSun, FaCloudRain, FaSnowflake,
+	FaCheckCircle
+} from 'react-icons/fa';
+
+import "./page.css";
+
+
+
+export default function MyPage() {
+	return (
+		<main id="my">
+			<aside>
+				<div id="hat">
+					<span>구독 중인 알림 <FaCheckCircle color="#5FA777"/></span>
+				</div>
+				<div id="shoes">
+					<ul>
+						<li>학식 알림</li>
+						<li>시간표 알림</li>
+					</ul>
+				</div>
+			</aside>
+			<div id="content">
+				<div id="next-time">
+					<span>다음 강의 : { "ChatGPT" }</span>
+				</div>
+				<div id="weather">
+					<div id="icon">
+						<FaCloudRain
+							color="blue"
+							size={60}
+						/>
+						<FaSun
+							color="yellow"
+							size={60}
+						/>
+						<FaSnowflake
+							color="white"
+							size={60}
+						/>
+					</div>
+					<div id="description">
+						<span>오늘의 날씨는 아주 화창합니다.</span>
+					</div>
+				</div>
+			</div>
+		</main>
+	);
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,55 +5,48 @@ import {
 	FaCheckCircle
 } from 'react-icons/fa';
 
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-
 import "./page.css";
 
 
 
 export default function Home() {
 	return (
-		<>
-			<Navbar/>
-			<main id="main">
-				<div id="content">
-					<div id="next-time">
-						<span>다음 강의 : { "ChatGPT" }</span>
-					</div>
-					<div id="weather">
-						<div id="icon">
-							<FaCloudRain
-								color="blue"
-								size={60}
-							/>
-							<FaSun
-								color="yellow"
-								size={60}
-							/>
-							<FaSnowflake
-								color="white"
-								size={60}
-							/>
-						</div>
-						<div id="description">
-							<span>오늘의 날씨는 아주 화창합니다.</span>
-						</div>
-					</div>
+		<main id="main">
+			<div id="content">
+				<div id="next-time">
+					<span>다음 강의 : { "ChatGPT" }</span>
 				</div>
-				<aside>
-					<div id="hat">
-						<span>구독 중인 알림 <FaCheckCircle color="#5FA777"/></span>
+				<div id="weather">
+					<div id="icon">
+						<FaCloudRain
+							color="blue"
+							size={60}
+						/>
+						<FaSun
+							color="yellow"
+							size={60}
+						/>
+						<FaSnowflake
+							color="white"
+							size={60}
+						/>
 					</div>
-					<div id="shoes">
-						<ul>
-							<li>학식 알림</li>
-							<li>시간표 알림</li>
-						</ul>
+					<div id="description">
+						<span>오늘의 날씨는 아주 화창합니다.</span>
 					</div>
-				</aside>
-			</main>
-			<Footer/>
-		</>
+				</div>
+			</div>
+			<aside>
+				<div id="hat">
+					<span>구독 중인 알림 <FaCheckCircle color="#5FA777"/></span>
+				</div>
+				<div id="shoes">
+					<ul>
+						<li>학식 알림</li>
+						<li>시간표 알림</li>
+					</ul>
+				</div>
+			</aside>
+		</main>
 	);
 }