PrivateRouter & ErrorPage 만들었지만 사용불가..

client/src/App.js

@@ -36,16 +36,15 @@ function App() {
               <Route path="/movielist" component={MovieListPage} />
               <Route path="/movie/:movieId" component={MoviePage} />
               <Route path="/mypage" component={MyPage} />
-              <Route path="/guest" component={GuestPage}/>
+              <Route path="/guest" component={GuestPage} />
               <Route path="/ticket/seat" component={TicketingSeatPage} />
               <Route path="/ticket" component={TicketingPage} />
               <Route path="/payment" component={Payment} />
               <Route path="/paymentcomplete" component={PaymentCompletePage} />
-              <Route path="/theater" component={TheaterPage}/>
+              <Route path="/theater" component={TheaterPage} />
               <Route path="/search" component={SearchPage} />
             </Switch>
           </div>
-
         </Switch>
       </Router>
     </AuthProvider>

client/src/components/PrivateRoute.js

+import { Redirect, Route } from "react-router-dom";
+import authApi from "../apis/auth.api.js";
+import { useAuth } from "../context/auth_context";
+import ErrorPage from "../pages/ErrorPage";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+
+    return (
+        <Route
+            {...rest}
+            render={(props) => {
+                if (user.id) {
+                    if (rest.role) {
+                        if (rest.role === user.role) {
+                            return <Component {...props} />;
+                        } else {
+                            return <ErrorPage />
+                        }
+                    } else {
+                        return <Component {...props} />
+                    }
+                } else {
+                    alert("로그인이 필요한 기능입니다.")
+                    return <Redirect to="/login" />;
+                }
+            }}
+        />
+    );
+};
+
+export default PrivateRoute
\ No newline at end of file

client/src/pages/ErrorPage.js

+const ErrorPage = () => {
+    return (
+        <div className="bg-white" id="notfound">
+            <div className="notfound">
+                <div className="notfound-404" style={{ backgroundImage: `url(/images/emoji.png)` }}></div>
+                <h1>404</h1>
+                <h2>Oops! Page Not Be Found</h2>
+                <p>Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily unavailable</p>
+                <a href="/">Back to homepage</a>
+            </div>
+        </div>
+    )
+}
+
+export default ErrorPage
\ No newline at end of file

client/src/scss/custom.scss

@@ -79,4 +79,95 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 
 .page-link:hover, .page-link:focus {
     background-color: #fff;
+}
+
+#notfound {
+    position: relative;
+    height: 100vh;
+}
+  
+#notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+}
+  
+.notfound {
+    max-width: 560px;
+    width: 100%;
+    padding-left: 160px;
+    line-height: 1.1;
+}
+  
+.notfound .notfound-404 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    width: 140px;
+    height: 140px;
+    background-size: cover;
+}
+  
+.notfound .notfound-404:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-transform: scale(2.4);
+        -ms-transform: scale(2.4);
+            transform: scale(2.4);
+    border-radius: 50%;
+    background-color: #f2f5f8;
+    z-index: -1;
+}
+  
+.notfound h1 {
+    font-family: 'Nunito', sans-serif;
+    font-size: 65px;
+    font-weight: 700;
+    margin-top: 0px;
+    margin-bottom: 10px;
+    color: #151723;
+    text-transform: uppercase;
+}
+  
+.notfound h2 {
+    font-family: 'Nunito', sans-serif;
+    font-size: 21px;
+    font-weight: 400;
+    margin: 0;
+    text-transform: uppercase;
+    color: #151723;
+}
+  
+.notfound p {
+    font-family: 'Nunito', sans-serif;
+    color: #999fa5;
+    font-weight: 400;
+}
+  
+.notfound a {
+    font-family: 'Nunito', sans-serif;
+    display: inline-block;
+    font-weight: 700;
+    border-radius: 40px;
+    text-decoration: none;
+    color: #388dbc;
+}
+  
+@media screen and (max-width: 767px) {
+    .notfound .notfound-404 {
+      width: 110px;
+      height: 110px;
+    }
+
+    .notfound {
+      padding-left: 15px;
+      padding-right: 15px;
+      padding-top: 110px;
+    }
 }
\ No newline at end of file