북마크 온클릭 이벤트 추가.

북마크 모달 추가

egovframe-template-simple-react-contribution/src/css/page.css

@@ -313,8 +313,8 @@
         background-color: palegreen
     }
     .docLink:hover{cursor: pointer}
-    .docPart{
+    .bookmark{
         color: forestgreen;
     }
-    .docPart:hover{cursor: pointer}
+    .bookmark:hover{cursor: pointer}
     .errorText{color:red; font-size: x-small; vertical-align: bottom; padding-right: 10px;}

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

@@ -4,6 +4,8 @@ import SbItem from './SbItem'
 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) {
@@ -13,6 +15,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();
 
     console.group("viewer");
     console.log("[Start] viewer ------------------------------");
@@ -21,6 +26,9 @@ 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);
@@ -64,7 +72,6 @@ function CodeViewer(props) {
             }
         );
     }
-
     const getCodeDetailInfo = useCallback((docCode) => {
         console.groupCollapsed("EgovMain.getCodeDetailInfo()");
         EgovNet.requestFetch(
@@ -83,6 +90,7 @@ function CodeViewer(props) {
                 let summaryTag = [];
                 // 문서 전문 구성
                 let detailTag = [];
+
                 if(resp.result.document.length>0){
                     const docLinkReg = /([A-Z]{3,5}(\s[0-9]{2}){3,4})/g
                     const docPartReg = /\((?:표|그림|부록)?\s*([A-Z]\.)?(?!\d\))\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\)/g // /(\((?:표|그림|부록)?\s*([A-Z]\.)?\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\))/g
@@ -115,7 +123,7 @@ function CodeViewer(props) {
                                 for(let i=0; i<docPartAry.length; i++) {
                                     const docPart = docPartAry[i];
                                     docPartMap.set(docPart, docPart +
-                                        '<key class="docPart">'+
+                                        '<key class="bookmark" data-doccode="'+docCode+'" data-docpart="'+docPart+'">'+
                                         '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4z"></path><path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1H4.268z"></path></svg>'+
                                         '</key>');
                                 }
@@ -147,6 +155,20 @@ function CodeViewer(props) {
         console.groupEnd("EgovMain.getCodeDetailInfo()");
     },[]);
 
+    const bookmarkBtnActionAppend = (el) =>{
+        if(!el) return;
+        if(el.childNodes.length===0){
+            return
+        }else{
+            const bookmarkList = el.getElementsByClassName("bookmark")
+            for(let bookmark of bookmarkList){
+                bookmark.onclick = () => {
+                    debugger
+                    // handleShow()
+                }
+            }
+        }
+    }
 
     useEffect(() => {
         getCodeTree();
@@ -156,23 +178,40 @@ function CodeViewer(props) {
     console.log("------------------------------viewer [End]");
     console.groupEnd("viewer");
     return (
-        <Row className="mx-0">
-            <Col xs={12} className="border-bottom">
-                <Row>
-                    <Col xs={3}></Col>
-                    <Col xs={9}>{docCode} {docName}</Col>
-                </Row>
-            </Col>
-            <Col xs={3} className="border-end viewerDiv">
-                {codeTree}
-            </Col>
-            <Col xs={2} className="border-end viewerDiv">
-                {docSummary}
-            </Col>
-            <Col xs={7} className="viewerDiv">
-                {docDetail}
-            </Col>
-        </Row>
+        <>
+            <Row className="mx-0">
+                <Col xs={12} className="border-bottom">
+                    <Row>
+                        <Col xs={3}></Col>
+                        <Col xs={9}>{docCode} {docName}</Col>
+                    </Row>
+                </Col>
+                <Col xs={3} className="border-end viewerDiv">
+                    {codeTree}
+                </Col>
+                <Col xs={2} className="border-end viewerDiv">
+                    {docSummary}
+                </Col>
+                <Col xs={7} className="viewerDiv" ref={bookmarkBtnActionAppend}>
+                    {docDetail}
+                </Col>
+            </Row>
+            <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>
+        </>
     );
 }