🚀 Feat : 404페이지 구현 (#22)

src/App.tsx

@@ -1,9 +1,13 @@
+import NotFound from '@pages/NotFound/NotFound'
 import PostDetail from '@pages/PostDetail/PostDetail'
 import { Routes, Route } from 'react-router-dom'
 
 const App = () => {
   return (
     <Routes>
+      <Route 
+        path="*" 
+        element={<NotFound />} />
       <Route
         path='/postdetail'
         element={<PostDetail />}

src/pages/NotFound/NotFound.css

@@ -0,0 +1,61 @@
+.not-found-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: white;
+    text-align: center;
+    padding: 20px;
+  }
+  html,body{
+    background-color: red;
+  }
+  .quote-container {
+    margin-bottom: 20px;
+  }
+
+  .quote {
+    font-size: 1.3rem;
+    font-weight: 600;
+  }
+
+  .quote-author {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 50px;
+  }
+
+  .not-found-logo {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+  }
+
+  .image-container {
+    position: relative;
+  }
+
+  .heart-overlay1 {
+    position: absolute;
+    top: 30%;
+    left: 14%;
+
+    object-fit: contain;
+  }
+  .heart-overlay2 {
+    position: absolute;
+    top: 30%;
+    left: 64%;
+    object-fit: contain;
+  }
+
+  .home-link {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 16px;
+  }
+
+  .home-link:hover {
+    text-decoration: underline;
+  }

src/pages/NotFound/NotFound.tsx

@@ -0,0 +1,29 @@
+
+import './NotFound.css';
+import Aristo from '@assets/imgs/아리스토텔레스.png';
+import Heart from '@assets/imgs/하트.png';
+import NotLogo from '@assets/imgs/404 Not Found.png';
+import Container from '@/components/Conatiner/Container';
+
+const NotFound: React.FC = () => {
+  return (
+    <Container>
+    <div className="not-found-container">
+      <div className="quote-container">
+        <blockquote className="quote">
+          "누구가를 사랑한다는 것은<br></br> 자신을 그와 동일시 하는 것이다"
+        </blockquote>
+        <p className="quote-author">- 아리스토텔레스</p>
+        <img src={NotLogo} alt="404 Not Found" className="not-found-logo" />
+      </div>
+      <div className="image-container">
+        <img src={Aristo} alt="Aristotle" className="aristotle-image" />
+        <img src={Heart} alt="Heart" className="heart-overlay1" />
+        <img src={Heart} alt="Heart" className="heart-overlay2" />
+      </div>
+    </div>
+    </Container>
+  );
+};
+
+export default NotFound;