completion-second

@@ -6,7 +6,7 @@ import './CommuPage.css'
 function InnerContent(props) {
 
   return (
-    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
+    <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
       <div className='inner'>{props.content}</div>
       <div className='inner'>{props.time}</div>

@@ -6,7 +6,7 @@ import './CommuPage.css'
 function InnerContent(props) {
 
   return (
-    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
+    <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
       <div className='inner'>{props.content}</div>
       <div className='inner'>{props.time}</div>

+.writing{
+    height: 90%;
+    width: 90%;
+    max-width: 1024px;
+
+    display:grid;
+    grid-template-rows: 15% 70% 10% ;
+
+    margin: 2% 2%;
+
+    background-color: #FDF5E6;
+
+}
+
+.writing :nth-child(1) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.writing :nth-child(2) {
+    display: flex;
+    justify-content: center;
+    align-items:flex-start;
+    padding-top:3%;
+}
+.writing :nth-child(1) input{
+    padding: 2%;
+    width:95%;
+    height:87%;
+
+    font-size: 30px;
+}
+.writing :nth-child(2) textarea {
+    padding: 2%;
+    width:95%;
+    height:95%;
+    resize: none;
+    font-size: 20px;
+}
+
+.writing :nth-child(1) input::placeholder{
+    font-size:40px;
+}
+
+.writing :nth-child(3){
+    display: flex;
+    justify-content: end;
+    align-items: flex-end;
+}
+.writing :nth-child(3) button {
+    height: 70%;
+    width: 15%;
+    margin: 3%;
+    max-width: 250px;
+}
\ No newline at end of file

+import './App.css';
+import axios from "axios";
+import { useEffect, useState } from 'react';
+import './Writing.css'
+
+function ModifyContent() {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  let count = 0;
+  const getContent = async() => {
+    const contId = window.location.pathname.substring(15);
+
+    axios.get(`/api/get/${contId}`).then((res)=>{
+      if(count === 0){
+        document.getElementById('title').value = res.data.title;
+        document.getElementById('content').value = res.data.content;
+        count = 1;
+      }
+    });
+ };
+
+  const postContent = async()=>{
+    const title = document.getElementById('title').value;
+    const content = document.getElementById('content').value; 
+    const contId = window.location.pathname.substring(15);
+    let postContent = {
+      "title": title,
+      "content": content,
+    };
+
+    console.log(postContent);
+    if(postContent.title == '' || postContent.content == ''){
+      alert('제목과 내용을 모두 적어주세요');
+    } else {
+      axios.put(`/api/edit/${contId}`, postContent).then((res)=>{
+        window.location.href = '/mealtalk';
+      });
+    }
+  }
+
+  useEffect(()=>{
+    getContent();
+  }, []);
+  
+  return (
+    <div className='writing'>
+      <div><input id='title' type='text' placeholder='제목'/></div>
+      <div><textarea id='content'></textarea></div>
+      <div id='postContent'><button onClick={postContent}>게시글 수정</button></div>
+    </div>
+  );
+}
+export default ModifyContent;
\ No newline at end of file

@@ -35,6 +35,25 @@
 }
 .contentOuter :nth-child(3){ /*날짜*/
     text-align: right;
-    
+    display:grid;
+    grid-template-columns: 30% 12% 12%;
+    grid-template-rows: 100%;
+    justify-content: right;
     margin-top: 0px;
+    padding-right: 0%;
+}
+.contentOuter :nth-child(3) > *{ /*날짜*/
+    display: block;
+    text-align: center;
+    width: 90%;
+    margin: 0px;
+    font-size: 15px;
+    background-color: white;
+    margin: inherit 10%;
+}
+.contentOuter :nth-child(3) > p{
+    background-color: ivory;
+    text-align: right;
+    border-width: 0px;
+    margin-right: 0px;
 }
\ No newline at end of file

@@ -10,7 +10,6 @@ function ShowContent() {
 
    const getContent = async() => {
       const contId = window.location.pathname.substring(13);
-      console.log(contId);
       axios.get(`/api/get/${contId}`).then((res)=>{
         setTitle(res.data.title);
         setContent(res.data.content);
@@ -20,6 +19,41 @@ function ShowContent() {
       });
    };
 
+    const modify = async()=>{
+     const contId = window.location.pathname.substring(13);
+     const getPassword = await prompt('비밀번호를 입력해주세요');
+     const call = { 'id': contId, 'password': getPassword}; 
+     console.log(call);
+     if(getPassword != null){
+      axios.post(`/api/isPassEqual`, call).then((res)=>{
+        console.log(res);
+        if(res.data == 'success'){
+          window.location.href = `/modifycontent/${contId}`;
+        } else if (res.data == 'failed'){
+          alert('비밀번호가 틀렸습니다.');
+        }
+      });
+     }     
+     };
+    
+    const delete_ = async()=>{
+      const contId = window.location.pathname.substring(13);
+      const getPassword = await prompt('비밀번호를 입력해주세요');
+      const call = { 'id': contId, 'password': getPassword}; 
+      if(getPassword != null){
+        axios.post(`/api/isPassEqual`, call).then((res)=>{
+          console.log(res, '삭제');
+          if(res.data == 'success'){
+            axios.delete(`/api/delete/${contId}`).then((res)=>{
+              window.location.href = `/mealtalk`;
+            });
+          } else if (res.data == 'failed'){
+            alert('비밀번호가 틀렸습니다.');
+          }
+        });
+       }
+    }
+
   useEffect(()=>{
     getContent();
   }, []);
@@ -28,8 +62,9 @@ function ShowContent() {
     <div className='contentOuter'>
       <div className='content'>{title}</div>
       <div className='content'>{content}</div>
-      <div className='content'>{item}</div>
+      <div className='content'><p>{item}</p><button onMouseUp={modify}>수정</button><button onMouseUp={delete_}>삭제</button></div>
     </div>
   );
-}
+};
+
 export default ShowContent;
\ No newline at end of file

@@ -5,14 +5,16 @@ import './Writing.css'
 
 function Writing() {
 
-  const postContent = ()=>{
+  const postContent = async()=>{
     const title = document.getElementById('title').value;
     const content = document.getElementById('content').value; 
 
+    const password = await prompt('비밀번호를 입력하세요');
+
     let postContent = {
       "title": title,
       "content": content,
-      "password": '1234',
+      "password": password,
     };
 
     console.log(postContent);

@@ -7,7 +7,7 @@ import './MainPage.css'
 function InnerContent(props) {
 
   return (
-    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
+    <div className='outer' style={{cursor:'pointer'}} value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
       <div className='inner'>{props.content}</div>
       <div className='inner'>{props.time}</div>
@@ -46,15 +46,19 @@ function MainPage() {
           const index1 = res.data[0].indexOf(':');
           const index2 = res.data[1].indexOf(':');
           let lunchArr = res.data[0].substring(index1 + 1);
-          console.log(lunchArr)
           let dinnerArr = res.data[1].substring(index2 + 1);
 
           if (index1 !== -1) {
             lunchArr = lunchArr.split(',');
+          } else {
+            lunchArr = [lunchArr];
           }
-          if (index1 !== -1) {
+          if (index2 !== -1) {
             dinnerArr = dinnerArr.split(',');
+          } else {
+            dinnerArr = [dinnerArr];
           }
+          console.log(lunchArr, dinnerArr);
 
           makeTable(lunchArr, lunchDom);
           makeTable(dinnerArr, dinnerDom);
@@ -73,7 +77,7 @@ function MainPage() {
     var idArray = [];
     for(var id of arr) idArray.push(id);
     axios.post('/api/get',{idArray:idArray}).then((res)=>{
-      const reverseArr = res.data.reverse().slice(0,8); // 8개만 띄우기
+      const reverseArr = res.data.reverse().slice(0,6); // 8개만 띄우기
       setList(reverseArr);
       console.log(reverseArr);
     })
@@ -99,7 +103,7 @@ function MainPage() {
         <div className='dinnerTable'></div>
       </div>
       <div className='mainpageUnder'>
-        <div>메뉴에 대한 이야기</div>
+        <div style={{paddingLeft:'1%'}}>메뉴에 대한 이야기</div>
         <div className='contentCover'>
           {list.map((item, index) => {
             return (

@@ -13,12 +13,14 @@ import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘)
 import CommuPageYes from './Component/CommuPageYes'; // 학식 커뮤 화면(어제)
 import Writing from './Component/Writing'; // 글 작성 화면
 import ShowContent from './Component/ShowContent'; // 게시글 보는 화면
+//import ModifyContent from './Component/ModifyContent'; // 게시글 수정하는 화면
 
 import {
   BrowserRouter as Router,
   Routes,
   Route,
 } from "react-router-dom";
+import ModifyContent from './Component/ModifyContent';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -35,6 +37,7 @@ root.render(
           <Route path="/mealtalk/yesterday" element={<CommuPageYes />} /> 
           <Route path="/writing" element={<Writing />} />
           <Route path="/showcontent/:id" element={<ShowContent />}/>
+          <Route path="/modifycontent/:id" element={<ModifyContent />}/>
         </Routes>
       </Router>
     </div>
@@ -45,3 +48,4 @@ root.render(
 );
 
 reportWebVitals();
+// <Route path="/modifycontent/:id" element={<ModifyContent />}/>
\ No newline at end of file