70 lines
3.3 KiB
JavaScript
70 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import Modal from 'react-bootstrap/Modal';
|
|
import { Row, Col, Button } from 'react-bootstrap';
|
|
import { useCookies } from 'react-cookie';
|
|
|
|
const CustomModal = ({ show, handleClose, modalContent }) => {
|
|
const [dontShowAgain, setDontShowAgain] = React.useState(false);
|
|
const [cookies, setCookie] = useCookies([`MainModal_${modalContent.id}`]);
|
|
|
|
const handleCheckboxChange = () => {
|
|
const newDontShowAgain = !dontShowAgain;
|
|
setDontShowAgain(newDontShowAgain);
|
|
if (newDontShowAgain) {
|
|
const expirationDate = new Date();
|
|
expirationDate.setDate(expirationDate.getDate() + 1);
|
|
setCookie(`MainModal_${modalContent.id}`, "true", { expires: expirationDate });
|
|
handleClose();
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (cookies[`MainModal_${modalContent.id}`]) {
|
|
handleClose();
|
|
}
|
|
}, [cookies, modalContent.id, handleClose]);
|
|
|
|
return (
|
|
<Modal show={show} onHide={handleClose} backdrop="static">
|
|
<Modal.Header closeButton className={"bg-224 text-white rounded-0"}>
|
|
<Modal.Title className={"fs-6"}>{modalContent.title}</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body className={"px-4 pb-0"}>
|
|
<Row className={"pb-3"}>
|
|
<Col xs={12} className="text-start">
|
|
{modalContent.body && modalContent.body.split("\n").map((line, index) => (
|
|
<React.Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</React.Fragment>
|
|
))}
|
|
</Col>
|
|
</Row>
|
|
{modalContent.files && modalContent.files.map((file, index) => (
|
|
<Row key={index} className={`py-2 ${index === 0 ? 'border-top' : ''}`}>
|
|
<Col xs={1}><img src={file.imageSrc} className={"h_20"} alt="파일" /></Col>
|
|
<Col xs={11} className="text-start">{file.name}</Col>
|
|
</Row>
|
|
))}
|
|
{/*<Row className={"py-2 border-top"}>*/}
|
|
{/* <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
|
|
{/* <Col xs={11} className="text-start">파일명</Col>*/}
|
|
{/*</Row>*/}
|
|
{/*<Row className={"py-2"}>*/}
|
|
{/* <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
|
|
{/* <Col xs={11} className="text-start">파일명</Col>*/}
|
|
{/*</Row>*/}
|
|
{/*<Row className={"py-2"}>*/}
|
|
{/* <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
|
|
{/* <Col xs={11} className="text-start">파일명</Col>*/}
|
|
{/*</Row>*/}
|
|
</Modal.Body>
|
|
<Modal.Footer className={"h_30 py-1 mb-1 bg-fa"}>
|
|
<input type="checkbox" checked={dontShowAgain} onChange={handleCheckboxChange} id={`MainModal_${modalContent.id}`} />
|
|
<label className={"f_12"} htmlFor={`MainModal_${modalContent.id}`}> 오늘 하루 열지 않음</label>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default CustomModal; |