.

client/src/App.js

@@ -26,13 +26,8 @@ function App() {
 
   return (
     <Container className="vh-100 d-flex justify-content-md-center align-items-center">
-      <Col md={6} style={{marginTop:140}}>
-        <Row style={{marginBottom:20}}>
-          <Image src={ohuh} />
-        </Row>
-        <Row>
-        <Navbar bg="#fff" variant="light">
-            <Nav className="mr-auto">
+      <Col md={6} style={{ marginTop: 140 }}>
+        <Nav className="justify-content-end" bg="#fff" variant="light" >
           {user ? <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
             : (
               <>
@@ -40,12 +35,14 @@ function App() {
                 <Nav.Link href="/login">로그인</Nav.Link>
               </>
             )}
+          <Nav.Link href='/bookmark'>북마크</Nav.Link>
         </Nav>
-          </Navbar>
+        <Row style={{ marginBottom: 20 }}>
+          <Image src={ohuh} />
         </Row>
-        <Row style={{marginBottom:500}}>
+        <Row style={{ marginBottom: 500 }}>
           <Form className="vw-100" onSubmit={handleSubmit}>
-            <InputGroup style={{width:560}}>
+            <InputGroup style={{ width: 560 }}>
               <Form.Control
                 size="lg"
                 placeholder="검색어를 입력하세요."

client/src/Bookmark.js

+import React, { useState, useEffect } from 'react'
+import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar, ListGroup, Image, Table } from "react-bootstrap"
+import axios from "axios"
+import { Redirect } from 'react-router-dom'
+// import ohuhsm  from "./ohuh-sm.PNG";
+
+// function addFavorite() {
+//     const title = document.title
+//     const url = location.href
+//     if (window.sidebar && window.sidebar.addPanel) {
+//         window.sidebar.addPanel(title, url, "")
+//     } else if (window.opera && window.print) {
+//         const elem = document.createElement('a');
+//         elem.setAttribute('href', url);
+//         elem.setAttribute('title', title);
+//         elem.setAttribute('rel', 'sidebar');
+//         elem.click();
+//     } else if (document.all) { //msie
+//         window.external.AddFavorite(url, title);
+//     } else {
+//         alert("해당브라우저는 즐겨찾기 추가기능이 지원되지 않습니다.\n\n수동으로 즐겨찾기에 추가해주세요.");
+//         return true;
+//     }
+//     return (
+//         <Container>
+//             <Col>
+
+//             </Col>
+//         </Container>
+//     )
+
+// }
+
+
+function Bookmark() {
+    const [index, setIndex] = useState(1);
+    const [showSet, setShowSet] = useState([false, false, false, false]);
+    const url = [{
+        urlname: "북마크이름",
+        urlpage: "안녕하세요",
+    }]
+
+    return (
+        <Container>
+            <Navbar bg="primary" variant="dark">
+                <Navbar.Brand href="/">북마크</Navbar.Brand>
+                <Nav className="mr-auto">
+                    <Nav.Link href="/">Home</Nav.Link>
+                </Nav>
+                {/* <Form inline>
+                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
+                <Button variant="outline-light">Search</Button>
+            </Form> */}
+            </Navbar>
+                <Form>
+                    <ListGroup>
+                        <Row>{url.urlname}</Row>
+                        <ListGroup.Item action href="/">북마크1</ListGroup.Item>
+                        <ListGroup.Item>북마크2</ListGroup.Item>
+                        <ListGroup.Item>북마크3</ListGroup.Item>
+                        <ListGroup.Item>북마크4</ListGroup.Item>
+                        <ListGroup.Item>북마크5</ListGroup.Item>
+                        <ListGroup.Item>북마크6</ListGroup.Item>
+                        <ListGroup.Item>북마크7</ListGroup.Item>
+                    </ListGroup>
+                </Form>
+        </Container>
+    )
+}
+
+export default Bookmark
\ No newline at end of file

client/src/Components/PrivateRoute.js

+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import { isAuthenticated } from "../utils/auth";
+
+function PrivateRoute({path, children}) {
+    if (isAuthenticated()) {
+        return (
+            <Route path={path}>
+                {children}
+            </Route>
+        )
+    } else {
+        return (
+            <Redirect to='/login' />
+        )
+    }
+}
+
+export default PrivateRoute

client/src/Search.js

@@ -4,6 +4,7 @@ import ohuh from './ohuh-sm.PNG';
 import Place from './Components/Place';
 import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination, Nav, Navbar } from 'react-bootstrap';
 import Paginations from './pagination.js';
+import { addFavorite } from './Bookmark.js'
 
 function Search(props) {
     const endPage = 10;
@@ -455,15 +456,7 @@ function Search(props) {
     return (
         <Container >
             <Link to="/" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
-            <Row className='d-flex justify-content-flex-start'>
-                {/* <Navbar bg="#fff" variant="light">
-                    <Nav className="mr-auto">
-                        <Nav.Link href="#home">회원가입</Nav.Link>
-                        <Nav.Link href="#features">로그인</Nav.Link>
-                        <Nav.Link href="#pricing">로그아웃</Nav.Link>
-                    </Nav>
-                </Navbar> */}
-            </Row>
+
             <Row className="mb-2" className="d-flex justify-content-center">
                 <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
                     <InputGroup size="lg">
@@ -490,7 +483,7 @@ function Search(props) {
                     return (
                         <Col key={index} md={6} >
                             <Card align="center" border="info" style={{ margin: "3%" }}>
-                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}</Card.Title>
+                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }}>{place.name}</Card.Title>
                                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                 <Card.Body >
                                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >

client/src/index.js

@@ -7,6 +7,8 @@ import Search from './Search';
 import reportWebVitals from './reportWebVitals';
 import Signup from './Components/Signup'
 import Login from './Components/Login'
+import PrivateRoute from "./Components/PrivateRoute";
+import Bookmark from "./Bookmark"
 import {
   BrowserRouter as Router,
   Switch,
@@ -25,6 +27,7 @@ ReactDOM.render(
         <Route path='/signup' component={Signup}/>
         <Route path='/login' component={Login} />
         <Redirect path="/search/:search" to="/search" />
+        <PrivateRoute path='/bookmark'><Bookmark/></PrivateRoute>
       </Switch>
     </Router>
   </React.StrictMode>,