Merge branch 'young' into master

.gitignore

 node_modules
+<<<<<<< HEAD
+=======
+package-lock.json
+>>>>>>> young

client/.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.env
+.eslintcache
+.package-lock.json
+debug.log

client/README.md

+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

client/package.json

+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.5.3",
+    "nanoid": "^3.1.20",
+    "react": "^17.0.1",
+    "react-bootstrap": "^1.4.0",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "socket.io-client": "^3.0.5",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:3030"
+}

client/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/public/robots.txt

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

client/src/App.css

+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

client/src/App.js

+import logo from './logo.svg';
+import './App.css';
+import Hello from './Hello';
+
+function App() {
+  console.log()
+  return (
+    <Hello name='대기'/>
+  );
+}
+
+export default App;

client/src/App.test.js

+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

client/src/Components/Chat.js

+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
+import { isAuthenticated } from '../utils/auth';
+import catchErrors from '../utils/catchErrors';
+import { BsCaretLeftFill, BsList, BsExclamationCircleFill, BsCheck, BsX } from "react-icons/bs";
+import { FiSend } from "react-icons/fi";
+
+const INIT_CHAT = {
+  msg: '',
+  sender: '',
+  img: '',
+  time: ''
+}
+
+function Chat(props) {
+
+  const [inner, setInner] = useState([''])
+  const [chat, setChat] = useState([INIT_CHAT])  
+  
+  const simpleTime = new Date().toLocaleTimeString()
+  const usualTime = simpleTime.substring(0, simpleTime.length - 3)
+  const realTime = new Date().toISOString()
+
+  const [disabled, setDisabled] = useState(true)
+  const [user, setUser] = useState('')
+  const [error, setError] = useState('');
+
+  const [exit, setExit] = useState(false);
+
+  const userId = isAuthenticated()
+
+  async function getProfile(userId) {
+    try {
+      const response = await axios.get(`/users/${userId}`)
+      setUser(response.data)
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
+  function handleChange(e) {
+    e.preventDefault()
+    setInner(e.target.value)
+    setDisabled(false)
+
+    console.log(props.leftInfo)
+  }
+
+  function sendMsgCH(e) {
+    e.preventDefault()
+
+    props.setSingleTime(usualTime)
+    props.setSingleImg(user.profileimg)
+    props.setSingleUser(user.nickname)
+    props.setSingleChat(inner)
+    props.sendMsg(e)
+    setInner('')
+    setDisabled(true)
+
+    recordEntryLog()  //그냥 새로고침해도 최신화
+  }
+
+  async function recordEntryLog() {
+    const leaveInfo = { userId: userId, roomCode: props.roomCode, leaveTime: realTime }
+    try {
+      const check = await axios.get('/room/entrylog', { params: leaveInfo })
+      if (check.data) {       //있으면 put으로
+        await axios.put('/room/entrylog', leaveInfo)
+      } else {        //없으면 post
+        await axios.post('/room/entrylog', leaveInfo)
+      }
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+
+  }
+
+  function handleClick() {
+    props.closeChatRoom(props.roomCode)
+    props.setRecievedMsg('')
+    props.handleChatc()
+    setChat([''])
+    recordEntryLog()
+    props.setRoomCode('')
+  }
+
+  function settingtime(hour) {
+    let newhour = parseInt(hour) + 9
+    if (newhour >= 24) {
+      newhour -= 24
+    }
+    if (newhour >= 13) {
+      newhour -= 12
+      newhour = '오후 ' + newhour
+    } else {
+      newhour = '오전 ' + newhour
+    }
+    return newhour
+  }
+
+  //이전 채팅 내용에 대한 것 불러오기
+  //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식
+  async function getPreviousChat() {
+    const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
+    const info = respond.data
+
+    let intochat = []
+    for (let prop in info) {
+      let hour = info[prop].createdAt.split('T')[1].split(':')
+      hour = settingtime(hour[0]) + ':' + hour[1]
+      intochat.push({ msg: info[prop].message, sender: info[prop].username, img: info[prop].profileimg, time: hour })
+    }
+    setChat(intochat)
+  }
+
+  async function exitAndCloseRoom() {
+    props.exitRoom(props.roomCode)
+    setExit(false)
+    props.handleChatc()
+  }
+
+  useEffect(() => {
+    getProfile(userId)
+  }, [userId])
+
+  useEffect(() => {
+    setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }])
+  }, [props.singleChat])
+
+  useEffect(() => {
+    setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }])
+  }, [props.recievedMsg])
+
+  useEffect(() => {
+    getPreviousChat()
+  }, [props.roomCode])
+
+
+  return (
+    <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
+      <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
+        <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
+        <div style={{ justifyContent: "center" }}>
+          <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
+          <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
+        </div>
+        <a href="#;" onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
+      </div>
+      {exit ?
+        <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
+          <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" />  퇴장하시겠습니까?</p>
+          <a href="#;" onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
+          <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
+        </div>
+        : null}
+      <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "75%", margin: "1%", background: '' }}>
+        {chat.map((value, index) => {
+          if (!(value.msg === '')) {
+            if (value.sender === "system") {
+              return (
+                <Row style={{ background: "#F5F5F5", border: "none", justifyContent: "center" }}>
+                  {value.msg}
+                </Row>
+              )
+            } else if (!(value.sender === user.nickname)) {
+              return (
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
+                  <Col xs="auto">
+                    <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
+                  </Col>
+                  <Col className="ml-2">
+                    <Row><strong>{value.sender}</strong></Row>
+                    <Row xs="auto" className='d-flex flex-wrap-nowrap'>
+                      <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
+                      <Col className="ml-1">{value.time}</Col>
+                    </Row>
+                  </Col>
+                </Row>
+              )
+            } else {
+              return ( //내가 보낸 메시지
+                <Row key={index} className='mt-2 justify-content-end' style={{ width: "100%" }}>
+                  <Row className='d-flex flex-wrap-nowrap' >
+                    <Col xs="auto" className="ml-3">{value.time}</Col>
+                    <Col className='mr-1' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
+                  </Row>
+                </Row>
+              )
+            }
+          } else {
+            return null
+          }
+        })
+        }
+      </div>
+      <div id="chat-low-side" style={{ width: "95%", height: "60px", position: "absolute", bottom: "0", padding: "10px 5px 5px 10px" }}>
+        <div id="chat-form" style={{ width: "100%", height: "100%", borderStyle: "solid", borderWidth: "2px", borderColor: "#C1C1C1", borderRadius: "25px", padding: "3px 2px 2px 3px" }}>
+          <Form onSubmit={sendMsgCH}>
+            <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
+              <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
+              <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
+                <FiSend size="16px" color="#FAFAFA" />
+              </Button>
+            </Form.Group>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+export default Chat;
+

