From e33e811ede74a3e4dc1f6560f81e470645446702 Mon Sep 17 00:00:00 2001
From: gracekim527 <lemonherb0323@naver.com>
Date: Fri, 30 Aug 2024 16:02:04 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat:=20404=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84=20(#26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                    |  2 ++
 src/pages/Errors/NotFound.jsx | 18 ++++++++++++++++++
 src/pages/Errors/style.jsx    | 36 +++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 src/pages/Errors/NotFound.jsx
 create mode 100644 src/pages/Errors/style.jsx

diff --git a/src/App.js b/src/App.js
index 7afeafc..139a2b9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,6 +38,7 @@ import RecommendHospital from "./pages/tracker/RecommendHospital";
 import RequestList from "./pages/friends/RequestList";
 import React, { useEffect, useState } from "react";
 import MobileWarning from "./components/common/MobileWarning";
+import NotFound from "./pages/Errors/NotFound";
 
 function App() {
   const [isMobile, setIsMobile] = useState(true);
@@ -97,6 +98,7 @@ function App() {
         <Route path="/diary/:id" element={<DiaryDetail />} />
         <Route path="/diary/edit/:id" element={<EditDiary />} />
         <Route path="/hospital" element={<RecommendHospital />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </Router>
   );
diff --git a/src/pages/Errors/NotFound.jsx b/src/pages/Errors/NotFound.jsx
new file mode 100644
index 0000000..9730987
--- /dev/null
+++ b/src/pages/Errors/NotFound.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Container, Headline2, Paragraph1 } from "./style.jsx";
+import AngryHoya from "../../assets/icons/AngryHoya.svg";
+
+function NotFound() {
+  return (
+    <Container>
+      <img src={AngryHoya} alt="호야 아이콘" />
+      <Headline2>이런! 페이지를 찾을 수 없어요.</Headline2>
+      <Paragraph1>
+        페이지의 주소가 잘못되었거나 변경되어 <br />
+        요청한 페이지를 찾을 수 없습니다.
+      </Paragraph1>
+    </Container>
+  );
+}
+
+export default NotFound;
diff --git a/src/pages/Errors/style.jsx b/src/pages/Errors/style.jsx
new file mode 100644
index 0000000..92126bf
--- /dev/null
+++ b/src/pages/Errors/style.jsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+
+  max-width: 430px;
+  min-width: 360px;
+  height: 100vh;
+  background: #fff;
+`;
+
+export const Headline2 = styled.h2`
+  color: #525463
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.25rem;
+  letter-spacing: -0.01875rem;
+`;
+
+export const Paragraph1 = styled.p`
+  color: #2b2d36;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: -0.00625rem;
+`;