최은석 / ossw-project

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

commuPage

Expand all
Inline Side-by-side
Showing 8 changed files with 247 additions and 10 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>
......
This diff is collapsed. Click to expand it.