모달 분리

egovframe-template-simple-react-contribution/src/pages/standardCode/BookmarkModal.js

@@ -0,0 +1,41 @@
+import { React, useState } from "react";
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
+import * as EgovNet from "../../api/egovFetch";
+
+const BookmarkModal = ({state, docCode, docPart}) => {
+    const [show, setShow] = useState(state);
+    const [modalTitle, setModalTitle] = useState();
+    const [modalBody, setModalBody] = useState();
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+    /*EgovNet.requestFetch(
+        "",
+        "",
+        (resp) => {
+            setModalTitle();
+            setModalBody();
+        },
+        (resp) => {
+            console.log("err response : ", resp);
+        }
+    );*/
+    return (
+        <Modal show={show} onHide={handleClose} size="xl" backdrop="static" keyboard={false}>
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    {modalTitle}
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {modalBody}
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Close
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
+export default BookmarkModal

egovframe-template-simple-react-contribution/src/pages/standardCode/viewer.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import SbItem from './SbItem'
+import BookmarkModal from './BookmarkModal';
 import {SbContainer, VwDiv, VwPtag} from './Sb.style'
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal'
 import * as EgovNet from 'api/egovFetch';
 
 function CodeViewer(props) {
@@ -15,9 +14,9 @@ function CodeViewer(props) {
     const [codeTree, setCodeTree] = useState();
     const [docSummary, setDocSummary] = useState();
     const [docDetail, setDocDetail] = useState();
-    const [show, setShow] = useState(false);
+
-    const [modalTitle, setModalTitle] = useState();
+
-    const [modalBody, setModalBody] = useState();
+    const [bookMarkModal, setBookMarkModal] = useState();
 
     console.group("viewer");
     console.log("[Start] viewer ------------------------------");
@@ -26,9 +25,6 @@ function CodeViewer(props) {
     console.log("viewer [location] : ", location);
     console.log("viewer [docCode] : ", docCode);
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
-
     const updateDocCode = (docCode, docName)=>{
         setDocCode(docCode);
         setDocName(docName);
@@ -163,8 +159,7 @@ function CodeViewer(props) {
             const bookmarkList = el.getElementsByClassName("bookmark")
             for(let bookmark of bookmarkList){
                 bookmark.onclick = () => {
-                    debugger
+                    setBookMarkModal(<BookmarkModal state="true"/>)/*docCode={} docPart={}*/
-                    // handleShow()
                 }
             }
         }
@@ -196,21 +191,7 @@ function CodeViewer(props) {
                     {docDetail}
                 </Col>
             </Row>
-            <Modal show={show} onHide={handleClose} size="xl" backdrop="static" keyboard={false}>
+            {bookMarkModal}
-                <Modal.Header closeButton>
-                    <Modal.Title>
-                        {modalTitle}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    {modalBody}
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={handleClose}>
-                        Close
-                    </Button>
-                </Modal.Footer>
-            </Modal>
         </>
     );
 }