Merge pull request #108 from nidor022/feature/#79

[#79] 404페이지

Author: cskime

src/app.jsx

@@ -9,6 +9,7 @@ import MessagesPage from "./pages/messages-page";
 import SendMessagePage from "./pages/send-message-page";
 import TestApiPage from "./tests/test-api-page";
 import TestComponentsPage from "./tests/test-components-page";
+import Error404Page from "./pages/404-page";
 import GlobalStyle from "./styles/global-style";
 
 function Provider({ children }) {
@@ -62,10 +63,12 @@ function App() {
             </Route>
             <Route path="/test-components" element={<TestComponentsPage />} />
             <Route path="/test-api" element={<TestApiPage />} />
+            <Route path="*" element={<Error404Page />} />
           </Routes>
         </BrowserRouter>
       </Provider>
     </>
+
   );
 }
 

src/assets/ic-paperairplane.svg

@@ -0,0 +1,152 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
+import styled from "styled-components";
+import CrushedPaperPlane from "../assets/ic-paperairplane.svg";
+import logoImage from "../assets/logo.svg";
+import { media } from "../utils/media";
+
+const TopContainer = styled.article`
+  height: 100vh;
+  border: 1px solid #ff000021;
+  display: flex;
+  font-size: 80px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const ContentsContainer = styled.section`
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: url(${CrushedPaperPlane}) center/cover repeat;
+    background-size: 250px;
+    opacity: 0.15;
+    z-index: 0;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+const Contents = styled.article`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ErrorNumber = styled.h1`
+  font-weight: 900;
+  color: var(--color-purple-700);
+  margin: 0;
+  font-size: 200px;
+
+  ${media.mobile} {
+    font-size: 130px;
+  }
+`;
+
+const ErrorComment = styled.span`
+  font-size: 80px;
+  color: #6e6293;
+  font-weight: 700;
+
+  em {
+    font-size: 100px;
+    font-weight: 800;
+    font-style: normal;
+    color: #240079;
+  }
+
+  ${media.tablet} {
+    font-size: 70px;
+    em {
+      font-size: 90px;
+    }
+  }
+
+  ${media.mobile} {
+    font-size: 50px;
+    em {
+      font-size: 60px;
+    }
+  }
+`;
+
+const ErrorCommentSofter = styled.span`
+  font-size: 50px;
+  color: #6e6293;
+  font-weight: 400;
+
+  ${media.tablet} {
+    font-size: 40px;
+  }
+
+  ${media.mobile} {
+    font-size: 30px;
+  }
+`;
+
+const AirplaneSVG = styled.img`
+  width: 250px;
+  padding: 30px 0;
+
+  ${media.mobile} {
+    width: 200px;
+  }
+`;
+
+const HomeButton = styled(PrimaryButton)`
+  margin-top: 120px;
+  font-weight: 400;
+  padding: 14px 90px;
+
+  ${media.tablet} {
+    justify-self: anchor-center;
+    width: calc(100% - 48px);
+    padding: 14px 20px;
+    margin: 120px 24px 24px 24px;
+  }
+`;
+
+const Error404Page = () => {
+  const navigate = useNavigate();
+
+  const handleMainButtonClick = () => {
+    navigate("/");
+  };
+
+  useEffect(() => {
+    document.title = "404 - Page Not Found";
+  }, []);
+
+  return (
+    <TopContainer>
+      <ContentsContainer>
+        <Contents>
+          <AirplaneSVG src={logoImage} />
+          <ErrorNumber>404</ErrorNumber>
+          <ErrorComment>
+            <em>Oops!</em> Page Not Found...
+          </ErrorComment>
+          <ErrorCommentSofter>
+            Don't worry, let's get you back on track.
+          </ErrorCommentSofter>
+          <HomeButton
+            size={BUTTON_SIZE.large}
+            title="메인으로 돌아가기"
+            onClick={handleMainButtonClick}
+          />
+        </Contents>
+      </ContentsContainer>
+    </TopContainer>
+  );
+};
+
+export default Error404Page;