채지성

mainpage_demo2

...@@ -5,18 +5,28 @@ ...@@ -5,18 +5,28 @@
5 display:grid; 5 display:grid;
6 grid-template-rows: 1.4fr 1fr; 6 grid-template-rows: 1.4fr 1fr;
7 7
8 + margin: 1%;
9 +
10 + background-color: #FFE4b1;
8 11
9 } 12 }
10 13
11 .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){ 14 .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){
12 display:grid; 15 display:grid;
13 grid-template-columns: 1fr 1fr; 16 grid-template-columns: 1fr 1fr;
14 - grid-template-rows: 8% 16% 74%; 17 + grid-template-rows: 8% 12% 79%;
18 +}
15 19
20 +.mainpage :nth-child(1):not(.haksikTitle){
21 + border: 2px solid black;
16 } 22 }
17 23
18 -.mainpage :nth-child(1) :nth-child(1){ 24 +.mainpage :nth-child(1) :nth-child(1),
25 +.mainpage :nth-child(1) :nth-child(2)
26 +{
19 padding-left: 10%; 27 padding-left: 10%;
28 +
29 + border-bottom: 2px solid black;
20 } 30 }
21 .mainpage :nth-child(1) :nth-child(3), 31 .mainpage :nth-child(1) :nth-child(3),
22 .mainpage :nth-child(1) :nth-child(4), 32 .mainpage :nth-child(1) :nth-child(4),
...@@ -24,8 +34,17 @@ ...@@ -24,8 +34,17 @@
24 .mainpage :nth-child(1) :nth-child(6){ 34 .mainpage :nth-child(1) :nth-child(6){
25 text-align: center; 35 text-align: center;
26 padding-top: 2%; 36 padding-top: 2%;
37 +
38 +
39 +}
40 +.mainpage :nth-child(1) :nth-child(3),
41 +.mainpage :nth-child(1) :nth-child(4){
42 + border-bottom: 2px solid black;
43 +
27 } 44 }
28 45
46 +
47 +
29 .lunchTable, .dinnerTable{ 48 .lunchTable, .dinnerTable{
30 display:flex; 49 display:flex;
31 flex-direction: column; 50 flex-direction: column;
...@@ -34,8 +53,18 @@ ...@@ -34,8 +53,18 @@
34 53
35 .mainpage :nth-child(2){ 54 .mainpage :nth-child(2){
36 display: grid; 55 display: grid;
37 - grid-template-rows: 8% 90%; 56 + grid-template-rows: 10% 90%;
38 - padding-left: 2%; 57 +
58 +
39 } 59 }
40 60
61 +.mainpage :nth-child(2) :nth-child(1){
62 + border-bottom: 2px solid black;
63 + border-top: 2px hidden black;
64 +}
65 +
66 +.mainpage :nth-child(2) :nth-child(2){
67 + border: 2px solid black;
68 + border-top: 2px hidden black;
69 +}
41 70
......
...@@ -14,6 +14,11 @@ function MainPage() { ...@@ -14,6 +14,11 @@ function MainPage() {
14 let today = currentYear+'/'+currentMonth+'/'+currentDate; 14 let today = currentYear+'/'+currentMonth+'/'+currentDate;
15 15
16 16
17 +
18 +
19 + const todayMealTable = async()=>{
20 + axios.get("/api/todayMenu").then(
21 + (res) => {
17 const makeTable = (arr_, dom_) => { 22 const makeTable = (arr_, dom_) => {
18 23
19 arr_.forEach((elem)=>{ 24 arr_.forEach((elem)=>{
...@@ -24,9 +29,6 @@ function MainPage() { ...@@ -24,9 +29,6 @@ function MainPage() {
24 29
25 }; 30 };
26 31
27 - const todayMealTable = async()=>{
28 - axios.get("/api/todayMenu").then(
29 - (res) => {
30 const index1 = res.data[0].indexOf(':'); 32 const index1 = res.data[0].indexOf(':');
31 const index2 = res.data[1].indexOf(':'); 33 const index2 = res.data[1].indexOf(':');
32 let lunchArr = res.data[0].substring(index1+1); 34 let lunchArr = res.data[0].substring(index1+1);
...@@ -38,15 +40,13 @@ function MainPage() { ...@@ -38,15 +40,13 @@ function MainPage() {
38 if(index1 !== -1){ 40 if(index1 !== -1){
39 dinnerArr = dinnerArr.split(','); 41 dinnerArr = dinnerArr.split(',');
40 } 42 }
41 - console.log(lunchArr, dinnerArr);
42 43
43 const lunchDom = document.getElementsByClassName('lunchTable')[0]; 44 const lunchDom = document.getElementsByClassName('lunchTable')[0];
44 const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; 45 const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
45 46
46 makeTable(lunchArr, lunchDom); 47 makeTable(lunchArr, lunchDom);
47 makeTable(dinnerArr, dinnerDom); 48 makeTable(dinnerArr, dinnerDom);
48 - setlunch(lunchArr); 49 + console.log()
49 - setdinner(dinnerArr);
50 50
51 51
52 52
...@@ -63,7 +63,7 @@ function MainPage() { ...@@ -63,7 +63,7 @@ function MainPage() {
63 <div className='mainpage'> 63 <div className='mainpage'>
64 64
65 <div> 65 <div>
66 - <div> 66 + <div className='haksikTitle'>
67 {today} 2기숙사 학식 67 {today} 2기숙사 학식
68 </div> 68 </div>
69 <div></div> 69 <div></div>
...@@ -74,7 +74,7 @@ function MainPage() { ...@@ -74,7 +74,7 @@ function MainPage() {
74 </div> 74 </div>
75 <div className='dinnerTable'></div> 75 <div className='dinnerTable'></div>
76 </div> 76 </div>
77 - <div> 77 + <div className='mainpageUnder'>
78 <div>메뉴에 대한 이야기</div> 78 <div>메뉴에 대한 이야기</div>
79 <div></div> 79 <div></div>
80 </div> 80 </div>
......
...@@ -15,7 +15,9 @@ code { ...@@ -15,7 +15,9 @@ code {
15 *{ 15 *{
16 margin:0px; 16 margin:0px;
17 padding:0px; 17 padding:0px;
18 + /*
18 border-style: solid; 19 border-style: solid;
19 border-color: black; 20 border-color: black;
20 border-width: 5px; 21 border-width: 5px;
22 + */
21 } 23 }
......