Showing
8 changed files
with
140 additions
and
17 deletions
client/src/Component/MenuPage.css
0 → 100644
1 | +.menuPage{ | ||
2 | + height: 90%; | ||
3 | + width: 80%; | ||
4 | + | ||
5 | + margin: 1%; | ||
6 | + | ||
7 | + background-color: #FDF5E6; | ||
8 | + | ||
9 | + display:flex; | ||
10 | + justify-content: center; | ||
11 | + align-items: center; | ||
12 | + | ||
13 | + flex-direction: column; | ||
14 | +} | ||
15 | + | ||
16 | +.menuPage > :nth-child(1) { | ||
17 | + height: 5%; | ||
18 | + width: 90%; | ||
19 | + | ||
20 | + background-color: #FFE4b1; | ||
21 | + | ||
22 | + margin-bottom: 6px; | ||
23 | + | ||
24 | + padding-left: 1%; | ||
25 | + padding-top: 0.5%; | ||
26 | +} | ||
27 | + | ||
28 | +.menuPage > .menuTable { | ||
29 | + height: 80%; | ||
30 | + width: 90%; | ||
31 | + | ||
32 | + background-color: #FFE4b1; | ||
33 | + | ||
34 | + display: flex; | ||
35 | + flex-direction: row; | ||
36 | + justify-content: center; | ||
37 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | import './App.css'; | 1 | import './App.css'; |
2 | import axios from "axios"; | 2 | import axios from "axios"; |
3 | import { useEffect } from 'react'; | 3 | import { useEffect } from 'react'; |
4 | +import './MenuPage.css' | ||
4 | 5 | ||
5 | -function MenuPage() { | 6 | +const makeTable = (arr_, dom_) => { |
7 | + arr_.forEach((elem)=>{ | ||
8 | + let span_ = document.createElement('div'); | ||
9 | + span_.innerHTML = elem; | ||
10 | + span_.style.margin = '1%'; | ||
11 | + dom_.appendChild(span_); | ||
12 | + }); | ||
13 | +}; | ||
6 | 14 | ||
15 | +function MenuPage() { | ||
7 | const getMenuList = () => { | 16 | const getMenuList = () => { |
8 | axios.get("/api/menuList").then((res) => { | 17 | axios.get("/api/menuList").then((res) => { |
9 | console.log(res.data); | 18 | console.log(res.data); |
19 | + | ||
20 | + let dateArr = res.data.fo_date; | ||
21 | + let lunchArr = res.data.fo_menu_lun; | ||
22 | + let dinnerArr = res.data.fo_menu_eve; | ||
23 | + | ||
24 | + console.log(dateArr, lunchArr, dinnerArr); | ||
25 | + | ||
26 | + const menuTable = document.getElementsByClassName('menuTable')[0]; | ||
27 | + for(let i=0; i< dateArr.length; i++){ | ||
28 | + console.log('하이', dateArr[i], lunchArr[i], dinnerArr[i]); | ||
29 | + | ||
30 | + const menuTableElem = document.createElement('div'); | ||
31 | + menuTableElem.style.width = '19.7%'; | ||
32 | + | ||
33 | + //날짜 | ||
34 | + const menuTableElemDate = document.createElement('div'); | ||
35 | + menuTableElemDate.innerHTML = dateArr[i]; | ||
36 | + menuTableElemDate.style.height = '8%'; | ||
37 | + menuTableElemDate.style.paddingLeft = '0.5%'; | ||
38 | + menuTableElemDate.style.paddingTop = '4%'; | ||
39 | + menuTableElemDate.style.borderBottom = '1px solid black'; | ||
40 | + | ||
41 | + const makeMealTable = (dom_, mealArr)=>{ | ||
42 | + let arr_ = mealArr[i].substring(mealArr[i].indexOf(':')+1); | ||
43 | + arr_ = arr_.split(','); | ||
44 | + dom_.style.height = '42%'; | ||
45 | + dom_.style.paddingTop = '2%'; | ||
46 | + makeTable(arr_, dom_); | ||
47 | + } | ||
48 | + //점심 | ||
49 | + const menuTableElemLun = document.createElement('div'); | ||
50 | + makeMealTable(menuTableElemLun, lunchArr); | ||
51 | + //저녁 | ||
52 | + const menuTableElemDin = document.createElement('div'); | ||
53 | + makeMealTable(menuTableElemDin, dinnerArr); | ||
54 | + | ||
55 | + | ||
56 | + menuTable.appendChild(menuTableElem); | ||
57 | + menuTableElem.appendChild(menuTableElemDate); | ||
58 | + menuTableElem.appendChild(menuTableElemLun); | ||
59 | + menuTableElem.appendChild(menuTableElemDin); | ||
60 | + } | ||
61 | + | ||
10 | }); | 62 | }); |
11 | } | 63 | } |
12 | 64 | ||
13 | useEffect(()=>{ | 65 | useEffect(()=>{ |
14 | getMenuList(); | 66 | getMenuList(); |
67 | + | ||
15 | }, []); | 68 | }, []); |
16 | 69 | ||
17 | return ( | 70 | return ( |
18 | - <div> | 71 | + <div className='menuPage'> |
19 | - 메뉴 페이지 | 72 | + <span>제2기숙사 학식</span> |
73 | + <div className='menuTable'> | ||
74 | + | ||
75 | + </div> | ||
20 | </div> | 76 | </div> |
21 | ); | 77 | ); |
22 | } | 78 | } | ... | ... |
... | @@ -14,8 +14,8 @@ function TopBanner() { | ... | @@ -14,8 +14,8 @@ function TopBanner() { |
14 | <Navbar.Collapse id="basic-navbar-nav"> | 14 | <Navbar.Collapse id="basic-navbar-nav"> |
15 | <Nav className="me-auto"> | 15 | <Nav className="me-auto"> |
16 | <Nav.Link href="/menu"><p style={{color:'white'}}>메뉴</p></Nav.Link> | 16 | <Nav.Link href="/menu"><p style={{color:'white'}}>메뉴</p></Nav.Link> |
17 | - <Nav.Link href="/"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link> | 17 | + <Nav.Link href="/mealtalk"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link> |
18 | - <Nav.Link href="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link> | 18 | + <Nav.Link href="/writing"><p style={{color:'white'}}>글 작성</p></Nav.Link> |
19 | </Nav> | 19 | </Nav> |
20 | </Navbar.Collapse> | 20 | </Navbar.Collapse> |
21 | </Container> | 21 | </Container> | ... | ... |
client/src/Component/Writing.css
0 → 100644
File mode changed
client/src/Component/Writing.js
0 → 100644
1 | +import './App.css'; | ||
2 | +import axios from "axios"; | ||
3 | +import { useEffect, useState } from 'react'; | ||
4 | +import './Writing.css' | ||
5 | + | ||
6 | + | ||
7 | + | ||
8 | +function Writing() { | ||
9 | + | ||
10 | + | ||
11 | + useEffect(()=>{ | ||
12 | + }, []); | ||
13 | + | ||
14 | + return ( | ||
15 | + <div className='writing'> | ||
16 | + </div> | ||
17 | + ); | ||
18 | +} | ||
19 | +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기 | ||
20 | + | ||
21 | +export default Writing; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -7,7 +7,7 @@ | ... | @@ -7,7 +7,7 @@ |
7 | 7 | ||
8 | margin: 1%; | 8 | margin: 1%; |
9 | 9 | ||
10 | - background-color: #FFE4b1; | 10 | + background-color: #FDF5E6; |
11 | 11 | ||
12 | } | 12 | } |
13 | 13 | ||
... | @@ -40,7 +40,7 @@ | ... | @@ -40,7 +40,7 @@ |
40 | .mainpage :nth-child(1) :nth-child(3), | 40 | .mainpage :nth-child(1) :nth-child(3), |
41 | .mainpage :nth-child(1) :nth-child(4){ | 41 | .mainpage :nth-child(1) :nth-child(4){ |
42 | border-bottom: 2px solid black; | 42 | border-bottom: 2px solid black; |
43 | - | 43 | + margin: 0px 15px; |
44 | } | 44 | } |
45 | 45 | ||
46 | 46 | ||
... | @@ -68,3 +68,8 @@ | ... | @@ -68,3 +68,8 @@ |
68 | border-top: 2px hidden black; | 68 | border-top: 2px hidden black; |
69 | } | 69 | } |
70 | 70 | ||
71 | +.mainpage :nth-child(1) :nth-child(1), | ||
72 | +.mainpage :nth-child(1) :nth-child(2), | ||
73 | +.mainpage :nth-child(2) :nth-child(1){ | ||
74 | + background-color: #FFE4b1; | ||
75 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import './App.css'; | 1 | import './App.css'; |
2 | import axios from "axios"; | 2 | import axios from "axios"; |
3 | import { useEffect, useState } from 'react'; | 3 | import { useEffect, useState } from 'react'; |
4 | -import './mainpage.css' | 4 | +import './MainPage.css' |
5 | 5 | ||
6 | 6 | ||
7 | 7 | ||
... | @@ -46,10 +46,6 @@ function MainPage() { | ... | @@ -46,10 +46,6 @@ function MainPage() { |
46 | 46 | ||
47 | makeTable(lunchArr, lunchDom); | 47 | makeTable(lunchArr, lunchDom); |
48 | makeTable(dinnerArr, dinnerDom); | 48 | makeTable(dinnerArr, dinnerDom); |
49 | - console.log() | ||
50 | - | ||
51 | - | ||
52 | - | ||
53 | } | 49 | } |
54 | ) | 50 | ) |
55 | } | 51 | } |
... | @@ -76,7 +72,8 @@ function MainPage() { | ... | @@ -76,7 +72,8 @@ function MainPage() { |
76 | </div> | 72 | </div> |
77 | <div className='mainpageUnder'> | 73 | <div className='mainpageUnder'> |
78 | <div>메뉴에 대한 이야기</div> | 74 | <div>메뉴에 대한 이야기</div> |
79 | - <div></div> | 75 | + <div> |
76 | + </div> | ||
80 | </div> | 77 | </div> |
81 | </div> | 78 | </div> |
82 | ); | 79 | ); | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import ReactDOM from 'react-dom/client'; | 2 | import ReactDOM from 'react-dom/client'; |
3 | import './index.css'; | 3 | import './index.css'; |
4 | -import TopBanner from './Component/TopBanner'; | ||
5 | -import SideChat from './Component/SideChat'; | ||
6 | import reportWebVitals from './reportWebVitals'; | 4 | import reportWebVitals from './reportWebVitals'; |
7 | import 'bootstrap/dist/css/bootstrap.min.css'; | 5 | import 'bootstrap/dist/css/bootstrap.min.css'; |
8 | -import MainPage from './Component/mainpage'; | 6 | + |
9 | -import MenuPage from './Component/MenuPage'; | 7 | +//컴포넌트 |
8 | +import TopBanner from './Component/TopBanner'; // 상단 메뉴 | ||
9 | +import SideChat from './Component/SideChat'; // 측면 대기시간 채팅 | ||
10 | +import MainPage from './Component/MainPage'; // 초기화면 | ||
11 | +import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면 | ||
12 | + | ||
13 | +import Writing from './Component/Writing'; // 글 작성 화면 | ||
14 | + | ||
10 | import { | 15 | import { |
11 | BrowserRouter as Router, | 16 | BrowserRouter as Router, |
12 | Routes, | 17 | Routes, |
... | @@ -24,6 +29,8 @@ root.render( | ... | @@ -24,6 +29,8 @@ root.render( |
24 | <Routes> | 29 | <Routes> |
25 | <Route path="/" element={<MainPage />} /> | 30 | <Route path="/" element={<MainPage />} /> |
26 | <Route path="/menu" element={<MenuPage />} /> | 31 | <Route path="/menu" element={<MenuPage />} /> |
32 | + <Route path="/mealtalk" element={<MainPage />} /> | ||
33 | + <Route path="/writing" element={<Writing />} /> | ||
27 | </Routes> | 34 | </Routes> |
28 | </Router> | 35 | </Router> |
29 | </div> | 36 | </div> | ... | ... |
-
Please register or login to post a comment