최은석 / ossw-project

Go to a project
Toggle navigation Toggle navigation pinning
채지성
bf5d2c96 1 parent 1df59356

first completion

Inline Side-by-side
Showing 10 changed files with 100 additions and 41 deletions
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 border-bottom: 1px solid black; 47 border-bottom: 1px solid black;
48 padding-left:10%; 48 padding-left:10%;
49 display:grid; 49 display:grid;
50 - grid-template-columns: 15% 20% 40%; 50 + grid-template-columns: 25% 50% 15%;
51 grid-template-rows: 100%; 51 grid-template-rows: 100%;
52 align-items: center; 52 align-items: center;
53 padding-top: 1%; 53 padding-top: 1%;
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
58 border: 0px solid black; 58 border: 0px solid black;
59 background-color: #FDF5F3; 59 background-color: #FDF5F3;
60 height:100%; 60 height:100%;
61 + width:100%;
61 max-height: 18px; 62 max-height: 18px;
62 display: block; 63 display: block;
63 text-align: left; 64 text-align: left;
......
...@@ -4,11 +4,12 @@ import { useEffect, useState } from 'react'; ...@@ -4,11 +4,12 @@ import { useEffect, useState } from 'react';
4 import './CommuPage.css' 4 import './CommuPage.css'
5 5
6 function InnerContent(props) { 6 function InnerContent(props) {
7 +
7 return ( 8 return (
8 - <div className='outer'> 9 + <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
9 <div className='inner'>{props.title}</div> 10 <div className='inner'>{props.title}</div>
10 - <div className='inner'></div>
11 <div className='inner'>{props.content}</div> 11 <div className='inner'>{props.content}</div>
12 + <div className='inner'>{props.time}</div>
12 </div> 13 </div>
13 ); 14 );
14 } 15 }
...@@ -39,7 +40,7 @@ function CommuPage() { ...@@ -39,7 +40,7 @@ function CommuPage() {
39 <div> 40 <div>
40 {list.map((item, index) => { 41 {list.map((item, index) => {
41 return ( 42 return (
42 - <InnerContent key={index} title={item.title} content={item.content} /> 43 + <InnerContent key={index} id= {item.id} title={item.title} content={item.content} time={item.time} />
43 ) 44 )
44 })} 45 })}
45 </div> 46 </div>
......
...@@ -4,16 +4,16 @@ import { useEffect, useState } from 'react'; ...@@ -4,16 +4,16 @@ import { useEffect, useState } from 'react';
4 import './CommuPage.css' 4 import './CommuPage.css'
5 5
6 function InnerContent(props) { 6 function InnerContent(props) {
7 +
7 return ( 8 return (
8 - <div className='outer'> 9 + <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
9 <div className='inner'>{props.title}</div> 10 <div className='inner'>{props.title}</div>
10 - <div className='inner'></div>
11 <div className='inner'>{props.content}</div> 11 <div className='inner'>{props.content}</div>
12 + <div className='inner'>{props.time}</div>
12 </div> 13 </div>
13 ); 14 );
14 } 15 }
15 16
16 -
17 function CommuPageYes() { 17 function CommuPageYes() {
18 const [list2, setList2] = useState([]); 18 const [list2, setList2] = useState([]);
19 const moveToToday = () => {window.location.href = '/mealtalk';} 19 const moveToToday = () => {window.location.href = '/mealtalk';}
...@@ -45,7 +45,7 @@ function CommuPageYes() { ...@@ -45,7 +45,7 @@ function CommuPageYes() {
45 <div> 45 <div>
46 {list2.map((item, index) => { 46 {list2.map((item, index) => {
47 return ( 47 return (
48 - <InnerContent key={index} title={item.title} content={item.content} /> 48 + <InnerContent key={index} id= {item.id} time={item.time} title={item.title} content={item.content} />
49 ) 49 )
50 })} 50 })}
51 </div> 51 </div>
......
1 +.contentOuter{
2 + height: 90%;
3 + width: 90%;
4 + max-width: 1024px;
5 +
6 + display:grid;
7 + grid-template-rows: 15% 70% 10% ;
8 + grid-template-columns: 100%;
9 + margin: 2% 2%;
10 + padding: 2% 1%;
11 + background-color: #FDF5E6;
12 + place-items: center;
13 +}
14 +
15 +
16 +.contentOuter :nth-child(1),
17 +.contentOuter :nth-child(2),
18 +.contentOuter :nth-child(3){
19 + display:block;
20 + background-color: ivory;
21 + width:95%;
22 + height: 95%;
23 + border: 1px solid black;
24 + padding: 1% 5%;
25 +}
26 +.contentOuter :nth-child(1){ /*제목*/
27 + justify-content:left;
28 + font-size:40px;
29 +
30 +}
31 +.contentOuter :nth-child(2){ /*본문*/
32 + justify-content:left;
33 + font-size:20px;
34 + margin-bottom: 0px;
35 +}
36 +.contentOuter :nth-child(3){ /*날짜*/
37 + text-align: right;
38 +
39 + margin-top: 0px;
40 +}
...\ 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 './ShowContent.css'
5 +
6 +function ShowContent() {
7 + const [title, setTitle] = useState('');
8 + const [content, setContent] = useState('');
9 + const [item, setItem] = useState('');
10 +
11 + const getContent = async() => {
12 + const contId = window.location.pathname.substring(13);
13 + console.log(contId);
14 + axios.get(`/api/get/${contId}`).then((res)=>{
15 + setTitle(res.data.title);
16 + setContent(res.data.content);
17 + setItem(res.data.date+' '+res.data.time);
18 +
19 + console.log(title, content, item);
20 + });
21 + };
22 +
23 + useEffect(()=>{
24 + getContent();
25 + }, []);
26 +
27 + return (
28 + <div className='contentOuter'>
29 + <div className='content'>{title}</div>
30 + <div className='content'>{content}</div>
31 + <div className='content'>{item}</div>
32 + </div>
33 + );
34 +}
35 +export default ShowContent;
...\ No newline at end of file ...\ No newline at end of file
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
93 border-bottom: 1px solid black; 93 border-bottom: 1px solid black;
94 padding-left:10%; 94 padding-left:10%;
95 display:grid; 95 display:grid;
96 - grid-template-columns: 15% 20% 40%; 96 + grid-template-columns: 25% 50% 15%;
97 grid-template-rows: 100%; 97 grid-template-rows: 100%;
98 align-items: center; 98 align-items: center;
99 padding-top: 1%; 99 padding-top: 1%;
...@@ -104,6 +104,7 @@ ...@@ -104,6 +104,7 @@
104 border: 0px solid black; 104 border: 0px solid black;
105 background-color: #FDF5F3; 105 background-color: #FDF5F3;
106 height:100%; 106 height:100%;
107 + width:100%;
107 max-height: 18px; 108 max-height: 18px;
108 display: block; 109 display: block;
109 text-align: left; 110 text-align: left;
......
...@@ -3,17 +3,18 @@ import axios from "axios"; ...@@ -3,17 +3,18 @@ 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 function InnerContent(props) { 7 function InnerContent(props) {
8 +
7 return ( 9 return (
8 - <div className='outer'> 10 + <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
9 <div className='inner'>{props.title}</div> 11 <div className='inner'>{props.title}</div>
10 - <div className='inner'></div>
11 <div className='inner'>{props.content}</div> 12 <div className='inner'>{props.content}</div>
13 + <div className='inner'>{props.time}</div>
12 </div> 14 </div>
13 ); 15 );
14 } 16 }
15 17
16 -
17 function MainPage() { 18 function MainPage() {
18 const [list, setList] = useState([]); 19 const [list, setList] = useState([]);
19 let currentYear = new Date().getFullYear(); 20 let currentYear = new Date().getFullYear();
...@@ -21,7 +22,6 @@ function MainPage() { ...@@ -21,7 +22,6 @@ function MainPage() {
21 let currentDate = new Date().getDate(); 22 let currentDate = new Date().getDate();
22 let today = currentYear + '/' + currentMonth + '/' + currentDate; 23 let today = currentYear + '/' + currentMonth + '/' + currentDate;
23 24
24 -
25 const todayMealTable = async () => { 25 const todayMealTable = async () => {
26 axios.get("/api/todayMenu").then( 26 axios.get("/api/todayMenu").then(
27 (res) => { 27 (res) => {
...@@ -73,11 +73,12 @@ function MainPage() { ...@@ -73,11 +73,12 @@ function MainPage() {
73 var idArray = []; 73 var idArray = [];
74 for(var id of arr) idArray.push(id); 74 for(var id of arr) idArray.push(id);
75 axios.post('/api/get',{idArray:idArray}).then((res)=>{ 75 axios.post('/api/get',{idArray:idArray}).then((res)=>{
76 - const reverseArr = res.data.reverse().slice(0,8); 76 + const reverseArr = res.data.reverse().slice(0,8); // 8개만 띄우기
77 setList(reverseArr); 77 setList(reverseArr);
78 console.log(reverseArr); 78 console.log(reverseArr);
79 }) 79 })
80 - } 80 + };
81 +
81 82
82 useEffect(() => { 83 useEffect(() => {
83 todayMealTable(); 84 todayMealTable();
...@@ -99,10 +100,10 @@ function MainPage() { ...@@ -99,10 +100,10 @@ function MainPage() {
99 </div> 100 </div>
100 <div className='mainpageUnder'> 101 <div className='mainpageUnder'>
101 <div>메뉴에 대한 이야기</div> 102 <div>메뉴에 대한 이야기</div>
102 - <div> 103 + <div className='contentCover'>
103 {list.map((item, index) => { 104 {list.map((item, index) => {
104 return ( 105 return (
105 - <InnerContent key={index} title={item.title} content={item.content} /> 106 + <InnerContent key={index} id= {item.id} title={item.title} content={item.content} time={item.time} />
106 ) 107 )
107 })} 108 })}
108 </div> 109 </div>
......
...@@ -12,6 +12,7 @@ import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면 ...@@ -12,6 +12,7 @@ import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면
12 import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘) 12 import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘)
13 import CommuPageYes from './Component/CommuPageYes'; // 학식 커뮤 화면(어제) 13 import CommuPageYes from './Component/CommuPageYes'; // 학식 커뮤 화면(어제)
14 import Writing from './Component/Writing'; // 글 작성 화면 14 import Writing from './Component/Writing'; // 글 작성 화면
15 +import ShowContent from './Component/ShowContent'; // 게시글 보는 화면
15 16
16 import { 17 import {
17 BrowserRouter as Router, 18 BrowserRouter as Router,
...@@ -33,6 +34,7 @@ root.render( ...@@ -33,6 +34,7 @@ root.render(
33 <Route path="/mealtalk" element={<CommuPage />} /> 34 <Route path="/mealtalk" element={<CommuPage />} />
34 <Route path="/mealtalk/yesterday" element={<CommuPageYes />} /> 35 <Route path="/mealtalk/yesterday" element={<CommuPageYes />} />
35 <Route path="/writing" element={<Writing />} /> 36 <Route path="/writing" element={<Writing />} />
37 + <Route path="/showcontent/:id" element={<ShowContent />}/>
36 </Routes> 38 </Routes>
37 </Router> 39 </Router>
38 </div> 40 </div>
......
...@@ -210,13 +210,9 @@ router.get('/api/waiting', async (req, res) => { ...@@ -210,13 +210,9 @@ router.get('/api/waiting', async (req, res) => {
210 const time = Number(hour + minute); 210 const time = Number(hour + minute);
211 211
212 var result = []; 212 var result = [];
213 -<<<<<<< HEAD 213 +
214 - for(const waiting of waitingList){
215 - if(time - Number(waiting.time.replace(':','')) <= 100){
216 -=======
217 for (const waiting of waitingList) { 214 for (const waiting of waitingList) {
218 if (time - Number(waiting.time.replace(':', '')) <= 100) { 215 if (time - Number(waiting.time.replace(':', '')) <= 100) {
219 ->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
220 result.push(waiting) 216 result.push(waiting)
221 } 217 }
222 } 218 }
...@@ -232,18 +228,9 @@ router.post('/api/waiting', async (req, res) => { ...@@ -232,18 +228,9 @@ router.post('/api/waiting', async (req, res) => {
232 const today = getCurrentDate(); 228 const today = getCurrentDate();
233 var waitingList = await waitingModel.findOne({ date: today }); 229 var waitingList = await waitingModel.findOne({ date: today });
234 230
235 -<<<<<<< HEAD 231 +
236 - const date = new Date();
237 - var hour = date.getHours();
238 - hour = hour < 10 ? '0' + hour.toString() : hour.toString();
239 - var minute = date.getMinutes();
240 - minute = minute < 10 ? '0' + minute.toString() : minute.toString();
241 - const time = hour + ":" + minute;
242 - const newWaiting = {value: req.body.value, time: time};
243 -=======
244 const time = getCurrentTime(); 232 const time = getCurrentTime();
245 const newWaiting = { value: req.body.value, time: time }; 233 const newWaiting = { value: req.body.value, time: time };
246 ->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
247 234
248 if (waitingList == null) await waitingModel({ date: today, waiting: [newWaiting] }).save(); 235 if (waitingList == null) await waitingModel({ date: today, waiting: [newWaiting] }).save();
249 else { 236 else {
...@@ -261,11 +248,7 @@ router.post('/api/waiting', async (req, res) => { ...@@ -261,11 +248,7 @@ router.post('/api/waiting', async (req, res) => {
261 248
262 249
263 250
264 -<<<<<<< HEAD
265 -function setting(resultJson){
266 -=======
267 function setting(resultJson) { 251 function setting(resultJson) {
268 ->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
269 var result = {} 252 var result = {}
270 result.fo_date = [resultJson.fo_date1, resultJson.fo_date2, resultJson.fo_date3, resultJson.fo_date4, resultJson.fo_date5]; 253 result.fo_date = [resultJson.fo_date1, resultJson.fo_date2, resultJson.fo_date3, resultJson.fo_date4, resultJson.fo_date5];
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]; 254 result.fo_menu_lun = [resultJson.fo_menu_lun1, resultJson.fo_menu_lun2, resultJson.fo_menu_lun3, resultJson.fo_menu_lun4, resultJson.fo_menu_lun5];
......
...@@ -535,11 +535,6 @@ ...@@ -535,11 +535,6 @@
535 "resolved" "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz" 535 "resolved" "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
536 "version" "0.5.2" 536 "version" "0.5.2"
537 537
538 -"fsevents@~2.3.2":
539 - "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
540 - "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
541 - "version" "2.3.2"
542 -
543 "function-bind@^1.1.1": 538 "function-bind@^1.1.1":
544 "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" 539 "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
545 "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" 540 "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
......