공지사항 삭제, 수정기능 구현중

server/client/package.json

@@ -26,7 +26,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"

server/client/src/Components/Card.js

-import React, { useState, useContext } from 'react';
-import { Card, Accordion, Col, AccordionContext, useAccordionToggle } from 'react-bootstrap';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { Card, Accordion, Col, AccordionContext, useAccordionToggle, Button } from 'react-bootstrap';
 import styled from 'styled-components';
 
 const Text = styled(Card.Body)`
@@ -11,7 +13,7 @@ const Text = styled(Card.Body)`
     }
 `
 
-function Notice({ card_index, title, date, content }) {
+function Notice({ card_id, card_index, title, date, content, admin }) {
     function ContextAwareToggle({ children, eventKey, callback }) {
         const currentEventKey = useContext(AccordionContext);
 
@@ -44,6 +46,18 @@ function Notice({ card_index, title, date, content }) {
         return new_date
     }
 
+    function remove (card_id) {
+        axios.delete(`/notices/${card_id}`)
+            .then(res => {
+                if (res.status === 404) return alert(res.data.error)
+                alert("삭제되었습니다!");
+                window.location.reload();
+            })
+            .catch(err => {
+                alert(err.error)
+            });
+    }
+
     return (
         <Card className="w-100">
             <Card.Header className="row flex-row py-3">
@@ -53,9 +67,16 @@ function Notice({ card_index, title, date, content }) {
                 <Col md={2} xs={4} className="p-0" >{dateForm(date)}</Col>
             </Card.Header>
             <Accordion.Collapse eventKey={card_index + 1}>
-                <Text>{content.split("\n").map((i, key) => {
+                <Text>
+                    {content.split("\n").map((i, key) => {
                         return <div key={key}>{i}</div>;
-                })}</Text>
+                    })}
+                    {admin === "admin" ? (
+                        <div className="d-flex justify-content-end">
+                            <Button variant="primary" size="sm" as={Link} to={`/write/revise/${card_id}`}>수정</Button>
+                            <Button variant="danger" size="sm" onClick={() => remove(card_id)}>삭제</Button>
+                        </div>) : null}
+                </Text>
             </Accordion.Collapse>
         </Card >
     )

server/client/src/Pages/ApplyPage.js

@@ -14,6 +14,7 @@ function Apply(props) {
     useEffect(() => {
         getUser();
     }, [])
+    
     if (state.ok==="no") return <Redirect to="/" />;
     if (state.ok==="ok") {
         return <Redirect to={{

server/client/src/Pages/CheckPage.js

@@ -2,8 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import { Redirect } from 'react-router-dom';
 import axios from 'axios';
-import Table from 'react-bootstrap/Table'
-import { Container } from 'react-bootstrap';
+import { Container, Table } from 'react-bootstrap';
 import styled from 'styled-components';
 
 const Ta = styled(Table)`
@@ -26,7 +25,6 @@ margin-top: 0.5em;
     align-items: center;
     margin: 10px;
   };
