PrivateRoute

client/src/App.js

-import './App.css';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+import PrivateRoute from "./Components/PrivateRoute";
+import AdminRoute from "./Components/AdminRoute";
 import Home from './Pages/Home';
 import Login from './Pages/Login';
 import Signup from './Pages/Signup';
@@ -26,12 +27,25 @@ function App() {
         <Route path="/product/:productId" component={Product} />
         <Route path="/categories/:main/:sub" component={ProductsList} />
         <Route path="/categories/:main" component={ProductsList} />
-        <Route path="/admin" component={Admin} />
-        <Route path="/regist" component={ProductRegist} />
-        <Route path="/shoppingcart" component={ShoppingCart} />
-        <Route path="/payment" component={Payment} />
-        <Route path="/account" component={Account} />
-        <Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
+        <AdminRoute path="/admin">
+          <Admin />
+        </AdminRoute>
+        <AdminRoute path="/regist">
+          <ProductRegist />
+        </AdminRoute>
+        <PrivateRoute path="/shoppingcart">
+          <ShoppingCart />
+        </PrivateRoute>
+        <PrivateRoute path="/payment">
+          <Payment />
+        </PrivateRoute>
+        <PrivateRoute path="/account">
+          <Account />
+        </PrivateRoute>
+        {/* <PrivateRoute path='/kakao'>
+          
+        </PrivateRoute>
+        <Route  component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} /> */}
         <Redirect path="/" to="/" />
       </Switch>
     </Router>

client/src/Components/AdminRoute.js

+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { isAdmin } from '../utils/auth';
+
+function PrivateRoute({path, children}) {
+  if (isAdmin()) {
+    return (
+      <Route path={path}>
+        {children}
+      </Route>
+    )
+  } else {
+    alert('궈한이 없습니다. 죄송합니다.');
+    return (
+      <Redirect to='/' />
+    )
+  }
+}
+
+export default PrivateRoute
\ No newline at end of file

client/src/Components/MainNav.js

 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import { handleLogout, isAuthenticated } from '../utils/auth';
+import { handleLogout, isAuthenticated, isAdmin } from '../utils/auth';
 
 function MainNav() {
-    
     const user = isAuthenticated()
+    const admin = isAdmin()
 
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
@@ -14,7 +14,10 @@ function MainNav() {
             </Navbar.Brand>
             <Nav className="ml-auto">
                 {user ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
-                <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
+                    <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
+                    <Nav.Link href="/shoppingcart">
+                        <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
+                    </Nav.Link>
                 </>
                     : (
                         <>
@@ -22,12 +25,9 @@ function MainNav() {
                             <Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link>
                         </>
                     )}
-                <Nav.Link href="/shoppingcart">
-                    <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
-                </Nav.Link>
-                <Nav.Link href="/admin">
+                {admin ? <Nav.Link href="/admin">
                     <img alt="관리자" src="/icon/option.svg" width="30" height="30" />
-                </Nav.Link>
+                </Nav.Link> : ''}
             </Nav>
         </Navbar>
     )

client/src/Components/PrivateRoute.js

+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { isAuthenticated } from '../utils/auth';
+
+function PrivateRoute({path, children}) {
+  if (isAuthenticated()) {
+    return (
+      <Route path={path}>
+        {children}
+      </Route>
+    )
+  } else {
+    alert('회원이 아닙니다. 로그인 및 회원가입을 진행해 주세요.');
+    return (
+      <Redirect to='/' />
+    )
+  }
+}
+
+export default PrivateRoute
\ No newline at end of file

client/src/Components/SubNav.js

@@ -26,7 +26,7 @@ function SubNav() {
     }, [])
 
     return (
-        <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
+        <Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
             <style type="text/css">
                 {`
                 .nav-link, .nav-link:hover, .nav-link:active {

client/src/Pages/Payment.js

@@ -8,7 +8,6 @@ import { isAuthenticated } from '../utils/auth';
 import catchErrors from '../utils/catchErrors';
 
 function Payment({ match, location }) {
-
     const [cart, setCart] = useState(location.state)
     const [order, setOrder] = useState({products: location.state})
     const [userData, setUserData] = useState({})
@@ -171,6 +170,8 @@ function Payment({ match, location }) {
         return <Redirect to={'/kakao'} />
     }
 
+    
+
     return (
         <div>
             {/* {console.log(order)} */}

client/src/Pages/ShoppingCart.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
-import { Card, Button, Container, Row, Col } from 'react-bootstrap';
+import { Button, Container, Row, Col } from 'react-bootstrap';
 import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
-import { isAuthenticated } from '../utils/auth'
+import { isAuthenticated } from '../utils/auth';
 import CartCard from '../Components/CartCard';
 
 function ShoppingCart() {
@@ -119,7 +119,6 @@ function ShoppingCart() {
                     }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제하기</Button>
                 </div>
             </Container>
-
         </div>
     )
 }