최은석 / ossw-project

Go to a project
Toggle navigation Toggle navigation pinning
채지성
1df59356 2 parents ae1ff31b 18c016a2

commuPage

Inline Side-by-side
Showing 8 changed files with 288 additions and 22 deletions
...@@ -198,3 +198,15 @@ npm start ...@@ -198,3 +198,15 @@ npm start
198 > } 198 > }
199 >``` 199 >```
200 >> 제2기숙사 학식 메뉴 일주일치 가져오기 200 >> 제2기숙사 학식 메뉴 일주일치 가져오기
201 +
202 +-------------
203 +### /api/todayMenu
204 +#### GET호출
205 +> response
206 +> ```
207 +> [
208 +> "도시락: 돈까스마요덮밥,매운콩나물국,카레크로켓,마카로니샐러드,볶음김치"
209 +> "운영없음"
210 +> ]
211 +>```
212 +>> 제2기숙사 학식 오늘의 메뉴 가져오기
......
1 +.commuPage{
2 + height: 90%;
3 + width: 80%;
4 +
5 + display:grid;
6 + grid-template-rows: 85% 15%;
7 +
8 + margin: 1%;
9 +
10 + background-color: #FDF5E6;
11 +
12 +
13 +}
14 +
15 +.commuPage > :nth-child(1){
16 + overflow-y: scroll;
17 + overflow-x: hidden;
18 +
19 + -ms-overflow-style: none; /* IE and Edge */
20 + scrollbar-width: none; /* Firefox */
21 + height:100%;
22 +}
23 +.commuPage > :nth-child(1)::-webkit-scrollbar {
24 + display: none; /* Chrome, Safari, Opera*/
25 +}
26 +
27 +.commuPage > :nth-child(2){
28 + display:flex;
29 + justify-content: end;
30 + align-items: flex-end;
31 +}
32 +.commuPage > :nth-child(2) > button {
33 + width: 15%;
34 + margin:3% 4%;
35 + margin-left: 0%;
36 +}
37 +
38 +
39 +.outer {
40 +
41 + font-size: 10px;
42 + height: 30%;
43 + max-height: 30px;
44 + width: 98%;
45 + background-color: #FDF5F3;
46 + border:0px solid black;
47 + border-bottom: 1px solid black;
48 + padding-left:10%;
49 + display:grid;
50 + grid-template-columns: 15% 20% 40%;
51 + grid-template-rows: 100%;
52 + align-items: center;
53 + padding-top: 1%;
54 + margin: 0.5%
55 +}
56 +
57 +.inner{
58 + border: 0px solid black;
59 + background-color: #FDF5F3;
60 + height:100%;
61 + max-height: 18px;
62 + display: block;
63 + text-align: left;
64 + padding:0%;
65 + margin:0%;
66 + overflow: hidden;
67 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import './App.css';
2 +import axios from "axios";
3 +import { useEffect, useState } from 'react';
4 +import './CommuPage.css'
5 +
6 +function InnerContent(props) {
7 + return (
8 + <div className='outer'>
9 + <div className='inner'>{props.title}</div>
10 + <div className='inner'></div>
11 + <div className='inner'>{props.content}</div>
12 + </div>
13 + );
14 +}
15 +
16 +
17 +function CommuPage() {
18 + const [list, setList] = useState([]);
19 + const moveToYesterDay = () => {window.location.href = '/mealtalk/yesterday';}
20 + const moveToWriting = () => {window.location.href = '/writing';}
21 +
22 + const todayInnerContent = async () => { // 게시글 목록 가져오기
23 + const arr = (await axios.get('/api/getList')).data;
24 + var idArray = [];
25 + for(var id of arr) idArray.push(id);
26 + axios.post('/api/get',{idArray:idArray}).then((res)=>{
27 + const reverseArr = res.data.reverse();
28 + setList(reverseArr);
29 + console.log(reverseArr);
30 + })
31 + };
32 +
33 + useEffect(() => {
34 + todayInnerContent();
35 + }, []);
36 +
37 + return (
38 + <div className='commuPage'>
39 + <div>
40 + {list.map((item, index) => {
41 + return (
42 + <InnerContent key={index} title={item.title} content={item.content} />
43 + )
44 + })}
45 + </div>
46 + <div>
47 + <button onClick={moveToWriting}>글 작성</button>
48 + <button onClick={moveToYesterDay}>어제 보기</button>
49 + </div>
50 + </div>
51 + );
52 +}
53 +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
54 +
55 +export default CommuPage;
...\ No newline at end of file ...\ No newline at end of file
1 +import './App.css';
2 +import axios from "axios";
3 +import { useEffect, useState } from 'react';
4 +import './CommuPage.css'
5 +
6 +function InnerContent(props) {
7 + return (
8 + <div className='outer'>
9 + <div className='inner'>{props.title}</div>
10 + <div className='inner'></div>
11 + <div className='inner'>{props.content}</div>
12 + </div>
13 + );
14 +}
15 +
16 +
17 +function CommuPageYes() {
18 + const [list2, setList2] = useState([]);
19 + const moveToToday = () => {window.location.href = '/mealtalk';}
20 + const moveToWriting = () => {window.location.href = '/writing';}
21 +
22 + const yesterInnerContent = async () =>{
23 + let today = new Date();
24 + let year = today.getFullYear(); // 년도
25 + let month = today.getMonth() + 1; // 월
26 + let date = today.getDate() -1; // 날짜
27 + let todayDate = year+'-0'+month+'-0'+date; // date에 넣을 문자열
28 +
29 + const arr = (await axios.get(`/api/getList/:${todayDate}`)).data;
30 + var idArray = [];
31 + for(var id of arr) idArray.push(id);
32 + axios.post('/api/get',{idArray:idArray}).then((res)=>{
33 + const reverseArr = res.data.reverse();
34 + setList2(reverseArr);
35 + console.log(reverseArr);
36 + })
37 + };
38 +
39 + useEffect(() => {
40 + yesterInnerContent();
41 + }, []);
42 +
43 + return (
44 + <div className='commuPage'>
45 + <div>
46 + {list2.map((item, index) => {
47 + return (
48 + <InnerContent key={index} title={item.title} content={item.content} />
49 + )
50 + })}
51 + </div>
52 + <div>
53 + <button onClick={moveToWriting}>글 작성</button>
54 + <button onClick={moveToToday}>오늘 보기</button>
55 + </div>
56 + </div>
57 + );
58 +}
59 +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
60 +
61 +export default CommuPageYes;
...\ No newline at end of file ...\ No newline at end of file
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 11
12 } 12 }
13 13
14 -.mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){ 14 +.mainpage :nth-child(1):not(.mainpage :nth-child(1) *, .mainpage :nth-child(2) > * ){
15 display:grid; 15 display:grid;
16 grid-template-columns: 1fr 1fr; 16 grid-template-columns: 1fr 1fr;
17 grid-template-rows: 8% 12% 79%; 17 grid-template-rows: 8% 12% 79%;
...@@ -78,4 +78,36 @@ ...@@ -78,4 +78,36 @@
78 display:flex; 78 display:flex;
79 flex-direction: column; 79 flex-direction: column;
80 background-color: #FDF5E6; 80 background-color: #FDF5E6;
81 + padding:0px;
82 + margin: 0px;
83 +}
84 +
85 +.mainpage .mainpageUnder :nth-child(2) > div {
86 +
87 + font-size: 10px;
88 + height: 30%;
89 + max-height: 30px;
90 + width: 98%;
91 + background-color: #FDF5F3;
92 + border:0px solid black;
93 + border-bottom: 1px solid black;
94 + padding-left:10%;
95 + display:grid;
96 + grid-template-columns: 15% 20% 40%;
97 + grid-template-rows: 100%;
98 + align-items: center;
99 + padding-top: 1%;
100 + margin: 0.5%
101 +}
102 +
103 +.mainpage .mainpageUnder :nth-child(2) > div >div{
104 + border: 0px solid black;
105 + background-color: #FDF5F3;
106 + height:100%;
107 + max-height: 18px;
108 + display: block;
109 + text-align: left;
110 + padding:0%;
111 + margin:0%;
112 + overflow: hidden;
81 } 113 }
...\ 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 function InnerContent(props) { 6 function InnerContent(props) {
7 return ( 7 return (
8 - <div> 8 + <div className='outer'>
9 - <div style={{ fontSize: '15px', height: '10px', width: '100%', backgroundColor: '#FDF5E6' }}>{props.title} {props.content}</div> 9 + <div className='inner'>{props.title}</div>
10 + <div className='inner'></div>
11 + <div className='inner'>{props.content}</div>
10 </div> 12 </div>
11 ); 13 );
12 } 14 }
13 15
14 16
15 function MainPage() { 17 function MainPage() {
16 - const [list, setList] = useState([{ title: '하이', content: '바보' }, { title: '하이2', content: '바보2' }, { title: '하이3', content: '바보3' }]); 18 + const [list, setList] = useState([]);
17 let currentYear = new Date().getFullYear(); 19 let currentYear = new Date().getFullYear();
18 let currentMonth = new Date().getMonth() + 1; 20 let currentMonth = new Date().getMonth() + 1;
19 let currentDate = new Date().getDate(); 21 let currentDate = new Date().getDate();
...@@ -28,6 +30,11 @@ function MainPage() { ...@@ -28,6 +30,11 @@ function MainPage() {
28 arr_.forEach((elem) => { 30 arr_.forEach((elem) => {
29 let span_ = document.createElement('div'); 31 let span_ = document.createElement('div');
30 span_.innerHTML = elem; 32 span_.innerHTML = elem;
33 + span_.style.borderWidth = '0px';
34 + span_.style.textAlign = 'center';
35 + span_.style.gridTemplateColumns = '100%';
36 + span_.style.backgroundColor = '#FDF5E6';
37 + span_.style.padding = '0%';
31 dom_.appendChild(span_); 38 dom_.appendChild(span_);
32 }); 39 });
33 40
...@@ -66,8 +73,9 @@ function MainPage() { ...@@ -66,8 +73,9 @@ function MainPage() {
66 var idArray = []; 73 var idArray = [];
67 for(var id of arr) idArray.push(id); 74 for(var id of arr) idArray.push(id);
68 axios.post('/api/get',{idArray:idArray}).then((res)=>{ 75 axios.post('/api/get',{idArray:idArray}).then((res)=>{
69 - setList(res.data); 76 + const reverseArr = res.data.reverse().slice(0,8);
70 - console.log(res.data); 77 + setList(reverseArr);
78 + console.log(reverseArr);
71 }) 79 })
72 } 80 }
73 81
......
...@@ -7,9 +7,10 @@ import 'bootstrap/dist/css/bootstrap.min.css'; ...@@ -7,9 +7,10 @@ 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 +import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘)
13 +import CommuPageYes from './Component/CommuPageYes'; // 학식 커뮤 화면(어제)
13 import Writing from './Component/Writing'; // 글 작성 화면 14 import Writing from './Component/Writing'; // 글 작성 화면
14 15
15 import { 16 import {
...@@ -29,7 +30,8 @@ root.render( ...@@ -29,7 +30,8 @@ root.render(
29 <Routes> 30 <Routes>
30 <Route path="/" element={<MainPage />} /> 31 <Route path="/" element={<MainPage />} />
31 <Route path="/menu" element={<MenuPage />} /> 32 <Route path="/menu" element={<MenuPage />} />
32 - <Route path="/mealtalk" element={<MainPage />} /> 33 + <Route path="/mealtalk" element={<CommuPage />} />
34 + <Route path="/mealtalk/yesterday" element={<CommuPageYes />} />
33 <Route path="/writing" element={<Writing />} /> 35 <Route path="/writing" element={<Writing />} />
34 </Routes> 36 </Routes>
35 </Router> 37 </Router>
......
...@@ -18,6 +18,7 @@ const dayPostList = mongoose.Schema({ ...@@ -18,6 +18,7 @@ const dayPostList = mongoose.Schema({
18 const dayPostListModel = mongoose.model('dayPostList', dayPostList); 18 const dayPostListModel = mongoose.model('dayPostList', dayPostList);
19 const post = mongoose.Schema({ 19 const post = mongoose.Schema({
20 date: 'string', 20 date: 'string',
21 + time: 'string',
21 title: 'string', 22 title: 'string',
22 content: 'string', 23 content: 'string',
23 password: 'string' 24 password: 'string'
...@@ -49,6 +50,17 @@ function getCurrentDate(originDate) { ...@@ -49,6 +50,17 @@ function getCurrentDate(originDate) {
49 return year + '-' + month + '-' + day; 50 return year + '-' + month + '-' + day;
50 } 51 }
51 52
53 +function getCurrentTime() {
54 + var date = new Date();
55 + var hour = date.getHours();
56 + hour = hour < 10 ? '0' + hour.toString() : hour.toString();
57 +
58 + var minute = date.getMinutes();
59 + minute = minute < 10 ? '0' + minute.toString() : minute.toString();
60 +
61 + return hour + ":" + minute;
62 +}
63 +
52 function arrayEquals(a, b) { 64 function arrayEquals(a, b) {
53 return Array.isArray(a) && 65 return Array.isArray(a) &&
54 Array.isArray(b) && 66 Array.isArray(b) &&
...@@ -88,10 +100,12 @@ router.post('/api/get', async (req, res) => { ...@@ -88,10 +100,12 @@ router.post('/api/get', async (req, res) => {
88 const onePost = await postModel.findById(id); 100 const onePost = await postModel.findById(id);
89 var tempJSON = {}; 101 var tempJSON = {};
90 tempJSON.id = onePost.id; 102 tempJSON.id = onePost.id;
103 + tempJSON.time = onePost.time;
91 tempJSON.title = onePost.title; 104 tempJSON.title = onePost.title;
92 tempJSON.content = onePost.content; 105 tempJSON.content = onePost.content;
93 - tempJSON.content = tempJSON.content.replace(/(?:\r\n|\r|\n)/g, ''); 106 + tempJSON.content = tempJSON.content.replace(/(?:\r\n|\r|\n| )/g, '');
94 const sliceLength = 10; 107 const sliceLength = 10;
108 + if (tempJSON.title.length > sliceLength) tempJSON.title = tempJSON.title.slice(0, sliceLength) + "...";
95 if (tempJSON.content.length > sliceLength) tempJSON.content = tempJSON.content.slice(0, sliceLength) + "..."; 109 if (tempJSON.content.length > sliceLength) tempJSON.content = tempJSON.content.slice(0, sliceLength) + "...";
96 resultArray.push(tempJSON); 110 resultArray.push(tempJSON);
97 } 111 }
...@@ -105,7 +119,7 @@ router.post('/api/get', async (req, res) => { ...@@ -105,7 +119,7 @@ router.post('/api/get', async (req, res) => {
105 router.get('/api/get/:id', async (req, res) => { // 특정 id의 게시물 불러오기 119 router.get('/api/get/:id', async (req, res) => { // 특정 id의 게시물 불러오기
106 try { 120 try {
107 const currentPost = await postModel.findById(req.params.id); 121 const currentPost = await postModel.findById(req.params.id);
108 - res.send({ title: currentPost.title, content: currentPost.content }); 122 + res.send({ date: currentPost.date, time: currentPost.time, title: currentPost.title, content: currentPost.content });
109 } 123 }
110 catch (err) { 124 catch (err) {
111 res.send(err.message); 125 res.send(err.message);
...@@ -127,6 +141,7 @@ router.post('/api/postSave', async (req, res) => { ...@@ -127,6 +141,7 @@ router.post('/api/postSave', async (req, res) => {
127 try { 141 try {
128 var isFirst = false; 142 var isFirst = false;
129 const today = getCurrentDate(); 143 const today = getCurrentDate();
144 + const time = getCurrentTime();
130 145
131 var testDayPostList = await dayPostListModel.findOne({ date: today }); 146 var testDayPostList = await dayPostListModel.findOne({ date: today });
132 if (testDayPostList == null) { 147 if (testDayPostList == null) {
...@@ -134,7 +149,7 @@ router.post('/api/postSave', async (req, res) => { ...@@ -134,7 +149,7 @@ router.post('/api/postSave', async (req, res) => {
134 isFirst = true; 149 isFirst = true;
135 } 150 }
136 var postListArr = testDayPostList.idArray; 151 var postListArr = testDayPostList.idArray;
137 - var newPost = new postModel({ date: today, title: req.body.title, content: req.body.content, password: req.body.password }); 152 + var newPost = new postModel({ date: today, time:time, title: req.body.title, content: req.body.content, password: req.body.password });
138 var newPostData = await newPost.save(); 153 var newPostData = await newPost.save();
139 postListArr.push(newPostData._id.toString()); 154 postListArr.push(newPostData._id.toString());
140 155
...@@ -166,9 +181,9 @@ router.delete('/api/delete/:id', async (req, res) => { ...@@ -166,9 +181,9 @@ router.delete('/api/delete/:id', async (req, res) => {
166 const id = req.params.id; 181 const id = req.params.id;
167 const list = await dayPostListModel.find(); 182 const list = await dayPostListModel.find();
168 for (const dayList of list) { 183 for (const dayList of list) {
169 - var newArray = dayList.idArray.filter((data)=>{return data != id;}) 184 + var newArray = dayList.idArray.filter((data) => { return data != id; })
170 - if(!arrayEquals(dayList.idArray, newArray)){ 185 + if (!arrayEquals(dayList.idArray, newArray)) {
171 - await dayPostListModel.findByIdAndUpdate(dayList._id.toString(), {idArray: newArray}); 186 + await dayPostListModel.findByIdAndUpdate(dayList._id.toString(), { idArray: newArray });
172 } 187 }
173 } 188 }
174 await postModel.findByIdAndDelete(id); 189 await postModel.findByIdAndDelete(id);
...@@ -195,8 +210,13 @@ router.get('/api/waiting', async (req, res) => { ...@@ -195,8 +210,13 @@ router.get('/api/waiting', async (req, res) => {
195 const time = Number(hour + minute); 210 const time = Number(hour + minute);
196 211
197 var result = []; 212 var result = [];
213 +<<<<<<< HEAD
198 for(const waiting of waitingList){ 214 for(const waiting of waitingList){
199 if(time - Number(waiting.time.replace(':','')) <= 100){ 215 if(time - Number(waiting.time.replace(':','')) <= 100){
216 +=======
217 + for (const waiting of waitingList) {
218 + if (time - Number(waiting.time.replace(':', '')) <= 100) {
219 +>>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
200 result.push(waiting) 220 result.push(waiting)
201 } 221 }
202 } 222 }
...@@ -212,6 +232,7 @@ router.post('/api/waiting', async (req, res) => { ...@@ -212,6 +232,7 @@ router.post('/api/waiting', async (req, res) => {
212 const today = getCurrentDate(); 232 const today = getCurrentDate();
213 var waitingList = await waitingModel.findOne({ date: today }); 233 var waitingList = await waitingModel.findOne({ date: today });
214 234
235 +<<<<<<< HEAD
215 const date = new Date(); 236 const date = new Date();
216 var hour = date.getHours(); 237 var hour = date.getHours();
217 hour = hour < 10 ? '0' + hour.toString() : hour.toString(); 238 hour = hour < 10 ? '0' + hour.toString() : hour.toString();
...@@ -219,11 +240,15 @@ router.post('/api/waiting', async (req, res) => { ...@@ -219,11 +240,15 @@ router.post('/api/waiting', async (req, res) => {
219 minute = minute < 10 ? '0' + minute.toString() : minute.toString(); 240 minute = minute < 10 ? '0' + minute.toString() : minute.toString();
220 const time = hour + ":" + minute; 241 const time = hour + ":" + minute;
221 const newWaiting = {value: req.body.value, time: time}; 242 const newWaiting = {value: req.body.value, time: time};
243 +=======
244 + const time = getCurrentTime();
245 + const newWaiting = { value: req.body.value, time: time };
246 +>>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
222 247
223 - if (waitingList == null) await waitingModel({date: today, waiting: [newWaiting]}).save(); 248 + if (waitingList == null) await waitingModel({ date: today, waiting: [newWaiting] }).save();
224 - else{ 249 + else {
225 waitingList.waiting.push(newWaiting); 250 waitingList.waiting.push(newWaiting);
226 - await waitingModel.findOneAndUpdate({ date: today }, {waiting: waitingList.waiting}); 251 + await waitingModel.findOneAndUpdate({ date: today }, { waiting: waitingList.waiting });
227 } 252 }
228 253
229 var waitingListResult = await waitingModel.findOne({ date: today }); 254 var waitingListResult = await waitingModel.findOne({ date: today });
...@@ -236,7 +261,11 @@ router.post('/api/waiting', async (req, res) => { ...@@ -236,7 +261,11 @@ router.post('/api/waiting', async (req, res) => {
236 261
237 262
238 263
264 +<<<<<<< HEAD
239 function setting(resultJson){ 265 function setting(resultJson){
266 +=======
267 +function setting(resultJson) {
268 +>>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
240 var result = {} 269 var result = {}
241 result.fo_date = [resultJson.fo_date1, resultJson.fo_date2, resultJson.fo_date3, resultJson.fo_date4, resultJson.fo_date5]; 270 result.fo_date = [resultJson.fo_date1, resultJson.fo_date2, resultJson.fo_date3, resultJson.fo_date4, resultJson.fo_date5];
242 result.fo_menu_lun = [resultJson.fo_menu_lun1, resultJson.fo_menu_lun2, resultJson.fo_menu_lun3, resultJson.fo_menu_lun4, resultJson.fo_menu_lun5]; 271 result.fo_menu_lun = [resultJson.fo_menu_lun1, resultJson.fo_menu_lun2, resultJson.fo_menu_lun3, resultJson.fo_menu_lun4, resultJson.fo_menu_lun5];
...@@ -299,12 +328,12 @@ router.get('/api/todayMenu', async (req, res) => { ...@@ -299,12 +328,12 @@ router.get('/api/todayMenu', async (req, res) => {
299 newRequest.onreadystatechange = () => { 328 newRequest.onreadystatechange = () => {
300 if (newRequest.status == 200 && newRequest.readyState == 4) { 329 if (newRequest.status == 200 && newRequest.readyState == 4) {
301 var dt = new Date(); 330 var dt = new Date();
302 - if(dt.getDay() > 0 && dt.getDay() < 6){ 331 + if (dt.getDay() > 0 && dt.getDay() < 6) {
303 resJSON = JSON.parse(newRequest.responseText).root[0].WEEKLYMENU[0]; 332 resJSON = JSON.parse(newRequest.responseText).root[0].WEEKLYMENU[0];
304 const weekMenu = setting(resJSON); 333 const weekMenu = setting(resJSON);
305 - const todayMenu = [weekMenu.fo_menu_lun[dt.getDay()-1], weekMenu.fo_menu_eve[dt.getDay()-1]]; 334 + const todayMenu = [weekMenu.fo_menu_lun[dt.getDay() - 1], weekMenu.fo_menu_eve[dt.getDay() - 1]];
306 res.send(todayMenu); 335 res.send(todayMenu);
307 - }else res.send("weekend"); 336 + } else res.send("weekend");
308 337
309 } 338 }
310 } 339 }
......