✨ Feat: NotFound 페이지 구현 (sprint6-part2#50)

* ✨ Feat: 낫파운드 페이지 UI 구현

* ✨ Feat: 랜덤 이미지 구현

* ✨ Feat: 버튼 클릭 시 랜딩 페이지로 이동

* ✨ Feat: 반응형 디자인 수정

src/pages/NotFoundPage/index.jsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import CustomButton from '@/components/CustomButton';
+import Logo from '@/assets/icons/Logo';
+import Idol1 from '@/assets/images/nctdream.jpg';
+import Idol2 from '@/assets/images/newjeans.jpg';
+import Idol3 from '@/assets/images/seventeen.jpg';
+import Idol4 from '@/assets/images/aespa.jpg';
+import style from './styles.module.scss';
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  const idolList = [Idol1, Idol2, Idol3, Idol4];
+
+  const getRandomImage = () => {
+    const randomIndex = Math.floor(Math.random() * idolList.length);
+    return idolList[randomIndex];
+  };
+
+  const randomImage = getRandomImage();
+
+  return (
+    <div className={style.container}>
+      <div className={style.logo}>
+        <img src={randomImage} alt="아이돌 이미지" />
+        <div />
+        <Logo width={240} height={50} />
+      </div>
+      <div className={style.text}>
+        <h3>잘못된 경로</h3>
+        <p>존재하지 않는 페이지입니다.</p>
+      </div>
+      <CustomButton
+        rounded
+        btnText="랜딩 페이지로"
+        onClick={() => navigate('/')}
+      />
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/pages/NotFoundPage/styles.module.scss

@@ -0,0 +1,69 @@
+@import '../../styles/';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+
+  background-color: black;
+  color: white;
+
+  height: 100vh;
+  padding-block: 10vh;
+
+  button {
+    width: 300px;
+  }
+}
+
+.logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: relative;
+
+  margin-top: 5px;
+
+  img {
+    width: 350px;
+    height: 350px;
+
+    opacity: 70%;
+  }
+
+  div {
+    position: absolute;
+
+    width: 365px;
+    height: 365px;
+
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(2, 0, 14, 0) 0%,
+      rgba(2, 0, 14, 0.180099) 37.5%,
+      rgba(2, 0, 14, 0.5) 79.5%,
+      #02000e 100%
+    );
+  }
+
+  svg {
+    position: absolute;
+    top: 5px;
+    opacity: 80%;
+  }
+}
+
+.text {
+  text-align: center;
+
+  h3 {
+    @include font-base($color-white, 700, 26px, 26px);
+    margin-block: 10px;
+  }
+
+  p {
+    @include font-base($color-gray-cool-100, 400, 16px, 26px);
+  }
+}

src/router.jsx

@@ -4,6 +4,7 @@ import LadingPage from './pages/LandingPage';
 import ListPage from './pages/ListPage';
 import MyPage from './pages/MyPage';
 import TestPage from './pages/TestPage';
+import NotFoundPage from './pages/NotFoundPage';
 
 const router = createBrowserRouter([
   {
@@ -24,7 +25,7 @@ const router = createBrowserRouter([
   },
   {
     path: '*',
-    element: <p>존재하지 않는 페이지입니다.</p>,
+    element: <NotFoundPage />,
   },
 ]);