-
 `
 
 function Check(props) {
@@ -52,7 +50,7 @@ function Check(props) {
                     setState(true);
                 }
                 console.log(res.data);
-                const reserves=res.data.filter(function(item) {
+                const reserves = res.data.filter(function(item) {
                         return item !== '';
                       });
                 setReserve(reserves);

server/client/src/Pages/NoticePage.js

@@ -2,11 +2,10 @@ import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
 import { Link, Redirect } from 'react-router-dom';
-import { Container, Row, Col, Card, Accordion, Button } from 'react-bootstrap';
+import { Container, Row, Col, Accordion, Button } from 'react-bootstrap';
 import CARD from '../Components/Card';
 
 function Notice() {
-    const [show, setShow] = useState(false);
     const [notices, setNotices] = useState([]);
     const [user, setUser] = useState({ role: "" })
     const [state, setState] = useState()
@@ -40,7 +39,7 @@ function Notice() {
         axios.get(`/notices`)
             .then(res => {
                 if (res.status !== 201) {
-                    // alert(res.data.error);
+                    alert(res.data.error);
                 }
                 setNotices(res.data);
             })
@@ -58,7 +57,7 @@ function Notice() {
                         <h2 className="p-3 border-bottom d-flex justify-content-between">공지사항 {user.role === "admin" ? (
                             <Button as={Link} to="/write">글 작성</Button>) : null}</h2>
                         <Accordion>
-                            {notices.map((notice, index) => <CARD card_index={index} title={notice.notice_title} date={notice.post_date} content={notice.notice_content} />
+                            {notices.map((notice, index) => <CARD card_id={notice._id} card_index={index} title={notice.notice_title} date={notice.post_date} content={notice.notice_content} admin={user.role} />
                             )}
                         </Accordion>
                     </Col>

server/client/src/Pages/WritePage.js

 import React, { useState, useEffect } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
 import * as Yup from 'yup';
 import axios from 'axios';
 import { Container, Row, Col, Button } from 'react-bootstrap';
 import { Field, Formik } from 'formik';
 
-function Write() {
-    const [submitData, setSubmitData] = useState(false);
+function Write({ match }) {
     const [state, setState] = useState(false);
+    const [revision, setRevision] = useState({ title: '', content: '' });
+    // const [isadmin, setIsadmin] = useState({ok:""});
+    // const [user, setUser] = useState({ role: "" })
+
+    // if (isadmin.ok==="no") return <Redirect to="/" />;
+
+    useEffect(() => {
+        getOne(match.params.id)
+    }, [])
 
     if (state) {
         return <Redirect to="/notice" />;
     }
+
+    function getOne (id) {
+        if (id) {
+            axios.get(`/notices/${id}`)
+                .then(res => {
+                    if (res.status !== 201) {
+                        alert(res.data.error);
+                    }
+                    setRevision({ title: res.data.notice_title, content: res.data.notice_content })
+                })
+                .catch(err => {
+                    alert(err.error)
+                });
+        }
+    };
+
+    // function putData (match, revision) {
+    //     if (!match.params.id) return { title: '', content: '' }
+    //     else return { title: revision.notice_title, content: revision.notice_content }
+    // };
+
+    // function acheck() {
+    //     axios.get(`/users/${localStorage.getItem('_id')}`, {
+    //         headers: { authorization: localStorage.getItem('token') },
+    //     })
+    //         .then(res => {
+    //             if (res.status !== 201) {
+    //                 alert(res.data.error);
+    //                 localStorage.clear();
+    //                 setIsadmin({ok:"no"});
+    //             }
+    //             if (res.data.role == "admin") {
+    //                 setUser(res.data)
+    //             }
+    //         }).catch(err => {
+    //             alert(err.error)
+    //         });  
+    // }
+
     return (
         <div>
-            <Menu />
+            {console.log("revision", revision.title, revision.content)}
+            <Menu/>
             <Container fluid>
                 <Row className="justify-content-center">
                     <Col md={5} xs={11} className="pt-3" >
                         <Formik
-                            initialValues={{ title: '', content: '' }}
+                            initialValues={{title: revision.title, content: revision.content}}
                             validationSchema={Yup.object({
                                 title: Yup.string()
                                     .required('제목을 입력해주세요.'),
@@ -28,6 +76,7 @@ function Write() {
                                     .required('내용을 입력해주세요.'),
                             })}
                             onSubmit={(values, { setSubmitting }) => {
+                                if (!match.params.id) {
                                     axios({
                                         method: 'post',
                                         url: '/writes',
@@ -40,7 +89,21 @@ function Write() {
                                         .catch(err => {
                                             alert(err.error)
                                         });
-
+                                } else {
+                                    axios({
+                                        method: 'put',
+                                        url: '/writes/${id}',
+                                        data: values,
+                                    })
+                                        .then(res => {
+                                            if (res.status === 404) return alert(res.data.error)
+                                            alert("공지 수정이 완료되었습니다.")
+                                            setState(true);
+                                        })
+                                        .catch(err => {
+                                            alert(err.error)
+                                        });
+                                }
                                 setTimeout(() => {
                                     setSubmitting(false);
                                 }, 400);  // finish the cycle in handler
@@ -61,13 +124,13 @@ function Write() {
                                             {...getFieldProps('title')}
                                             placeholder="제목" />
                                     </div>
-
-                                    <div className="form-group ">
+                                    {console.log(revision.title)}
+                                    <div className="form-group">
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>내용</div>
                                         <Field as="textarea" rows={8} style={{ "min-width": "100%" }}
                                             {...getFieldProps('content')} />
                                     </div>
-                                    <Button className="mb-2" variant="dark" type="submit" disabled={isSubmitting}>공지 등록</Button>
+                                    <Button className="mb-2" variant="dark" type="submit" disabled={isSubmitting}>{match.params.id ? "공지 수정" : "공지 등록"}</Button>
                                 </form>
                             )}
                         </Formik>

server/client/src/index.js

@@ -33,6 +33,7 @@ ReactDOM.render(
       <Route path="/change" component={Change} />
       <Route path="/apply/:id" component={Apply} />
       <Route path="/check/:id" component={Check} />
+      <Route path="/write/revise/:id" component={Write} />
       <Route path="/write" component={Write} />
       <Route path="/notice" component={Notice} />
       <Route path="/acheck/:id" component={ACheck} />

server/routes/notices.js

@@ -9,12 +9,33 @@ router.get('/', function (req, res, next) {
             res.status(201).json(notices);
         })
         .catch((err) => {
-            console.error(err);
-
             next(err);
         });
     // res.status(404).json({error:"없음."})
     res.status(201).json(notices);
 });
 
+router.get('/:id', function (req, res, next) {
+    Notice.findOne({ _id: req.params.id }, function (err, notice) {
+        if (err) return res.status(500).json({ error: err });
+        console.log("FindOne", notice)
+        res.status(201).json(notice);
+    })
+});
+
+router.delete('/:id', function (req, res, next) {
+    Notice.findOne({ _id: req.params.id }, function (err, notice) {
+        if (err) return res.status(500).json({ error: err });
+        notice.remove()
+            .then(() => {
+                console.log();
+                res.status(201).json();
+            })
+            .catch((err) => {
+                console.error(err);
+                next(err);
+            });
+    })
+});
+
 module.exports = router;
\ No newline at end of file

server/routes/writes.js

@@ -25,4 +25,23 @@ router.post('/', function (req, res, next) {
         });
 });
 
+router.put('/:id', function (req, res, next) {
+    console.log('/writes put req.body', req.params)
+    Notice.findOne({ _id: req.params.id }, function (err, notice) {
+        if (err) return res.status(500).json({ error: err });
+        notice.notice_title = req.body.title + "  (수정)";
+        notice.post_date = req.body.post_date;
+        notice.notice_content = req.body.content;
+        notice.save()
+            .then((result) => {
+                console.log(result);
+                res.status(201).json(result);
+            })
+            .catch((err) => {
+                console.error(err);
+                next(err);
+            });
+    });
+});
+
 module.exports = router;
\ No newline at end of file