update front with routing

@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "bootstrap": "^5.1.3",
     "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
     "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

-import React, { Component } from 'react';
+import React from 'react';
 
 function InnerChat(props) {
     return (

+import './App.css';
+import axios from "axios";
+
+function MenuPage() {
+  return (
+    <div>
+      메뉴 페이지
+    </div>
+  );
+}
+//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기 
+
+export default MenuPage;
\ No newline at end of file

@@ -10,6 +10,7 @@ function SideChat() {
 
   const getWaiting = () => {
     axios.get("/api/waiting").then((res) => {
+      var newList = [];
       setList(res.data);
       setTimeout(() =>{
         const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight;
@@ -32,11 +33,9 @@ function SideChat() {
   return (
     <div className='SideChat'>
       <div ref={chatContainer} className='innerChat1'>
-        {list.map(waiting => {
+        {list.map((item, index) => {
           return (
-            <div>
-              <InnerChat value={waiting.value} time={waiting.time}/>
-            </div>
+              <InnerChat key={index} value={item.value} time={item.time}/>
           )
         })}
       </div>

 import './App.css';
-import axios from "axios";
-import { useEffect } from 'react';
-import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
+import { Navbar, Container, Nav} from 'react-bootstrap'
 import khuimg from '../img/khumeal.png'
 
 function TopBanner() {
-  const callApi = async()=>{
-    axios.get("/api").then((res)=>{console.log(res.data.test)});
-  };
-
-  useEffect(()=>{
-    callApi();
-  }, []);
   
   return (
     
     <Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915', padding:'0%', margin:'0 auto'}} >
             <Container style={{margin:'0 auto'}}>
             <img src = {khuimg} height="40px" width="40px" />
-            <Navbar.Brand href="#home"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand>
+            <Navbar.Brand href="/"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
-                <Nav.Link href="#home"><p style={{color:'white'}}>메뉴</p></Nav.Link>
-                <Nav.Link href="#link"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
+                <Nav.Link href="/menu"><p style={{color:'white'}}>메뉴</p></Nav.Link>
+                <Nav.Link href="/"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
                 <Nav.Link href="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link>
                 </Nav>
             </Navbar.Collapse>

@@ -7,13 +7,9 @@ let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
 
 
 function MainPage() {
-  const callApi = async()=>{
-    axios.get("/api").then((res)=>{console.log(res.data.test)});
-    
-  };
 
   useEffect(()=>{
-    callApi();
+    
   }, []);
   
   return (

@@ -6,16 +6,27 @@ import SideChat from './Component/SideChat';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import MainPage from './Component/mainpage';
+import MenuPage from './Component/MenuPage';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}>
+    <div className='Screen' style={{ borderColor: 'blue', width: '100vw', height: '100vh' }}>
       <TopBanner />
 
       <SideChat />
-      <div className='bodyContent' style={{width:'100%', height:'100%'}}>
-        <MainPage />
+      <div className='bodyContent' style={{ width: '100%', height: '100%' }}>
+        <Router>
+          <Routes>
+            <Route path="/" element={<MainPage/>}/>
+            <Route path="/menu" element={<MenuPage/>}/>
+          </Routes>
+        </Router>
       </div>
 
 
@@ -23,11 +34,4 @@ root.render(
   </React.StrictMode>
 );
 
-{/* <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
-바보
-</div> */}
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

 {
   "scripts": {
     "server": "cd server && nodemon server",
-    "client": "cd client && export PORT=8080 && set PORT=8080 && npm start --port",
+    "client": "cd client && export PORT=8080 && set PORT=8080 && npm start",
     "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
   },
   "dependencies": {