Merge pull request #57 from Stocodi/feature/error

Feature: 404, Service Not Available 페이지 구현

src/App.tsx

@@ -18,11 +18,13 @@ import LectureSearchResultPage from "./pages/lecture-page/LectureSearchResultPag
 import LectureViewPage from "./pages/lecture-page/LectureViewPage";
 import LectureUploadPage from "./pages/lecture-page/LectureUploadPage";
 
-import PageNotFound from "./pages/PageNotFound";
 import TestPage from "./pages/test-page/TestPage";
 import QuestionPage from "./pages/test-page/QuestionPage";
 import ResultPage from "./pages/test-page/ResultPage";
 
+import PageNotFound from "./pages/PageNotFound";
+import ServiceNotAvailablePage from "./pages/ServiceNotAvailable";
+
 export default function App() {
     const pathname = useLocation();
 
@@ -40,6 +42,11 @@ export default function App() {
                         <Route path="lectures/view/:id" element={<LectureViewPage />} />
                         <Route path="lectures/upload" element={<LectureUploadPage />} />
 
+                        <Route path="/experiment" element={<ServiceNotAvailablePage />} />
+                        <Route path="/community" element={<ServiceNotAvailablePage />} />
+                        <Route path="/mypage/*" element={<ServiceNotAvailablePage />} />
+                        <Route path="/column" element={<ServiceNotAvailablePage />} />
+
                         <Route path="/about" element={<AboutPage />} />
                         <Route path="*" element={<PageNotFound />} />
                     </Route>

src/pages/PageNotFound.module.scss

@@ -0,0 +1,53 @@
+@import "@/styles/utils";
+
+.page_wrapper {
+    width: 100%;
+    height: calc(100vh - $nav-height);
+
+    margin: 200px auto;
+
+    text-align: center;
+
+    img {
+        display: block;
+
+        width: 150px;
+        margin: 0px auto;
+    }
+    h1 {
+        padding: 0px 20px;
+
+        font-size: 5rem;
+        font-family: "Chillax";
+        font-weight: bold;
+        color: $color-primary;
+    }
+    p {
+        font-size: 1rem;
+    }
+    button {
+        margin: 30px auto;
+    }
+}
+
+@include tablet {
+    .page_wrapper {
+        img {
+            width: 100px;
+        }
+        h1 {
+            font-size: 4rem;
+        }
+    }
+}
+
+@include mobile {
+    .page_wrapper {
+        img {
+            width: 100px;
+        }
+        h1 {
+            font-size: 3rem;
+        }
+    }
+}

src/pages/PageNotFound.tsx

@@ -1,3 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "../interfaces/forms/Button";
+
+import styles from "./PageNotFound.module.scss";
+
 export default function PageNotFound() {
-    return <>Page Not Found</>;
+    const navigate = useNavigate();
+
+    const onReturnClick = () => {
+        navigate("/");
+    };
+
+    return (
+        <div className={styles.page_wrapper}>
+            <img src="/icons/stocodi-letter.png" alt="" />
+            <h1>404 Not Found</h1>
+            <p>페이지를 찾을 수 없습니다</p>
+
+            <Button type="primary-filled" width="min(400px, 80%)" height="50px" onClick={onReturnClick}>
+                홈으로 돌아가기
+            </Button>
+        </div>
+    );
 }

src/pages/ServiceNotAvailable.module.scss

@@ -0,0 +1,53 @@
+@import "@/styles/utils";
+
+.page_wrapper {
+    width: 100%;
+    height: calc(100vh - $nav-height);
+
+    margin: 200px auto;
+
+    text-align: center;
+
+    img {
+        display: block;
+
+        width: 150px;
+        margin: 0px auto;
+    }
+    h1 {
+        padding: 0px 20px;
+
+        font-size: 5rem;
+        font-family: "Chillax";
+        font-weight: bold;
+        color: $color-primary;
+    }
+    p {
+        font-size: 1rem;
+    }
+    button {
+        margin: 30px auto;
+    }
+}
+
+@include tablet {
+    .page_wrapper {
+        img {
+            width: 100px;
+        }
+        h1 {
+            font-size: 4rem;
+        }
+    }
+}
+
+@include mobile {
+    .page_wrapper {
+        img {
+            width: 100px;
+        }
+        h1 {
+            font-size: 3rem;
+        }
+    }
+}

src/pages/ServiceNotAvailable.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "../interfaces/forms/Button";
+import styles from "./ServiceNotAvailable.module.scss";
+
+export default function ServiceNotAvailablePage() {
+    const navigate = useNavigate();
+
+    const onReturnClick = () => {
+        navigate("/");
+    };
+
+    return (
+        <div className={styles.page_wrapper}>
+            <img src="/icons/stocodi-letter.png" alt="" />
+            <h1>Service Not Available</h1>
+            <p>서비스 준비중입니다</p>
+
+            <Button type="primary-filled" width="min(400px, 80%)" height="50px" onClick={onReturnClick}>
+                홈으로 돌아가기
+            </Button>
+        </div>
+    );
+}