client/src/Components/ClosedList.js

+import React, { useState, useEffect } from 'react'
+import { Badge, ListGroup } from 'react-bootstrap';
+import "../Pages/Home.css";
+import axios from 'axios'
+import catchErrors from '../utils/catchErrors';
+
+
+function ClosedList(props) {
+  const [error, setError] = useState('')
+  const realTime = new Date().toISOString()
+
+  async function recordEntryLog(e) {
+    const leaveInfo = { userId: props.userId, roomCode: e.target.name, leaveTime: realTime }
+    try {
+      const check = await axios.get('/room/entrylog', { params: leaveInfo })
+      if (check.data) {       //있으면 put으로
+        await axios.put('/room/entrylog', leaveInfo)
+      } else {        //없으면 post
+        await axios.post('/room/entrylog', leaveInfo)
+      }
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
+  async function enterChatRoomCH(e) {
+    if (props.roomCode) {
+      props.closeChatRoom(props.roomCode)
+    }
+    const roomCode = e.target.name
+    const roomName = e.target.value
+    props.enterChatRoom(roomCode)
+    props.setRoomCode(roomCode)
+    props.setRoomName(roomName)
+
+    await recordEntryLog(e) //방 입장시 시간 업데이트 (그래야 안 읽은 메세지가 0개로  되니까)
+    props.unreadMessage() //방 입장시 메세지 개수 다시셈 (그래야 입장시 0으로 초기화 되니까)
+
+  }
+
+  //안읽은 메세지 count하는 부분
+
+  useEffect(() => { // 누군가 보내면 다시 개수 셈
+    console.log('chat 클라이언트 변경!')
+    props.unreadMessage()
+    console.log('새 메세지가 도착했습니다.', props.leftInfo)
+  }, [props.checknew])
+
+  useEffect(() => { //일단 들오면 실행해야지
+    props.unreadMessage()
+  }, [props.closedlist])
+
+
+
+  let count = []
+  const [unread, setUnread] = useState([])
+  useEffect(() => { //unread정보가 들어오면 재정비해서 뿌려주기 위한 작업!
+    for (let i = 0; i < props.unreadnumber.length; i++) {
+      count.push(props.unreadnumber[i].unreadcount)
+    }
+    setUnread(count)
+  }, [props.unreadnumber])
+
+  return (
+    <div style={{ height: "80vh" }}>
+      <div style={{ overflow: 'auto', height: "100%" }}>
+        {props.closedlist.map((item, index) =>
+          <ListGroup key={index}>
+            <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}
+              className='rounded-0'>
+              {item.roomName}
+              {unread[index] ? <Badge className='ml-2' pill variant='danger'>{unread[index]}</Badge> : ''}
+            </ListGroup.Item>
+          </ListGroup>
+        )
+        }
+      </div >
+    </div>
+  )
+}
+
+export default ClosedList
\ No newline at end of file

client/src/Components/EnterRoom.js

+import React, { useState } from 'react'
+import axios from 'axios';
+import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
+import catchErrors from '../utils/catchErrors'
+
+
+function EnterRoom(props) {
+    const [enterCode, setEnterCode] = useState('');
+    const [error, setError] = useState('');
+    const realTime = new Date().toISOString()
+
+    const userId = sessionStorage.getItem('userId');
+    async function recordEntryLog() {
+        const leaveInfo = { userId: userId, roomCode: enterCode, leaveTime: realTime }
+        try {
+            const check = await axios.get('/room/entrylog', { params: leaveInfo })
+            if (check.data) {       //있으면 put으로
+                await axios.put('/room/entrylog', leaveInfo)
+            } else {        //없으면 post
+                await axios.post('/room/entrylog', leaveInfo)
+            }
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+
+    }
+
+    function handleChange(event) {
+        const { name, value } = event.target
+        setEnterCode(value)
+        console.log(enterCode)
+    }
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setError('')
+            let res = await axios.post('/room/enterRoom', { enterCode })
+            await axios.put('/room/member', { userId: userId, roomId: enterCode })
+            const response = await axios.get('/users/check', { params: { '_id': userId } })
+            const userNick = response.data.nickname;
+            props.setRoomName(res.data)
+            props.setRoomCode(enterCode)
+            props.setSysmsg(`${userNick}님이 들어왔습니다.`)
+            props.enterChatRoom(enterCode)
+            props.handleCloseEnter()
+            props.handleChato()
+            setEnterCode('')
+            recordEntryLog()
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <>
+            <Modal show={props.showEnter} onHide={props.handleCloseEnter}>
+                <Modal.Header closeButton>
+                    <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
+                </Modal.Header>
+                {error && <Alert variant='danger'>
+                    {error}
+                </Alert>}
+                <Modal.Body>
+                    <Form onSubmit={handleSubmit}>
+                        <Form.Group as={Row} controlId="formCodeE">
+                            <Form.Label column sm={4}>참여 코드</Form.Label>
+                            <Col>
+                                <Form.Control name='roomCode' type='text' value={enterCode} onChange={handleChange} />
+                            </Col>
+                        </Form.Group>
+                        <Form.Group as={Row}>
+                            <Col sm={{ span: 5, offset: 4 }}>
+                                <Button type="submit" style={{ backgroundColor: "#9174ad", borderColor: "#9174ad" }} >참가</Button>
+                            </Col>
+                        </Form.Group>
+                    </Form>
+                </Modal.Body>
+            </Modal>
+        </>
+    )
+}
+
+export default EnterRoom

client/src/Components/Menu.js

+import React from 'react'
+import { Nav } from 'react-bootstrap';
+import { handleLogout } from '../utils/auth';
+import { BsPeopleCircle } from "react-icons/bs";
+import { AiOutlineLogout } from "react-icons/ai";
+import "../menu.css";
+
+function Menu(props) {
+
+  const name = sessionStorage.getItem('name');
+
+  return (
+    <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
+      <a href="/" className="navbar-brand" href="/home" style={{ color: 'white', alignItems: "center" }}>{'YDK Messenger'}</a>
+      {name ?
+        <>
+          <div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center" }}>
+            <p className="mt-2 mr-4">{`${name}님 환영합니다`}</p>
+            <div className="showText">
+              <a href="/profile" style={{ color: "#FFFFFF", marginRight: "15px" }}>{'Profile'}</a>
+              <a onClick={() => handleLogout()} href="/login" style={{ color: "#FFFFFF" }}>{'logout'}</a>
+            </div>
+            <div className="showIcon">
+              <a href="/profile" style={{ marginRight: "15px" }}><BsPeopleCircle size="25" color="#FFFFFF" /></a>
+              <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="25" color="#FFFFFF" /></a>
+            </div>
+          </div>
+        </>
+        : <>
+          <div className="nav navbar-nav" style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+            <div className="showTextBFLogin">
+              <a href="/login" style={{ color:"#FFFFFF", marginRight: "15px" }}>{'Login'}</a>
+              <a href="/signup" style={{ color:"#FFFFFF" }}>{'Signup'}</a>
+            </div>
+          </div>
+        </>}
+    </div>
+  )
+}
+
+export default Menu

client/src/Components/OpenList.js

+import React from 'react'
+import { ListGroup } from 'react-bootstrap';
+import "../Pages/Home.css";
+
+function OpenList(props) {
+
+  function enterChatRoomCH(e) {
+    if (props.roomCode) {
+      props.closeChatRoom(props.roomCode)
+    }
+    const roomCode = e.target.name
+    props.openListroom(roomCode)
+    props.setRoomCode(roomCode)
+  }
+
+  return (
+    <div style={{ height: "80vh" }}>
+      <div style={{ overflow: 'auto', height: "80vh" }}>
+        {props.openlist.map((item, index) =>
+          <ListGroup key={index}>
+            <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
+              {item.roomName}
+            </ListGroup.Item>
+          </ListGroup>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OpenList

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 {
+        return (
+            <Redirect to='./login' />
+        )
+    }
+}
+
+export default PrivateRoute

client/src/Components/RoomMake.js

+import React, { useState } from 'react'
+import axios from 'axios';
+import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
+import catchErrors from '../utils/catchErrors';
+
+const INIT_ROOM = {
+    roomName: '',
+    interest: '',
+    isOpen: false
+}
+
+function RoomMake(props) {
+    const [room, setRoom] = useState(INIT_ROOM);
+    const [error, setError] = useState('');
+    const [roomCode, setRoomCode] = useState('')
+
+    const member = sessionStorage.getItem('userId');
+    const realTime = new Date().toISOString()
+
+    async function recordEntryLog(Id) {
+        const leaveInfo = { userId: member, roomCode: Id, leaveTime: realTime }
+        try {
+            const check = await axios.get('/room/entrylog', { params: leaveInfo })
+            if (check.data) {       //있으면 put으로
+                await axios.put('/room/entrylog', leaveInfo)
+            } else {        //없으면 post
+                await axios.post('/room/entrylog', leaveInfo)
+            }
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+
+    }
+    function handleChange(event) {
+        const { name, value } = event.target
+        setRoom({ ...room, [name]: value, member })
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setError('')
+            let res = await axios.post('/room/makeRoom', room)
+            const Id = res.data.roomId
+            alert(`방암호는 ${Id}입니다`)
+            props.handleCloseModal()
+            setRoom(INIT_ROOM)
+            recordEntryLog(Id)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <Modal show={props.showModal} onHide={props.handleCloseModal}>
+            <Modal.Header closeButton>
+                <Modal.Title>방 생성</Modal.Title>
+            </Modal.Header>
+            {error && <Alert variant='danger'>
+                {error}
+            </Alert>}
+            <Modal.Body>
+                <Form onSubmit={handleSubmit}>
+                    <Form.Group as={Row} controlId="chatName">
+                        <Form.Label column sm={4}>방 이름</Form.Label>
+                        <Col>
+                            <Form.Control name='roomName' type='text' value={room.roomName} onChange={handleChange} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} controlId="chatInterest">
+                        <Form.Label column sm={4}>관심 분야</Form.Label>
+                        <Col>
+                            <Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={room.interest} onChange={handleChange}>
+                                <option>Choose...</option>
+                                <option>과학</option>
+                                <option>수학</option>
+                                <option>예술</option>
+                                <option>언어</option>
+                                <option>취미</option>
+                            </Form.Control>
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} controlId="chatIsOpen">
+                        <Form.Label column sm={4}>공개방</Form.Label>
+                        <Col>
+                            <Form.Check
+                                type="checkbox"
+                                checked={room.isOpen}
+                                name='isOpen'
+                                onChange={() => setRoom({ ...room, isOpen: !room.isOpen })} />
+                        </Col>
+                    </Form.Group>
+                    {
+                        (room.isOpen)
+                            ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
+                            : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
+                    }
+                    <Form.Group as={Row}>
+                        <Col sm={{ span: 5, offset: 4 }}>
+                            <Button type="submit" style={{ backgroundColor: "#9174ad", borderColor: "#9174ad" }} >방 생성</Button>
+                        </Col>
+                    </Form.Group>
+                </Form>
+            </Modal.Body>
+        </Modal>
+
+    )
+}
+
+export default RoomMake