최은석 / ossw-project

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

completion-second

Inline Side-by-side
Showing 9 changed files with 185 additions and 13 deletions
...@@ -6,7 +6,7 @@ import './CommuPage.css' ...@@ -6,7 +6,7 @@ import './CommuPage.css'
6 function InnerContent(props) { 6 function InnerContent(props) {
7 7
8 return ( 8 return (
9 - <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}> 9 + <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
10 <div className='inner'>{props.title}</div> 10 <div className='inner'>{props.title}</div>
11 <div className='inner'>{props.content}</div> 11 <div className='inner'>{props.content}</div>
12 <div className='inner'>{props.time}</div> 12 <div className='inner'>{props.time}</div>
......
...@@ -6,7 +6,7 @@ import './CommuPage.css' ...@@ -6,7 +6,7 @@ import './CommuPage.css'
6 function InnerContent(props) { 6 function InnerContent(props) {
7 7
8 return ( 8 return (
9 - <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}> 9 + <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
10 <div className='inner'>{props.title}</div> 10 <div className='inner'>{props.title}</div>
11 <div className='inner'>{props.content}</div> 11 <div className='inner'>{props.content}</div>
12 <div className='inner'>{props.time}</div> 12 <div className='inner'>{props.time}</div>
......
1 +.writing{
2 + height: 90%;
3 + width: 90%;
4 + max-width: 1024px;
5 +
6 + display:grid;
7 + grid-template-rows: 15% 70% 10% ;
8 +
9 + margin: 2% 2%;
10 +
11 + background-color: #FDF5E6;
12 +
13 +}
14 +
15 +.writing :nth-child(1) {
16 + display: flex;
17 + justify-content: center;
18 + align-items: center;
19 +}
20 +.writing :nth-child(2) {
21 + display: flex;
22 + justify-content: center;
23 + align-items:flex-start;
24 + padding-top:3%;
25 +}
26 +.writing :nth-child(1) input{
27 + padding: 2%;
28 + width:95%;
29 + height:87%;
30 +
31 + font-size: 30px;
32 +}
33 +.writing :nth-child(2) textarea {
34 + padding: 2%;
35 + width:95%;
36 + height:95%;
37 + resize: none;
38 + font-size: 20px;
39 +}
40 +
41 +.writing :nth-child(1) input::placeholder{
42 + font-size:40px;
43 +}
44 +
45 +.writing :nth-child(3){
46 + display: flex;
47 + justify-content: end;
48 + align-items: flex-end;
49 +}
50 +.writing :nth-child(3) button {
51 + height: 70%;
52 + width: 15%;
53 + margin: 3%;
54 + max-width: 250px;
55 +}
...\ 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 './Writing.css'
5 +
6 +function ModifyContent() {
7 + const [title, setTitle] = useState('');
8 + const [content, setContent] = useState('');
9 + let count = 0;
10 + const getContent = async() => {
11 + const contId = window.location.pathname.substring(15);
12 +
13 + axios.get(`/api/get/${contId}`).then((res)=>{
14 + if(count === 0){
15 + document.getElementById('title').value = res.data.title;
16 + document.getElementById('content').value = res.data.content;
17 + count = 1;
18 + }
19 + });
20 + };
21 +
22 + const postContent = async()=>{
23 + const title = document.getElementById('title').value;
24 + const content = document.getElementById('content').value;
25 + const contId = window.location.pathname.substring(15);
26 + let postContent = {
27 + "title": title,
28 + "content": content,
29 + };
30 +
31 + console.log(postContent);
32 + if(postContent.title == '' || postContent.content == ''){
33 + alert('제목과 내용을 모두 적어주세요');
34 + } else {
35 + axios.put(`/api/edit/${contId}`, postContent).then((res)=>{
36 + window.location.href = '/mealtalk';
37 + });
38 + }
39 + }
40 +
41 + useEffect(()=>{
42 + getContent();
43 + }, []);
44 +
45 + return (
46 + <div className='writing'>
47 + <div><input id='title' type='text' placeholder='제목'/></div>
48 + <div><textarea id='content'></textarea></div>
49 + <div id='postContent'><button onClick={postContent}>게시글 수정</button></div>
50 + </div>
51 + );
52 +}
53 +export default ModifyContent;
...\ No newline at end of file ...\ No newline at end of file
...@@ -35,6 +35,25 @@ ...@@ -35,6 +35,25 @@
35 } 35 }
36 .contentOuter :nth-child(3){ /*날짜*/ 36 .contentOuter :nth-child(3){ /*날짜*/
37 text-align: right; 37 text-align: right;
38 - 38 + display:grid;
39 + grid-template-columns: 30% 12% 12%;
40 + grid-template-rows: 100%;
41 + justify-content: right;
39 margin-top: 0px; 42 margin-top: 0px;
43 + padding-right: 0%;
44 +}
45 +.contentOuter :nth-child(3) > *{ /*날짜*/
46 + display: block;
47 + text-align: center;
48 + width: 90%;
49 + margin: 0px;
50 + font-size: 15px;
51 + background-color: white;
52 + margin: inherit 10%;
53 +}
54 +.contentOuter :nth-child(3) > p{
55 + background-color: ivory;
56 + text-align: right;
57 + border-width: 0px;
58 + margin-right: 0px;
40 } 59 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -10,7 +10,6 @@ function ShowContent() { ...@@ -10,7 +10,6 @@ function ShowContent() {
10 10
11 const getContent = async() => { 11 const getContent = async() => {
12 const contId = window.location.pathname.substring(13); 12 const contId = window.location.pathname.substring(13);
13 - console.log(contId);
14 axios.get(`/api/get/${contId}`).then((res)=>{ 13 axios.get(`/api/get/${contId}`).then((res)=>{
15 setTitle(res.data.title); 14 setTitle(res.data.title);
16 setContent(res.data.content); 15 setContent(res.data.content);
...@@ -20,6 +19,41 @@ function ShowContent() { ...@@ -20,6 +19,41 @@ function ShowContent() {
20 }); 19 });
21 }; 20 };
22 21
22 + const modify = async()=>{
23 + const contId = window.location.pathname.substring(13);
24 + const getPassword = await prompt('비밀번호를 입력해주세요');
25 + const call = { 'id': contId, 'password': getPassword};
26 + console.log(call);
27 + if(getPassword != null){
28 + axios.post(`/api/isPassEqual`, call).then((res)=>{
29 + console.log(res);
30 + if(res.data == 'success'){
31 + window.location.href = `/modifycontent/${contId}`;
32 + } else if (res.data == 'failed'){
33 + alert('비밀번호가 틀렸습니다.');
34 + }
35 + });
36 + }
37 + };
38 +
39 + const delete_ = async()=>{
40 + const contId = window.location.pathname.substring(13);
41 + const getPassword = await prompt('비밀번호를 입력해주세요');
42 + const call = { 'id': contId, 'password': getPassword};
43 + if(getPassword != null){
44 + axios.post(`/api/isPassEqual`, call).then((res)=>{
45 + console.log(res, '삭제');
46 + if(res.data == 'success'){
47 + axios.delete(`/api/delete/${contId}`).then((res)=>{
48 + window.location.href = `/mealtalk`;
49 + });
50 + } else if (res.data == 'failed'){
51 + alert('비밀번호가 틀렸습니다.');
52 + }
53 + });
54 + }
55 + }
56 +
23 useEffect(()=>{ 57 useEffect(()=>{
24 getContent(); 58 getContent();
25 }, []); 59 }, []);
...@@ -28,8 +62,9 @@ function ShowContent() { ...@@ -28,8 +62,9 @@ function ShowContent() {
28 <div className='contentOuter'> 62 <div className='contentOuter'>
29 <div className='content'>{title}</div> 63 <div className='content'>{title}</div>
30 <div className='content'>{content}</div> 64 <div className='content'>{content}</div>
31 - <div className='content'>{item}</div> 65 + <div className='content'><p>{item}</p><button onMouseUp={modify}>수정</button><button onMouseUp={delete_}>삭제</button></div>
32 </div> 66 </div>
33 ); 67 );
34 -} 68 +};
69 +
35 export default ShowContent; 70 export default ShowContent;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,14 +5,16 @@ import './Writing.css' ...@@ -5,14 +5,16 @@ import './Writing.css'
5 5
6 function Writing() { 6 function Writing() {
7 7
8 - const postContent = ()=>{ 8 + const postContent = async()=>{
9 const title = document.getElementById('title').value; 9 const title = document.getElementById('title').value;
10 const content = document.getElementById('content').value; 10 const content = document.getElementById('content').value;
11 11
12 + const password = await prompt('비밀번호를 입력하세요');
13 +
12 let postContent = { 14 let postContent = {
13 "title": title, 15 "title": title,
14 "content": content, 16 "content": content,
15 - "password": '1234', 17 + "password": password,
16 }; 18 };
17 19
18 console.log(postContent); 20 console.log(postContent);
......
...@@ -7,7 +7,7 @@ import './MainPage.css' ...@@ -7,7 +7,7 @@ import './MainPage.css'
7 function InnerContent(props) { 7 function InnerContent(props) {
8 8
9 return ( 9 return (
10 - <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}> 10 + <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
11 <div className='inner'>{props.title}</div> 11 <div className='inner'>{props.title}</div>
12 <div className='inner'>{props.content}</div> 12 <div className='inner'>{props.content}</div>
13 <div className='inner'>{props.time}</div> 13 <div className='inner'>{props.time}</div>
...@@ -46,15 +46,19 @@ function MainPage() { ...@@ -46,15 +46,19 @@ function MainPage() {
46 const index1 = res.data[0].indexOf(':'); 46 const index1 = res.data[0].indexOf(':');
47 const index2 = res.data[1].indexOf(':'); 47 const index2 = res.data[1].indexOf(':');
48 let lunchArr = res.data[0].substring(index1 + 1); 48 let lunchArr = res.data[0].substring(index1 + 1);
49 - console.log(lunchArr)
50 let dinnerArr = res.data[1].substring(index2 + 1); 49 let dinnerArr = res.data[1].substring(index2 + 1);
51 50
52 if (index1 !== -1) { 51 if (index1 !== -1) {
53 lunchArr = lunchArr.split(','); 52 lunchArr = lunchArr.split(',');
53 + } else {
54 + lunchArr = [lunchArr];
54 } 55 }
55 - if (index1 !== -1) { 56 + if (index2 !== -1) {
56 dinnerArr = dinnerArr.split(','); 57 dinnerArr = dinnerArr.split(',');
58 + } else {
59 + dinnerArr = [dinnerArr];
57 } 60 }
61 + console.log(lunchArr, dinnerArr);
58 62
59 makeTable(lunchArr, lunchDom); 63 makeTable(lunchArr, lunchDom);
60 makeTable(dinnerArr, dinnerDom); 64 makeTable(dinnerArr, dinnerDom);
...@@ -73,7 +77,7 @@ function MainPage() { ...@@ -73,7 +77,7 @@ function MainPage() {
73 var idArray = []; 77 var idArray = [];
74 for(var id of arr) idArray.push(id); 78 for(var id of arr) idArray.push(id);
75 axios.post('/api/get',{idArray:idArray}).then((res)=>{ 79 axios.post('/api/get',{idArray:idArray}).then((res)=>{
76 - const reverseArr = res.data.reverse().slice(0,8); // 8개만 띄우기 80 + const reverseArr = res.data.reverse().slice(0,6); // 8개만 띄우기
77 setList(reverseArr); 81 setList(reverseArr);
78 console.log(reverseArr); 82 console.log(reverseArr);
79 }) 83 })
...@@ -99,7 +103,7 @@ function MainPage() { ...@@ -99,7 +103,7 @@ function MainPage() {
99 <div className='dinnerTable'></div> 103 <div className='dinnerTable'></div>
100 </div> 104 </div>
101 <div className='mainpageUnder'> 105 <div className='mainpageUnder'>
102 - <div>메뉴에 대한 이야기</div> 106 + <div style={{paddingLeft:'1%'}}>메뉴에 대한 이야기</div>
103 <div className='contentCover'> 107 <div className='contentCover'>
104 {list.map((item, index) => { 108 {list.map((item, index) => {
105 return ( 109 return (
......
...@@ -13,12 +13,14 @@ import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘) ...@@ -13,12 +13,14 @@ 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 import ShowContent from './Component/ShowContent'; // 게시글 보는 화면
16 +//import ModifyContent from './Component/ModifyContent'; // 게시글 수정하는 화면
16 17
17 import { 18 import {
18 BrowserRouter as Router, 19 BrowserRouter as Router,
19 Routes, 20 Routes,
20 Route, 21 Route,
21 } from "react-router-dom"; 22 } from "react-router-dom";
23 +import ModifyContent from './Component/ModifyContent';
22 24
23 const root = ReactDOM.createRoot(document.getElementById('root')); 25 const root = ReactDOM.createRoot(document.getElementById('root'));
24 root.render( 26 root.render(
...@@ -35,6 +37,7 @@ root.render( ...@@ -35,6 +37,7 @@ root.render(
35 <Route path="/mealtalk/yesterday" element={<CommuPageYes />} /> 37 <Route path="/mealtalk/yesterday" element={<CommuPageYes />} />
36 <Route path="/writing" element={<Writing />} /> 38 <Route path="/writing" element={<Writing />} />
37 <Route path="/showcontent/:id" element={<ShowContent />}/> 39 <Route path="/showcontent/:id" element={<ShowContent />}/>
40 + <Route path="/modifycontent/:id" element={<ModifyContent />}/>
38 </Routes> 41 </Routes>
39 </Router> 42 </Router>
40 </div> 43 </div>
...@@ -45,3 +48,4 @@ root.render( ...@@ -45,3 +48,4 @@ root.render(
45 ); 48 );
46 49
47 reportWebVitals(); 50 reportWebVitals();
51 +// <Route path="/modifycontent/:id" element={<ModifyContent />}/>
...\ No newline at end of file ...\ No newline at end of file
......