Commit 309d4ea9 authored by Ha YeaJin's avatar Ha YeaJin
Browse files

card component 생성

parent ded7f980
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
...@@ -125,7 +125,6 @@ function Apply(props) { ...@@ -125,7 +125,6 @@ function Apply(props) {
</h3> </h3>
<div className="form-group"> <div className="form-group">
<div className={touched.date && errors.date ? "text-danger" : ""}>신청날짜</div> <div className={touched.date && errors.date ? "text-danger" : ""}>신청날짜</div>
<input <input
className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")} className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}
......
...@@ -2,26 +2,29 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -2,26 +2,29 @@ import React, { useState, useEffect, useRef } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios'; import axios from 'axios';
import { Link } from 'react-router-dom'; 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() { function Notice() {
const [user, setUser] = useState({ role: "" })
const [notices, setNotices] = useState([]); const [notices, setNotices] = useState([]);
// const [show, setShow] = useState(false);
useEffect(() => { useEffect(() => {
acheck();
getNotice(); getNotice();
}, []); }, []);
function dateForm(day) { function acheck() {
const post_day = new Date(day); axios.get(`/users/${localStorage.getItem('_id')}`)
let year = post_day.getFullYear(); .then(res => {
let month = post_day.getMonth() + 1; if (res.data.role == "admin") {
let date = post_day.getDate(); setUser(res.data)
}
month = month < 10 ? '0' + month : month; }).catch(err => {
date = date < 10 ? '0' + date : date; alert(err.error)
});
const new_date = year + "-" + month + "-" + date;
return new_date
} }
function getNotice() { function getNotice() {
...@@ -42,17 +45,21 @@ function Notice() { ...@@ -42,17 +45,21 @@ function Notice() {
<Container fluid> <Container fluid>
<Row className="justify-content-center vw-100 vh-90"> <Row className="justify-content-center vw-100 vh-90">
<Col md={7}> <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> <Accordion>
{notices.map((notice, index) => {notices.map((notice, index) => <CARD card_index={index} title={notice.notice_title} date={notice.post_date} content={notice.notice_content} />
<Card> )}
<Card.Header> {/* <Card>
<Accordion.Toggle as={Button} variant="link" eventKey={index + 1}>{notice.notice_title} <span className="text-right">{dateForm(notice.post_date)}</span></Accordion.Toggle> <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> </Card.Header>
<Accordion.Collapse eventKey={index + 1}> <Accordion.Collapse eventKey={index + 1}>
<Card.Body>{notice.notice_content}</Card.Body> <Card.Body><pre>{notice.notice_content}</pre></Card.Body>
</Accordion.Collapse> </Accordion.Collapse>
</Card>)} </Card> */}
</Accordion> </Accordion>
</Col> </Col>
</Row> </Row>
......
...@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom'; ...@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import * as Yup from 'yup'; import * as Yup from 'yup';
import axios from 'axios'; 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'; import { Field, Formik } from 'formik';
function Write() { function Write() {
...@@ -67,7 +67,7 @@ function Write() { ...@@ -67,7 +67,7 @@ function Write() {
// </Form.Group> // </Form.Group>
// </Form> // </Form>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} className="d-flex flex-column">
<div className="form-group"> <div className="form-group">
<div className={touched.name && errors.name ? "text-danger" : ""}>제목</div> <div className={touched.name && errors.name ? "text-danger" : ""}>제목</div>
<input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")} <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
...@@ -79,14 +79,10 @@ function Write() { ...@@ -79,14 +79,10 @@ function Write() {
<div className="form-group "> <div className="form-group ">
<div className={touched.name && errors.name ? "text-danger" : ""}>내용</div> <div className={touched.name && errors.name ? "text-danger" : ""}>내용</div>
<input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")} <Field as="textarea" rows={8} style={{ "min-width": "100%" }}
type="text" {...getFieldProps('content')} />
content="content"
{...getFieldProps('content')}
placeholder="내용" />
</div> </div>
<Button className="mb-2" variant="dark" type="submit" disabled={isSubmitting}>공지 등록</Button>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>공지 등록</button>
</form> </form>
)} )}
</Formik> </Formik>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment