feat: 로그인 실패 시 403 오류페이지로 연결

app/admin-web/src/App.js

@@ -12,44 +12,18 @@ import PrivateRoute from "./components/authentication/PrivateRoute";
 
 function PageTemplate() {
   return (
-    <PaperBase>
-      <Routes>
-        {/* PaperBase에서 props.children으로 들어간다. */}
-        <Route
-          path='/Home'
-          element={
-            <PrivateRoute>
-              <HomePage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/metadata/*'
-          element={
-            <PrivateRoute>
-              <MetaDataPage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/user/*'
-          element={
-            <PrivateRoute>
-              <UserPage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path='/user-management/*'
-          element={
-            <PrivateRoute>
-              <UserPage />
-            </PrivateRoute>
-          }
-        />
-        <Route path='*' element={<NotFound />} />
-      </Routes>
-    </PaperBase>
+    <PrivateRoute>
+      <PaperBase>
+        <Routes>
+          {/* PaperBase에서 props.children으로 들어간다. */}
+          <Route path='/Home' element={<HomePage />} />
+          <Route path='/metadata/*' element={<MetaDataPage />} />
+          <Route path='/user/*' element={<UserPage />} />
+          <Route path='/user-management/*' element={<UserPage />} />
+          <Route path='*' element={<NotFound />} />
+        </Routes>
+      </PaperBase>
+    </PrivateRoute>
   );
 }
 

app/admin-web/src/components/authentication/PrivateRoute.jsx

@@ -2,10 +2,11 @@ import React from "react";
 
 import { Navigate } from "react-router-dom";
 import { useAuth } from "./AuthContext";
+import Forbidden from "../../error/Forbidden";
 
 function PrivateRoute({ children }) {
   const { user } = useAuth();
-  return user ? children : <Navigate to='/' />;
+  return user ? children : <Forbidden />;
 }
 
 export default PrivateRoute;

app/admin-web/src/error/Forbidden.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "../style.css";
+
+function Forbidden() {
+  return (
+    <div id='notfound'>
+      <div className='notfound'>
+        <div className='notfound-404'>
+          <h2>
+            403 - 허가되지 않은 사용자입니다. <br /> 관리자에게 문의하세요.
+          </h2>
+        </div>
+        <a href='/'>뒤로가기</a>
+      </div>
+    </div>
+  );
+}
+
+export default Forbidden;

app/admin-web/src/style.css

@@ -0,0 +1,94 @@
+* {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+#notfound {
+    position: relative;
+    height: 100vh;
+}
+
+#notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.notfound {
+    max-width: 520px;
+    width: 100%;
+    line-height: 1.4;
+    text-align: center;
+}
+
+.notfound .notfound-404 {
+    position: relative;
+    height: 200px;
+    margin: 0px auto 20px;
+    z-index: -1;
+}
+
+.notfound .notfound-404 h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 28px;
+    font-weight: 400;
+    text-transform: uppercase;
+    color: #211b19;
+    background: #fff;
+    padding: 10px 5px;
+    margin: auto;
+    display: inline-block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+}
+
+.notfound a {
+    font-family: 'Montserrat', sans-serif;
+    display: inline-block;
+    font-weight: 700;
+    text-decoration: none;
+    color: #fff;
+    background: #3f51b5;
+    text-transform: uppercase;
+    padding: 13px 23px;
+    font-size: 18px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+}
+
+.notfound a:hover {
+    color: white;
+    background: #7986cb;
+}
+
+@media only screen and (max-width: 767px) {
+    .notfound .notfound-404 h1 {
+        font-size: 148px;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .notfound .notfound-404 {
+        height: 148px;
+        margin: 0px auto 10px;
+    }
+
+    .notfound .notfound-404 h2 {
+        font-size: 16px;
+    }
+
+    .notfound a {
+        padding: 7px 15px;
+        font-size: 14px;
+    }
+}