퍼블 업뎃

egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx

@@ -19,6 +19,8 @@ import {getLocalItem, setLocalItem} from "utils/storage";
 import URL from 'constants/url';
 import CODE from "constants/code";
 
+import CustomModal from './EgovModal';
+import { useCookies } from "react-cookie";
 
 function a11yProps(index) {
     return {
@@ -27,6 +29,27 @@ function a11yProps(index) {
     };
 }
 
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`wrapped-tabpanel-${index}`}
+            aria-labelledby={`wrapped-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{ p: 3 }}>
+                    <Typography component="div">{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+
 function EgovMain(props) {
     console.group("EgovMain");
     console.log("[Start] EgovMain ------------------------------");
@@ -39,6 +62,19 @@ function EgovMain(props) {
     const [user, setUser] = useState(parseJwt(getLocalItem('accessToken')) || null);
     console.log(user);
 
+    // 모달 상태 및 콘텐츠 관리
+    const [show, setShow] = React.useState(false);
+    const [modalContent, setModalContent] = React.useState({});
+    const [showModals, setShowModals] = useState([]);
+    const [cookies, setCookie] = useCookies([`MainModal_${modalContent.id}`]);
+
+    const handleShow = (content) => {
+        setShowModals(prev => [...prev, content]);
+    };
+    const handleClose = (id) => {
+        setShowModals(prev => prev.filter(modal => modal.id !== id));
+    };
+
     const handlePlusClick = (currentTabValue) => {
         const urls = [
             URL.SUPPORT_LIST_NOCODE+'/KCSC-NOT',
@@ -182,6 +218,36 @@ function EgovMain(props) {
     //     retrieveList();
     // }, [retrieveList]);
 
+    useEffect(() => {
+        // 모달 콘텐츠 배열
+        const modalContents = [
+            {
+                id: 1,
+                title: `제목 제목 제목 제목 제목 제목 1`,
+                body: `내용 내용 내용 내용 내용 내용 내용 내용 내용 내용\\n내용 내용 내용 내용 내용 내용 내용 내용 내용 내용\\n내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 1`,
+                files: [
+                    { name: '파일1.txt', imageSrc: '/assets/images/file.png' },
+                    { name: '파일2.txt', imageSrc: '/assets/images/file.png' }
+                ]
+            },
+            {
+                id: 2,
+                title: `제목 2`,
+                body: `내용 2\n내용 2`,
+                files: [
+                    { name: '파일3.txt', imageSrc: '/assets/images/file.png' },
+                    { name: '파일4.txt', imageSrc: '/assets/images/file.png' }
+                ]
+            }
+        ];
+
+        // 쿠키가 없는 모달만 열기
+        modalContents.forEach(content => {
+            if (!cookies[`MainModal_${content.id}`]) {
+                handleShow(content);
+            }
+        });
+    }, [cookies]);
 
     const onChangeLogin = (user) => {
         setUser(user);
@@ -798,30 +864,19 @@ function EgovMain(props) {
                     </Slider>
                 </div>
             </div>
+
+            {showModals.map(modalContent => (
+                <CustomModal
+                    key={modalContent.id}
+                    show={true}
+                    handleClose={() => handleClose(modalContent.id)}
+                    modalContent={modalContent}
+                />
+            ))}
         </div>
 
     );
 }
 
 
-function TabPanel(props) {
-    const { children, value, index, ...other } = props;
-
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`wrapped-tabpanel-${index}`}
-            aria-labelledby={`wrapped-tab-${index}`}
-            {...other}
-        >
-            {value === index && (
-                <Box sx={{ p: 3 }}>
-                    <Typography component="div">{children}</Typography>
-                </Box>
-            )}
-        </div>
-    );
-}
-
 export default EgovMain;

egovframe-template-simple-react-contribution/src/pages/main/EgovModal.jsx

@@ -0,0 +1,70 @@
+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"}>
+                <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;