이번에는 쉬어 갈겸 url잘못입력했을시 오류 페이지로 이동되는 페이지를 디자인 작업하였다.
이쁘진않음..
현재 라우터는 아래와같다.
만약 "/login22222" 으로 요청시 NotFound << 페이지로 이동하게된다.
NotFound.jsx
import "./NotFound.css";
import { Link } from "react-router-dom";
const NotFound = () => {
return (
<div className="notfound_wrap">
<div className="notfound_box">
<h1>404</h1>
<h2>페이지를 찾을수 없습니다.</h2>
<p>죄송합니다. 더 이상 존재하지 않는 페이지입니다.</p>
<Link to="/" className="home_btn">
홈으로
</Link>
</div>
</div>
);
};
export default NotFound;
NotFound.css
.notfound_wrap {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.notfound_wrap .notfound_box {
background: url(/src/assets/images/logo.png) no-repeat 50% 0;
background-size: 400px;
width: 500px;
padding-top: 120px;
}
.notfound_wrap h1 {
text-align: center;
font-weight: bold;
font-size: 35px;
margin-bottom: 10px;
}
.notfound_wrap h2 {
text-align: center;
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.notfound_wrap p {
font-size: 14px;
text-align: center;
margin-bottom: 30px;
}
.notfound_wrap .home_btn {
text-decoration: none;
outline: none;
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background: rgb(231, 236, 253);
color: rgb(75, 90, 214);
margin: 0 auto;
border-radius: 5px;
font-weight: bold;
}
.notfound_wrap .home_btn:hover,
.notfound_wrap .home_btn:active {
text-decoration: none;
color: rgb(75, 90, 214);
background: rgb(231, 236, 253);
}
잘못된 페이지 이동했을시 테스트
으로작업하였다.
그리고 마지막으로 title 변경까지 할것이다.
현재는 Vite + React 으로 나오는데 moneyMind 으로 변경할것이다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>moneyMind</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
'프로그래밍 > 개인프로젝트' 카테고리의 다른 글
| 1. Todo List Application Project - ERD, 엔티티 정의서 (0) | 2025.01.02 |
|---|---|
| 0. Todo List Application Project (0) | 2025.01.02 |
| [프로젝트] 6. 로그인(일반) - 프론트화면(react) (1) | 2024.09.03 |
| [프로젝트] 5. 로그인(일반) (0) | 2024.08.29 |
| [프로젝트] 4. 프로젝트 Entity (0) | 2024.08.29 |
