채지성

mainpage-first

...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
11 background-color: gray; 11 background-color: gray;
12 position: absolute; 12 position: absolute;
13 z-index: 999; 13 z-index: 999;
14 - right:3%; 14 + top:20%;
15 - top:0%; 15 + right:4%;
16 +
16 transition: 0ms; 17 transition: 0ms;
17 18
18 width:20%; 19 width:20%;
...@@ -69,8 +70,3 @@ ...@@ -69,8 +70,3 @@
69 overflow: hidden; 70 overflow: hidden;
70 } 71 }
71 72
72 -.scrollmake{
73 - height:1200px;
74 - width:100px;
75 - background-color: red;
76 -}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,7 +18,6 @@ function SideChat() { ...@@ -18,7 +18,6 @@ function SideChat() {
18 }, []); 18 }, []);
19 19
20 return ( 20 return (
21 - <div>
22 <div className='SideChat'> 21 <div className='SideChat'>
23 <div className='innerChat1'> 22 <div className='innerChat1'>
24 23
...@@ -35,12 +34,12 @@ function SideChat() { ...@@ -35,12 +34,12 @@ function SideChat() {
35 </div> 34 </div>
36 </div> 35 </div>
37 36
38 - </div>
39 ); 37 );
40 } 38 }
41 39
42 40
43 -// <div className='scrollmake'> 41 +
42 +// <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
44 // 바보 43 // 바보
45 // </div> 44 // </div>
46 45
......
1 +.mainpage {
2 + display:grid;
3 + grid-template-rows: 1.3fr 1fr;
4 + width: 80%;
5 + height: 90%;
6 + padding:5%;
7 +
8 +}
9 +
10 +.mainpage :nth-child(1) {
11 + display: grid;
12 + grid-template-rows: 1fr 10fr;
13 +}
14 +
15 +.mainpage :nth-child(2) {
16 + display:grid;
17 + grid-template-columns: 1fr 1fr;
18 +}
19 +
20 +.whatAboutMeal {
21 + display: grid;
22 + grid-template-rows: 1fr 8fr;
23 + grid-template-columns: 100%;
24 +}
25 +
26 +
27 +
28 +.mainpageInner {
29 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import './App.css';
2 +import axios from "axios";
3 +import { useEffect } from 'react';
4 +import './mainpage.css'
5 +
6 +let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
7 +
8 +
9 +function MainPage() {
10 + const callApi = async()=>{
11 + axios.get("/api").then((res)=>{console.log(res.data.test)});
12 +
13 + };
14 +
15 + useEffect(()=>{
16 + callApi();
17 + }, []);
18 +
19 + return (
20 + <div className='mainpage' >
21 + <div className='mainpageInner' id='MealTable' >
22 + {today} 2기숙사 학식
23 + <div>
24 +
25 + </div>
26 + </div>
27 + <div className='mainpageInner' >
28 + <div className='whatAboutMeal'>
29 + 오늘 메뉴 어때?
30 + <div>
31 +
32 + </div>
33 + </div>
34 + <div className='whatAboutMeal'>
35 + 어제 메뉴 어땠어?
36 + <div>
37 +
38 + </div>
39 + </div>
40 + </div>
41 + </div>
42 +
43 + );
44 +}
45 +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
46 +
47 +export default MainPage;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -11,3 +11,11 @@ code { ...@@ -11,3 +11,11 @@ code {
11 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 monospace; 12 monospace;
13 } 13 }
14 +
15 +*{
16 + margin:0px;
17 + padding:0px;
18 + border-style: solid;
19 + border-color: black;
20 + border-width: 5px;
21 +}
......
...@@ -5,17 +5,28 @@ import TopBanner from './Component/TopBanner'; ...@@ -5,17 +5,28 @@ import TopBanner from './Component/TopBanner';
5 import SideChat from './Component/SideChat'; 5 import SideChat from './Component/SideChat';
6 import reportWebVitals from './reportWebVitals'; 6 import reportWebVitals from './reportWebVitals';
7 import 'bootstrap/dist/css/bootstrap.min.css'; 7 import 'bootstrap/dist/css/bootstrap.min.css';
8 +import MainPage from './Component/mainpage';
8 9
9 const root = ReactDOM.createRoot(document.getElementById('root')); 10 const root = ReactDOM.createRoot(document.getElementById('root'));
10 root.render( 11 root.render(
11 <React.StrictMode> 12 <React.StrictMode>
12 - <div className='Screen' style={{width: '100vw', height:'100vh', margin:'0%', padding:'0%', }}> 13 + <div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}>
13 <TopBanner /> 14 <TopBanner />
15 +
14 <SideChat /> 16 <SideChat />
17 + <div className='bodyContent' style={{width:'100%', height:'100%'}}>
18 + <MainPage />
19 + </div>
20 +
21 +
15 </div> 22 </div>
16 </React.StrictMode> 23 </React.StrictMode>
17 ); 24 );
18 25
26 +{/* <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
27 +바보
28 +</div> */}
29 +
19 // If you want to start measuring performance in your app, pass a function 30 // If you want to start measuring performance in your app, pass a function
20 // to log results (for example: reportWebVitals(console.log)) 31 // to log results (for example: reportWebVitals(console.log))
21 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 32 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
......