card component 생성

server/client/src/Components/Card.js

+import React, { useState, useContext } from 'react';
+import { Card, Accordion, Col, AccordionContext, useAccordionToggle } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Text = styled(Card.Body)`
+    & .WRAP {
+        display: inline-block;
+        text-overflow: ellipsis;
+        width: 100%;
+        white-space: initial;
+    }
+`
+
+function Notice({ card_index, title, date, content }) {
+    function ContextAwareToggle({ children, eventKey, callback }) {
+        const currentEventKey = useContext(AccordionContext);
+
+        const decoratedOnClick = useAccordionToggle(
+            eventKey,
+            () => callback && callback(eventKey),
+        );
+
+        const isCurrentEventKey = currentEventKey === eventKey;
+        return (
+            <div
+                className={isCurrentEventKey ? "text-wrap whiteSpace-initial" : "text-truncate"}
+                onClick={decoratedOnClick}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    function dateForm(day) {
+        const post_day = new Date(day);
+        let year = post_day.getFullYear();
+        let month = post_day.getMonth() + 1;
+        let date = post_day.getDate();
+
+        month = month < 10 ? '0' + month : month;
+        date = date < 10 ? '0' + date : date;
+
+        const new_date = year + "-" + month + "-" + date;
+        return new_date
+    }
+
+    return (
+        <Card className="w-100">
+            <Card.Header className="row flex-row py-3">
+                <Col md={10} xs={8} >
+                    <ContextAwareToggle variant="link" eventKey={card_index + 1}>{title}</ContextAwareToggle>
+                </Col>
+                <Col md={2} xs={4} className="p-0" >{dateForm(date)}</Col>
+            </Card.Header>
+            <Accordion.Collapse eventKey={card_index + 1}>
+                <Text><pre className="text-overflow-ellipsis w-100 white-space-initial">{content}</pre></Text>
+            </Accordion.Collapse>
+        </Card >
+    )
+}
+
+export default Notice;
\ No newline at end of file

server/client/src/Pages/ApplyPage.js

@@ -125,7 +125,6 @@ function Apply(props) {
                                         </h3>
 
                                         <div className="form-group">
-
                                             <div className={touched.date && errors.date ? "text-danger" : ""}>신청날짜</div>
                                             <input
                                                 className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}

server/client/src/Pages/NoticePage.js

@@ -2,26 +2,29 @@ import React, { useState, useEffect, useRef } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
-import { Container, Row, Col, Card, Accordion, Button } from 'react-bootstrap';
+import { Container, Row, Col, Button, Accordion } from 'react-bootstrap';
+import CARD from '../Components/Card';
 
 function Notice() {
+    const [user, setUser] = useState({ role: "" })
     const [notices, setNotices] = useState([]);
 
+    // const [show, setShow] = useState(false);
+
     useEffect(() => {
+        acheck();
         getNotice();
     }, []);
 
-    function dateForm(day) {
-        const post_day = new Date(day);
-        let year = post_day.getFullYear();
-        let month = post_day.getMonth() + 1;
-        let date = post_day.getDate();
-
-        month = month < 10 ? '0' + month : month;
-        date = date < 10 ? '0' + date : date;
-
-        const new_date = year + "-" + month + "-" + date;
-        return new_date
+    function acheck() {
+        axios.get(`/users/${localStorage.getItem('_id')}`)
+            .then(res => {
+                if (res.data.role == "admin") {
+                    setUser(res.data)
+                }
+            }).catch(err => {
+                alert(err.error)
+            });
     }
 
     function getNotice() {
@@ -42,17 +45,21 @@ function Notice() {
             <Container fluid>
                 <Row className="justify-content-center vw-100 vh-90">
                     <Col md={7}>
-                        <h2 className="p-3 border-bottom">공지사항 <Link to="/write">글 작성</Link></h2>
+                        <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.Header>
-                                        <Accordion.Toggle as={Button} variant="link" eventKey={index + 1}>{notice.notice_title} <span className="text-right">{dateForm(notice.post_date)}</span></Accordion.Toggle>
+                            {notices.map((notice, index) => <CARD card_index={index} title={notice.notice_title} date={notice.post_date} content={notice.notice_content} />
+                            )}
+                            {/* <Card>
+                                    <Card.Header className="d-flex justify-content-space-between">
+                                        <Accordion.Toggle as={Button} variant="link" eventKey={index + 1} className={"d-inline-block " + (show ? "text-wrap" : "text-truncate")} onClick={() => setShow(!show)}>{notice.notice_title}</Accordion.Toggle>
+                                        <span className="d-flex align-items-center" style={{ width: "50%" }}>{dateForm(notice.post_date)}</span>
                                     </Card.Header>
                                     <Accordion.Collapse eventKey={index + 1}>
-                                        <Card.Body>{notice.notice_content}</Card.Body>
+                                        <Card.Body><pre>{notice.notice_content}</pre></Card.Body>
                                     </Accordion.Collapse>
-                                </Card>)}
+                                </Card> */}
+
                         </Accordion>
                     </Col>
                 </Row>

server/client/src/Pages/WritePage.js

@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
 import * as Yup from 'yup';
 import axios from 'axios';
-import { Container, Row, Col, Form } from 'react-bootstrap';
+import { Container, Row, Col, Button } from 'react-bootstrap';
 import { Field, Formik } from 'formik';
 
 function Write() {
@@ -67,7 +67,7 @@ function Write() {
                                 //     </Form.Group>
                                 // </Form>
 
-                                <form onSubmit={handleSubmit}>
+                                <form onSubmit={handleSubmit} className="d-flex flex-column">
                                     <div className="form-group">
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>제목</div>
                                         <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
@@ -79,14 +79,10 @@ function Write() {
 
                                     <div className="form-group ">
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>내용</div>
-                                        <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
-                                            type="text"
-                                            content="content"
-                                            {...getFieldProps('content')}
-                                            placeholder="내용" />
+                                        <Field as="textarea" rows={8} style={{ "min-width": "100%" }}
+                                        {...getFieldProps('content')} />
                                     </div>
-
-                                    <button type="submit" className="btn btn-dark" disabled={isSubmitting}>공지 등록</button>
+                                    <Button className="mb-2" variant="dark" type="submit" disabled={isSubmitting}>공지 등록</Button>
                                 </form>
                             )}
                         </Formik>