최은석

connect main page with today post & change todayMenu from GET to POST

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 -
34 - };
35 33
36 - const index1 = res.data[0].indexOf(':'); 34 + };
37 - const index2 = res.data[1].indexOf(':'); 35 + const lunchDom = document.getElementsByClassName('lunchTable')[0];
38 - let lunchArr = res.data[0].substring(index1+1); 36 + const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
39 - let dinnerArr = res.data[1].substring(index2+1); 37 +
38 + if (res.data !== "weekend") {
39 + const index1 = res.data[0].indexOf(':');
40 + const index2 = res.data[1].indexOf(':');
41 + let lunchArr = res.data[0].substring(index1 + 1);
42 + console.log(lunchArr)
43 + let dinnerArr = res.data[1].substring(index2 + 1);
44 +
45 + if (index1 !== -1) {
46 + lunchArr = lunchArr.split(',');
47 + }
48 + if (index1 !== -1) {
49 + dinnerArr = dinnerArr.split(',');
50 + }
40 51
41 - if(index1 !== -1){ 52 + makeTable(lunchArr, lunchDom);
42 - lunchArr = lunchArr.split(','); 53 + makeTable(dinnerArr, dinnerDom);
43 } 54 }
44 - if(index1 !== -1){ 55 + else{
45 - dinnerArr = dinnerArr.split(','); 56 + makeTable(["오늘은"], lunchDom);
57 + makeTable(["주말입니다."], dinnerDom);
46 } 58 }
47 59
48 - const lunchDom = document.getElementsByClassName('lunchTable')[0];
49 - const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
50 -
51 - makeTable(lunchArr, lunchDom);
52 - makeTable(dinnerArr, dinnerDom);
53 } 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 }, []);
68 - 78 +
69 return ( 79 return (
70 <div className='mainpage'> 80 <div className='mainpage'>
71 - 81 +
72 <div> 82 <div>
73 <div className='haksikTitle'> 83 <div className='haksikTitle'>
74 {today} 2기숙사 학식 84 {today} 2기숙사 학식
...@@ -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 = [];
......