mainpage

-.mainpage {
-    display:grid;
-    grid-template-rows: 1.3fr 1fr;
-    width: 80%;
+.mainpage{
     height: 90%;
-    padding:5%;
+    width: 80%;
+
+    display:grid;
+    grid-template-rows: 1.4fr 1fr;
 
-}   
 
-.mainpage :nth-child(1) {
-    display: grid;
-    grid-template-rows: 1fr 10fr;
 }
 
-.mainpage :nth-child(2) {
+.mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){
     display:grid;
     grid-template-columns: 1fr 1fr;
-}
+    grid-template-rows: 8% 16% 74%;
 
-.whatAboutMeal {
-    display: grid;
-    grid-template-rows: 1fr 8fr;
-    grid-template-columns: 100%;
 }
 
+.mainpage :nth-child(1) :nth-child(1){
+    padding-left: 10%;
+}
+.mainpage :nth-child(1) :nth-child(3),
+.mainpage :nth-child(1) :nth-child(4),
+.mainpage :nth-child(1) :nth-child(5),
+.mainpage :nth-child(1) :nth-child(6){
+    text-align: center;
+    padding-top: 2%;
+}
 
-
-.mainpageInner {
-}
\ No newline at end of file
+.lunchTable, .dinnerTable{
+    display:flex;
+    flex-direction: column;
+    
+}

 import './App.css';
 import axios from "axios";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import './mainpage.css'
 
-let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
+
 
 
 function MainPage() {
-  const callApi = async()=>{
-    axios.get("/api").then((res)=>{console.log(res.data.test)});
-    
+  const [lunch, setlunch] = useState("");
+  const [dinner, setdinner] = useState("");
+  let currentYear = new Date().getFullYear();
+  let currentMonth = new Date().getMonth();
+  let currentDate = new Date().getDate();
+  let today = currentYear+'/'+currentMonth+'/'+currentDate;
+
+  const makeTable = (arr_, dom_) => {
+
+    arr_.forEach((elem)=>{
+      let span_ = document.createElement('div');
+      span_.innerHTML = elem;
+      dom_.appendChild(span_);
+      console.log("하이1");
+    });
+
   };
 
+  const todayMealTable = async()=>{
+    axios.get("/api/todayMenu").then(
+      (res) => {
+        const index1 = res.data[0].indexOf(':');
+        const index2 = res.data[1].indexOf(':');
+        let lunchArr = res.data[0].substring(index1+1);
+        let dinnerArr = res.data[1].substring(index2+1);
+
+        if(index1 !== -1){
+         lunchArr = lunchArr.split(',');
+        }
+        if(index1 !== -1){
+         dinnerArr = dinnerArr.split(',');
+        }
+        console.log(lunchArr, dinnerArr);
+
+        const lunchDom = document.getElementsByClassName('lunchTable')[0];
+        const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
+        
+        makeTable(lunchArr, lunchDom);
+        makeTable(dinnerArr, dinnerDom);
+        setlunch(lunchArr);
+        setdinner(dinnerArr);
+         
+      }
+    )
+  }
+
+
   useEffect(()=>{
-    callApi();
+    todayMealTable();
+
+
   }, []);
   
   return (
-    <div className='mainpage' >
-      <div className='mainpageInner' id='MealTable' >
-        {today} 제2기숙사 학식
+    <div className='mainpage'>
+      
+      <div>
         <div>
+          {today} 제2기숙사 학식
+        </div>
+        <div></div>
+        <div>점심</div>
+        <div>저녁</div>
+        <div className='lunchTable'>
           
         </div>
+        <div className='dinnerTable'></div>
       </div>
-      <div className='mainpageInner' >
-        <div className='whatAboutMeal'>
-          오늘 메뉴 어때?
-          <div>
+      <div>
 
-          </div>
-        </div>
-        <div className='whatAboutMeal'>
-          어제 메뉴 어땠어?
-          <div>
-            
-          </div>
-        </div>
       </div>
     </div>
-
   );
 }
 //첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기