mainpage-first

@@ -11,8 +11,9 @@
     background-color: gray;
     position: absolute;
     z-index: 999;
-    right:3%;
-    top:0%;
+    top:20%;
+    right:4%;
+    
     transition: 0ms;
 
     width:20%;
@@ -69,8 +70,3 @@
     overflow: hidden;
 }
 
-.scrollmake{
-    height:1200px;
-    width:100px;
-    background-color: red;
-}
\ No newline at end of file

@@ -18,7 +18,6 @@ function SideChat() {
   }, []);
   
   return (
-    <div>
       <div className='SideChat'>
         <div className='innerChat1'>
           
@@ -34,13 +33,13 @@ function SideChat() {
           </div>
         </div>
       </div>
-
-    </div>
+  
   );
 }
 
 
-//  <div className='scrollmake'>
+
+//  <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
 //  바보
 //  </div>
 

+.mainpage {
+    display:grid;
+    grid-template-rows: 1.3fr 1fr;
+    width: 80%;
+    height: 90%;
+    padding:5%;
+
+}   
+
+.mainpage :nth-child(1) {
+    display: grid;
+    grid-template-rows: 1fr 10fr;
+}
+
+.mainpage :nth-child(2) {
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.whatAboutMeal {
+    display: grid;
+    grid-template-rows: 1fr 8fr;
+    grid-template-columns: 100%;
+}
+
+
+
+.mainpageInner {
+}
\ No newline at end of file

+import './App.css';
+import axios from "axios";
+import { useEffect } from 'react';
+import './mainpage.css'
+
+let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
+
+
+function MainPage() {
+  const callApi = async()=>{
+    axios.get("/api").then((res)=>{console.log(res.data.test)});
+    
+  };
+
+  useEffect(()=>{
+    callApi();
+  }, []);
+  
+  return (
+    <div className='mainpage' >
+      <div className='mainpageInner' id='MealTable' >
+        {today} 제2기숙사 학식
+        <div>
+          
+        </div>
+      </div>
+      <div className='mainpageInner' >
+        <div className='whatAboutMeal'>
+          오늘 메뉴 어때?
+          <div>
+
+          </div>
+        </div>
+        <div className='whatAboutMeal'>
+          어제 메뉴 어땠어?
+          <div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
+
+  );
+}
+//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기 
+
+export default MainPage;
\ No newline at end of file

@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+*{
+  margin:0px;
+  padding:0px;
+  border-style: solid;
+  border-color: black;
+  border-width: 5px;
+}

@@ -5,17 +5,28 @@ 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';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <div className='Screen' style={{width: '100vw', height:'100vh', margin:'0%', padding:'0%', }}>
+    <div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}>
       <TopBanner />
+      
       <SideChat />
+      <div className='bodyContent' style={{width:'100%', height:'100%'}}>
+        <MainPage />
+      </div>
+      
+     
     </div>
   </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