menuTablePage

+.menuPage{
+    height: 90%;
+    width: 80%;
+
+    margin: 1%;
+
+    background-color: #FDF5E6;
+
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+}
+
+.menuPage > :nth-child(1) {
+    height: 5%;
+    width: 90%;
+
+    background-color: #FFE4b1;
+
+    margin-bottom: 6px;
+
+    padding-left: 1%;
+    padding-top: 0.5%;
+}
+
+.menuPage > .menuTable {
+    height: 80%;
+    width: 90%;
+
+    background-color: #FFE4b1;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
\ No newline at end of file

 import './App.css';
 import axios from "axios";
 import { useEffect } from 'react';
+import './MenuPage.css'
 
-function MenuPage() {
+const makeTable = (arr_, dom_) => {
+  arr_.forEach((elem)=>{
+    let span_ = document.createElement('div');
+    span_.innerHTML = elem;
+    span_.style.margin = '1%';
+    dom_.appendChild(span_);
+  });
+};
 
+function MenuPage() {
   const getMenuList = () => {
     axios.get("/api/menuList").then((res) => {
       console.log(res.data);
+      
+      let dateArr = res.data.fo_date;
+      let lunchArr = res.data.fo_menu_lun;
+      let dinnerArr = res.data.fo_menu_eve;
+
+      console.log(dateArr, lunchArr, dinnerArr);
+      
+      const menuTable = document.getElementsByClassName('menuTable')[0];
+      for(let i=0; i< dateArr.length; i++){
+        console.log('하이', dateArr[i], lunchArr[i], dinnerArr[i]);
+
+        const menuTableElem = document.createElement('div');
+        menuTableElem.style.width = '19.7%';
+
+        //날짜
+        const menuTableElemDate = document.createElement('div');
+        menuTableElemDate.innerHTML = dateArr[i];
+        menuTableElemDate.style.height = '8%';
+        menuTableElemDate.style.paddingLeft = '0.5%';
+        menuTableElemDate.style.paddingTop = '4%';
+        menuTableElemDate.style.borderBottom = '1px solid black';
+
+        const makeMealTable = (dom_, mealArr)=>{
+          let arr_ = mealArr[i].substring(mealArr[i].indexOf(':')+1);
+          arr_ = arr_.split(',');
+          dom_.style.height = '42%';
+          dom_.style.paddingTop = '2%';
+          makeTable(arr_, dom_);
+        }
+        //점심
+        const menuTableElemLun = document.createElement('div');
+        makeMealTable(menuTableElemLun, lunchArr);
+        //저녁
+        const menuTableElemDin = document.createElement('div');
+        makeMealTable(menuTableElemDin, dinnerArr);
+
+
+        menuTable.appendChild(menuTableElem);
+        menuTableElem.appendChild(menuTableElemDate);
+        menuTableElem.appendChild(menuTableElemLun);
+        menuTableElem.appendChild(menuTableElemDin);
+      }
+
     });
   }
 
   useEffect(()=>{
     getMenuList();
+    
   }, []);
 
   return (
-    <div>
-      메뉴 페이지
+    <div className='menuPage'>
+      <span>제2기숙사 학식</span>
+      <div className='menuTable'>
+
+      </div>
     </div>
   );
 }

@@ -14,8 +14,8 @@ function TopBanner() {
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
                 <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.Link href="/mealtalk"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
+                <Nav.Link href="/writing"><p style={{color:'white'}}>글 작성</p></Nav.Link>
                 </Nav>
             </Navbar.Collapse>
             </Container>

+import './App.css';
+import axios from "axios";
+import { useEffect, useState } from 'react';
+import './Writing.css'
+
+
+
+function Writing() {
+
+
+  useEffect(()=>{
+  }, []);
+  
+  return (
+    <div className='writing'>
+    </div>
+  );
+}
+//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기 
+
+export default Writing;
\ No newline at end of file

@@ -7,7 +7,7 @@
 
     margin: 1%;
 
-    background-color: 	#FFE4b1;
+    background-color: #FDF5E6;
 
 }
 
@@ -40,7 +40,7 @@
 .mainpage :nth-child(1) :nth-child(3),
 .mainpage :nth-child(1) :nth-child(4){
     border-bottom: 2px solid black;
-    
+    margin: 0px 15px;
 }
 
 
@@ -68,3 +68,8 @@
     border-top: 2px hidden black;
 }
 
+.mainpage :nth-child(1) :nth-child(1),
+.mainpage :nth-child(1) :nth-child(2),
+.mainpage :nth-child(2) :nth-child(1){
+    background-color: #FFE4b1;
+}
\ No newline at end of file

 import './App.css';
 import axios from "axios";
 import { useEffect, useState } from 'react';
-import './mainpage.css'
+import './MainPage.css'
 
 
 
@@ -46,10 +46,6 @@ function MainPage() {
         
         makeTable(lunchArr, lunchDom);
         makeTable(dinnerArr, dinnerDom);         
-        console.log()
-
-
-         
       }
     )
   }
@@ -76,7 +72,8 @@ function MainPage() {
       </div>
       <div className='mainpageUnder'>
         <div>메뉴에 대한 이야기</div>
-        <div></div>
+        <div>
+        </div>
       </div>
     </div>
   );

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import TopBanner from './Component/TopBanner';
-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 TopBanner from './Component/TopBanner'; // 상단 메뉴
+import SideChat from './Component/SideChat'; // 측면 대기시간 채팅
+import MainPage from './Component/MainPage'; // 초기화면
+import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면
+
+import Writing from './Component/Writing'; // 글 작성 화면
+
 import {
   BrowserRouter as Router,
   Routes,
@@ -24,6 +29,8 @@ root.render(
         <Routes>
           <Route path="/" element={<MainPage />} />
           <Route path="/menu" element={<MenuPage />} />
+          <Route path="/mealtalk" element={<MainPage />} />
+          <Route path="/writing" element={<Writing />} />
         </Routes>
       </Router>
     </div>