connect main page with today post & change todayMenu from GET to POST
Showing
3 changed files
with
36 additions
and
28 deletions
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 | -function InnerContent(props){ | 6 | +function InnerContent(props) { |
7 | return ( | 7 | return ( |
8 | <div> | 8 | <div> |
9 | - <div style={{fontSize:'15px', height: '10px', width:'100%', backgroundColor:'#FDF5E6'}}>{props.title} {props.content}</div> | 9 | + <div style={{ fontSize: '15px', height: '10px', width: '100%', backgroundColor: '#FDF5E6' }}>{props.title} {props.content}</div> |
10 | </div> | 10 | </div> |
11 | ); | 11 | ); |
12 | } | 12 | } |
13 | 13 | ||
14 | 14 | ||
15 | function MainPage() { | 15 | function MainPage() { |
16 | - const [list, setList] = useState([{title: '하이', content: '바보'},{title: '하이2', content: '바보2'},{title: '하이3', content: '바보3'}]); | 16 | + const [list, setList] = useState([{ title: '하이', content: '바보' }, { title: '하이2', content: '바보2' }, { title: '하이3', content: '바보3' }]); |
17 | let currentYear = new Date().getFullYear(); | 17 | let currentYear = new Date().getFullYear(); |
18 | - let currentMonth = new Date().getMonth(); | 18 | + let currentMonth = new Date().getMonth() + 1; |
19 | let currentDate = new Date().getDate(); | 19 | let currentDate = new Date().getDate(); |
20 | - let today = currentYear+'/'+currentMonth+'/'+currentDate; | 20 | + let today = currentYear + '/' + currentMonth + '/' + currentDate; |
21 | 21 | ||
22 | 22 | ||
23 | - const todayMealTable = async()=>{ | 23 | + const todayMealTable = async () => { |
24 | axios.get("/api/todayMenu").then( | 24 | axios.get("/api/todayMenu").then( |
25 | (res) => { | 25 | (res) => { |
26 | const makeTable = (arr_, dom_) => { | 26 | const makeTable = (arr_, dom_) => { |
27 | 27 | ||
28 | - arr_.forEach((elem)=>{ | 28 | + arr_.forEach((elem) => { |
29 | let span_ = document.createElement('div'); | 29 | let span_ = document.createElement('div'); |
30 | span_.innerHTML = elem; | 30 | span_.innerHTML = elem; |
31 | dom_.appendChild(span_); | 31 | dom_.appendChild(span_); |
32 | }); | 32 | }); |
33 | 33 | ||
34 | }; | 34 | }; |
35 | + const lunchDom = document.getElementsByClassName('lunchTable')[0]; | ||
36 | + const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; | ||
35 | 37 | ||
38 | + if (res.data !== "weekend") { | ||
36 | const index1 = res.data[0].indexOf(':'); | 39 | const index1 = res.data[0].indexOf(':'); |
37 | const index2 = res.data[1].indexOf(':'); | 40 | const index2 = res.data[1].indexOf(':'); |
38 | - let lunchArr = res.data[0].substring(index1+1); | 41 | + let lunchArr = res.data[0].substring(index1 + 1); |
39 | - let dinnerArr = res.data[1].substring(index2+1); | 42 | + console.log(lunchArr) |
43 | + let dinnerArr = res.data[1].substring(index2 + 1); | ||
40 | 44 | ||
41 | - if(index1 !== -1){ | 45 | + if (index1 !== -1) { |
42 | lunchArr = lunchArr.split(','); | 46 | lunchArr = lunchArr.split(','); |
43 | } | 47 | } |
44 | - if(index1 !== -1){ | 48 | + if (index1 !== -1) { |
45 | dinnerArr = dinnerArr.split(','); | 49 | dinnerArr = dinnerArr.split(','); |
46 | } | 50 | } |
47 | 51 | ||
48 | - const lunchDom = document.getElementsByClassName('lunchTable')[0]; | ||
49 | - const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; | ||
50 | - | ||
51 | makeTable(lunchArr, lunchDom); | 52 | makeTable(lunchArr, lunchDom); |
52 | makeTable(dinnerArr, dinnerDom); | 53 | makeTable(dinnerArr, dinnerDom); |
53 | } | 54 | } |
55 | + else{ | ||
56 | + makeTable(["오늘은"], lunchDom); | ||
57 | + makeTable(["주말입니다."], dinnerDom); | ||
58 | + } | ||
59 | + | ||
60 | + } | ||
54 | ) | 61 | ) |
55 | }; | 62 | }; |
56 | 63 | ||
57 | - const todayInnerContent = async()=>{ // 게시글 목록 가져오기 | 64 | + const todayInnerContent = async () => { // 게시글 목록 가져오기 |
58 | - axios.get('/api/get').then((res) => { | 65 | + const arr = (await axios.get('/api/getList')).data; |
66 | + var idArray = []; | ||
67 | + for(var id of arr) idArray.push(id); | ||
68 | + axios.post('/api/get',{idArray:idArray}).then((res)=>{ | ||
69 | + setList(res.data); | ||
59 | console.log(res.data); | 70 | console.log(res.data); |
60 | - } | 71 | + }) |
61 | - ); | ||
62 | } | 72 | } |
63 | 73 | ||
64 | - useEffect(()=>{ | 74 | + useEffect(() => { |
65 | todayMealTable(); | 75 | todayMealTable(); |
66 | todayInnerContent(); | 76 | todayInnerContent(); |
67 | }, []); | 77 | }, []); |
... | @@ -76,17 +86,15 @@ function MainPage() { | ... | @@ -76,17 +86,15 @@ function MainPage() { |
76 | <div></div> | 86 | <div></div> |
77 | <div>점심</div> | 87 | <div>점심</div> |
78 | <div>저녁</div> | 88 | <div>저녁</div> |
79 | - <div className='lunchTable'> | 89 | + <div className='lunchTable'></div> |
80 | - | ||
81 | - </div> | ||
82 | <div className='dinnerTable'></div> | 90 | <div className='dinnerTable'></div> |
83 | </div> | 91 | </div> |
84 | <div className='mainpageUnder'> | 92 | <div className='mainpageUnder'> |
85 | <div>메뉴에 대한 이야기</div> | 93 | <div>메뉴에 대한 이야기</div> |
86 | <div> | 94 | <div> |
87 | - {list.map((item,index)=>{ | 95 | + {list.map((item, index) => { |
88 | - return( | 96 | + return ( |
89 | - <InnerContent key={index} title={item.title} content={item.content}/> | 97 | + <InnerContent key={index} title={item.title} content={item.content} /> |
90 | ) | 98 | ) |
91 | })} | 99 | })} |
92 | </div> | 100 | </div> | ... | ... |
... | @@ -7,7 +7,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'; | ... | @@ -7,7 +7,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'; |
7 | //컴포넌트 | 7 | //컴포넌트 |
8 | import TopBanner from './Component/TopBanner'; // 상단 메뉴 | 8 | import TopBanner from './Component/TopBanner'; // 상단 메뉴 |
9 | import SideChat from './Component/SideChat'; // 측면 대기시간 채팅 | 9 | import SideChat from './Component/SideChat'; // 측면 대기시간 채팅 |
10 | -import MainPage from './Component/MainPage'; // 초기화면 | 10 | +import MainPage from './Component/mainpage'; // 초기화면 |
11 | import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면 | 11 | import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면 |
12 | 12 | ||
13 | import Writing from './Component/Writing'; // 글 작성 화면 | 13 | import Writing from './Component/Writing'; // 글 작성 화면 | ... | ... |
... | @@ -80,7 +80,7 @@ router.get('/api/getList/:date', async (req, res) => { | ... | @@ -80,7 +80,7 @@ router.get('/api/getList/:date', async (req, res) => { |
80 | } | 80 | } |
81 | }); | 81 | }); |
82 | 82 | ||
83 | -router.get('/api/get', async (req, res) => { // 특정 id(여러개)의 게시물 내용 요약 불러오기 | 83 | +router.post('/api/get', async (req, res) => { // 특정 id(여러개)의 게시물 내용 요약 불러오기 |
84 | try { | 84 | try { |
85 | const idArray = req.body.idArray; | 85 | const idArray = req.body.idArray; |
86 | var resultArray = []; | 86 | var resultArray = []; | ... | ... |
-
Please register or login to post a comment