From d71582f11f14e8aaf43959ec805b5303ae0527c5 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Tue, 24 Sep 2024 06:00:57 +0900
Subject: [PATCH] =?UTF-8?q?#72=20feat:=20404=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                    |  17 +-
 src/pages/ErrorPage.tsx        | 293 +++++++++++++++++++++++++++++++++
 src/styles/ErrorPageStyled.tsx |  39 +++++
 3 files changed, 347 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/ErrorPage.tsx
 create mode 100644 src/styles/ErrorPageStyled.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b1ce7bc..fb12b10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import ChallengeCommunityPage from './pages/ChallengeCommunityPage';
 import CreateChallengePage from './pages/CreateChallengePage';
 import ChallengeDetailPage from './pages/ChallengeDetailPage';
 import TutorialPage from './pages/TutorialPage';
+import ErrorPage from './pages/ErrorPage';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -60,10 +61,22 @@ const router = (isLoggedIn: boolean) =>
   createBrowserRouter(
     createRoutesFromElements(
       <Route>
-        {/* 로그인 상관없이 접근 가능한 라우터 */}
-        {/* 이전에는 /login 라우터를 따로 두고, 기본 라우터에 접속시 조건문으로 이동할 페이지를 계산. 하지만 로그인 보호 라우터 적용하면서 /login 라우터를 기본 라우터로 변경함. */}
+        {/* 기본 라우터를 로그인 페이지로 변경 */}
         <Route path="/" element={<LoginPage />} />
+        {/* <Route
+          path="/"
+          element={
+            isLoggedIn ? (
+              <Navigate to={`/${localStorage.getItem('LatestBoard') ?? 'tutorial'}`} replace />
+            ) : (
+              <LoginPage />
+            )
+          }
+        /> */}
+
+        {/* 로그인 상관없이 접근 가능한 라우터. 보호되지 않는 라우터 */}
         <Route path="/api/oauth2/callback/:provider" element={<OAuthRedirectHandler />} />
+        <Route path="*" element={<ErrorPage />} />
 
         {/* 보호된 경로들에 ProtectedRoute 적용 */}
         <Route
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..52e642f
--- /dev/null
+++ b/src/pages/ErrorPage.tsx
@@ -0,0 +1,293 @@
+import { Navigate, useNavigate } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import * as S from '../styles/ErrorPageStyled';
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <S.Layout>
+      {/* <svg
+        width="110.625"
+        height="34.6875"
+        viewBox="0 0 177 55.5"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 9.5328C5.5 6.7828 14.65 2.3828 23.25 6.7828M23.25 6.7828C22.8335 14.8662 20.75 33.7828 12 33.7828C9.25 30 12.25 16.3828 23.25 6.7828ZM23.25 6.7828C32 2.28282 46.2 1.38286 33 33.7828"
+          stroke="url(#paint0Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M2 41.25C9 42.6667 27 44.5 43 40.5"
+          stroke="url(#paint1Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M44.5 5.9641C46.9167 5.04745 53.8 3.41412 62 4.21412C64.826 4.48984 65.8845 6.704 65.815 9.71435M65.815 9.71435C65.6325 17.6224 57.6645 31.0251 53.5 29.21435C47.75 26.71435 59.8805 4.71436 65.815 9.71435ZM65.815 9.71435C68.71 10.631 74 15.664 72 28.464"
+          stroke="url(#paint2Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M72.5 9.75C74.9165 10.1667 80.55 10.6 83.75 9"
+          stroke="url(#paint3Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M82.5 2C83.5835 4.66667 85.1 13.55 82.5 27.75"
+          stroke="url(#paint4Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M53 39.8219C53.503 39.8219 96.1655 20.0026 78.849 53.5"
+          stroke="url(#paint5Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M93 41.25C100 42.6667 118 44.5 134 40.5"
+          stroke="url(#paint6Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M135.5 5.9641C138.916 5.04745 144.8 3.41412 153 4.21412C155.826 4.48984 156.884 6.704 156.815 9.71435M156.815 9.71435C156.632 17.6224 148.664 31.0251 145 29.21435C138.75 26.71435 150.8805 4.71436 156.815 9.71435ZM156.815 9.71435C159.71 10.631 165 15.664 163 28.464"
+          stroke="url(#paint7Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M163.5 9.75C165.916 10.1667 171.55 10.6 174.75 9"
+          stroke="url(#paint8Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M173.5 2C174.583 4.66667 176.1 13.55 173.5 27.75"
+          stroke="url(#paint9Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M144 39.8219C144.503 39.8219 187.165 20.0026 169.849 53.5"
+          stroke="url(#paint10Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M112 7.38865C116.75 5.05535 123.7 2.77725 127.5 6.37725M127.5 6.37725C132.25 10.87725 131 30.1273 124.5 34.1273C118 38.1273 120.25 9.37725 127.5 6.37725Z"
+          stroke="url(#paint11Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M127.018 20.5671C127.956 18.6345 128.765 19.7618 129.051 20.5671C129.39 21.7601 129.864 24.6113 129.051 26.4724C128.238 28.3334 127.357 27.2478 127.018 26.4724C126.627 25.3093 126.08 22.4998 127.018 20.5671Z"
+          fill="#4C8CFF"
+          stroke="url(#paint12Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M93 9.9887C97.75 7.6554 108.2 3.88872 112 7.4887M112 7.4887C116.75 11.9887 115.5 31.2387 109 35.2387C102.5 39.2387 104.75 10.4887 112 7.4887Z"
+          stroke="url(#paint13Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <path
+          d="M111.018 20.5671C111.956 18.6345 112.765 19.7618 113.051 20.5671C113.39 21.7601 113.864 24.6113 113.051 26.4724C112.238 28.3334 111.357 27.2478 111.018 26.4724C110.627 25.3093 110.08 22.4998 111.018 20.5671Z"
+          fill="#4C8CFF"
+          stroke="url(#paint14Linear1996_8)"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id="paint0Linear1996_8"
+            x1="2"
+            y1="19.1414"
+            x2="38.3723"
+            y2="19.1414"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint1Linear1996_8"
+            x1="2"
+            y1="41.7129"
+            x2="43"
+            y2="41.7129"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint2Linear1996_8"
+            x1="44.5"
+            y1="16.6904"
+            x2="72.4405"
+            y2="16.6904"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint3Linear1996_8"
+            x1="72.5"
+            y1="9.568"
+            x2="83.75"
+            y2="9.568"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint4Linear1996_8"
+            x1="82.5"
+            y1="14.875"
+            x2="83.9355"
+            y2="14.875"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint5Linear1996_8"
+            x1="53"
+            y1="43.75"
+            x2="83"
+            y2="43.75"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint6Linear1996_8"
+            x1="93"
+            y1="41.7129"
+            x2="134"
+            y2="41.7129"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint7Linear1996_8"
+            x1="135.5"
+            y1="16.6904"
+            x2="163.4405"
+            y2="16.6904"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint8Linear1996_8"
+            x1="163.5"
+            y1="9.568"
+            x2="174.75"
+            y2="9.568"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint9Linear1996_8"
+            x1="173.5"
+            y1="14.875"
+            x2="174.935"
+            y2="14.875"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint10Linear1996_8"
+            x1="144"
+            y1="43.75"
+            x2="174"
+            y2="43.75"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint11Linear1996_8"
+            x1="112"
+            y1="23.3883"
+            x2="130.3685"
+            y2="23.3883"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint12Linear1996_8"
+            x1="126.5"
+            y1="23.5"
+            x2="129.5"
+            y2="23.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint13Linear1996_8"
+            x1="93"
+            y1="20.7198"
+            x2="114.868"
+            y2="20.7198"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+          <linearGradient
+            id="paint14Linear1996_8"
+            x1="111"
+            y1="23.5"
+            x2="114"
+            y2="23.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#4C8CFF" />
+            <stop offset="1" stopColor="#9847FF" />
+          </linearGradient>
+        </defs>
+      </svg> */}
+
+      <S.Title>404 ERROR</S.Title>
+
+      <S.Content>
+        죄송합니다. 페이지를 찾을 수 없습니다.
+        <br />
+        존재하지 않는 주소를 입력하셨거나,
+        <br />
+        요청하신 페이지의 주소가 변경, 삭제되어 찾을 수 없습니다.
+      </S.Content>
+
+      <S.HomeLink onClick={() => navigate('/')}>홈으로</S.HomeLink>
+    </S.Layout>
+  );
+};
+
+export default ErrorPage;
diff --git a/src/styles/ErrorPageStyled.tsx b/src/styles/ErrorPageStyled.tsx
new file mode 100644
index 0000000..e6971fd
--- /dev/null
+++ b/src/styles/ErrorPageStyled.tsx
@@ -0,0 +1,39 @@
+import { styled } from 'styled-components';
+import theme from './Theme/Theme';
+
+export const Layout = styled.div`
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Title = styled.p`
+  margin-top: 3rem;
+  font-size: 2rem;
+  font-weight: ${theme.font.weight.bold};
+  color: ${theme.color.text};
+  line-height: 1.3rem;
+`;
+
+export const Content = styled.p`
+  margin-top: 2rem;
+  color: ${theme.color.gray};
+  line-height: 1.5rem;
+  text-align: center;
+`;
+
+export const HomeLink = styled(Content)`
+  cursor: pointer;
+  color: ${theme.color.lightGray};
+  transition: color 200ms ease-in-out;
+  border-bottom: 1px solid ${theme.color.white};
+  &:hover {
+    color: ${theme.color.gray};
+    border-bottom: 1px solid ${theme.color.lightGray};
+  }
+`;