최은석 / ossw-project

Go to a project
Toggle navigation Toggle navigation pinning
채지성
d8144c02 1 parent cd914905

menuTablePage

Inline Side-by-side
Showing 8 changed files with 141 additions and 18 deletions
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>
......
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
...@@ -45,11 +45,7 @@ function MainPage() { ...@@ -45,11 +45,7 @@ function MainPage() {
45 const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; 45 const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
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>
......