Showing
6 changed files
with
101 additions
and
11 deletions
... | @@ -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 | ... | ... |
client/src/Component/mainpage.css
0 → 100644
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 | ... | ... |
-
Please register or login to post a comment