재개정 선택박스 양식 수정.

북마크 모달 내 재개정 선택 박스 추가.

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

@@ -2,12 +2,15 @@ import {React, useCallback, useEffect, useState} from "react";
 import Modal from "react-bootstrap/Modal";
 import * as EgovNet from "../../api/egovFetch";
 import {VwDiv} from "./Vw.style";
+import Form from "react-bootstrap/Form";
 
 const BookmarkModal = ({docCode, docPart}) => {
     const [modalTitle, setModalTitle] = useState();
     const [modalBody, setModalBody] = useState();
+    const [docInfoSeq, setDocInfoSeq] = useState();
+    const [docInfo, setDocInfo] = useState();
 
-    const getModalContent = useCallback(() => {
+    const getModalContent = useCallback((docInfoSeq) => {
         EgovNet.requestFetch(
             '/standardCode/getCodeDetailInfo.do',
             {
@@ -16,6 +19,7 @@ const BookmarkModal = ({docCode, docPart}) => {
                     'Content-type': 'application/json'
                 },
                 body: JSON.stringify({
+                    docInfoSeq: docInfoSeq,
                     docCode: docCode,
                     docPart: docPart
                 })
@@ -25,8 +29,8 @@ const BookmarkModal = ({docCode, docPart}) => {
                 if(resp.result.document.length>0){
                     resp.result.document.forEach(function (item, index){
                         const isTitle = item.full_content.includes(item.group_title);
-                        if(isTitle){
+                        if(item.cont_label === docPart){
-                            setModalTitle(docCode + " " + item.group_title);
+                            setModalTitle(item.group_title);
                         }
                         if(item.full_content.includes("<table")){
                             item.full_content = item.full_content.replace('<table ', '<table class="table table-bordered "')
@@ -44,15 +48,59 @@ const BookmarkModal = ({docCode, docPart}) => {
         );
     })
 
+    const getCodeInfo = useCallback(() => {
+        console.groupCollapsed("EgovMain.getCodeInfo()");
+        EgovNet.requestFetch(
+            '/standardCode/getCodeInfo.do',
+            {
+                method: "POST",
+                headers: {
+                    'Content-type': 'application/json'
+                },
+                body: JSON.stringify({
+                    docCode: docCode
+                })
+            },
+            (resp) => {
+                const docInfo = resp.result.docInfo;
+                // 헤더 연도 선택지 구성
+                let headTag = [];
+                if(docInfo.length>0){
+                    let optionTag = [];
+                    docInfo.forEach(function (item, index){
+                        optionTag.push(
+                            <option value={item.doc_info_seq}
+                                    selected={docInfoSeq===item.doc_info_seq || (docInfoSeq===undefined && item.last_yn === 'Y')}>
+                                {item.doc_er==='E'?'재정':'개정'} {item.kcsc_cd} {item.doc_nm} :{item.doc_yr}
+                            </option>
+                        )
+                    })
+                    headTag.push(<Form.Select size="sm" onChange={docInfoSelectorChange}>{optionTag}</Form.Select>)
+                }else{
+                    headTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
+                }
+                setDocInfo(headTag);
+            }
+        )
+    })
+
+    const docInfoSelectorChange = useCallback((el) => {
+        setModalBody([<div>불러오는중</div>])
+        const docInfoSeq = el.target.value
+        setDocInfoSeq(docInfoSeq);
+        getModalContent(docInfoSeq);
+    })
+
     useEffect(() => {
         getModalContent();
+        getCodeInfo();
     }, []);
 
     return (
         <>
             <Modal.Header closeButton>
                 <Modal.Title>
-                    {modalTitle}
+                    {docInfo} {modalTitle}
                 </Modal.Title>
             </Modal.Header>
             <Modal.Body>

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

@@ -5,6 +5,7 @@ import Loading from '../../components/Loading'
 import BookmarkModal from './BookmarkModal';
 import {SbContainer} from './Sb.style'
 import {VwDiv, VwPtag} from './Vw.style'
+import Form from 'react-bootstrap/Form'
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Modal from 'react-bootstrap/Modal';
@@ -15,6 +16,7 @@ import CODE from "../../constants/code";
 function CodeViewer(props) {
     const [treeLoading, setTreeLoading] = useState(true);
     const [docLoading, setDocLoading] = useState(true);
+    const [selectFlag, setSelectFlag] = useState(false);
     const {linkedDocCode} = useParams();
     const [docInfoSeq, setDocInfoSeq] = useState()
     const [docCode, setDocCode] = useState(linkedDocCode !== undefined?linkedDocCode:props.docCode);
@@ -113,7 +115,7 @@ function CodeViewer(props) {
                             </option>
                         )
                     })
-                    headTag.push(<select onChange={docInfoSelectorChange}>{optionTag}</select>)
+                    headTag.push(<Form.Select size="sm" onChange={docInfoSelectorChange} disabled={selectFlag}>{optionTag}</Form.Select>)
                 }else{
                     headTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                 }
@@ -243,6 +245,7 @@ function CodeViewer(props) {
                 setDocSummary(summaryTag);
                 setDocDetail(detailTag);
                 setDocLoading(false);
+                setSelectFlag(false);
             },
             function (resp) {
                 console.log("err response : ", resp);
@@ -251,9 +254,14 @@ function CodeViewer(props) {
         console.groupEnd("EgovMain.getCodeDetailInfo()");
     },[]);
 
-    const docInfoSelectorChange = (el) => {
+    const docInfoSelectorChange = useCallback((el) => {
-        getCodeDetailInfo(el.target.value, null);
+        setDocSummary([<div></div>])
-    }
+        setDocDetail([<div>불러오는중</div>])
+        setSelectFlag(true);
+        const docInfoSeq = el.target.value
+        setDocInfoSeq(docInfoSeq);
+        getCodeDetailInfo(docInfoSeq, null);
+    })
     const actionAppend = (el) => {
         if(!el) return;
         if(el.childNodes.length===0){
@@ -365,7 +373,7 @@ function CodeViewer(props) {
                     <Col xs={12} className="border-bottom">
                         <Row>
                             <Col xs={3}></Col>
-                            <Col xs={9}>{docInfo}</Col>
+                            <Col xs={"auto"}>{docInfo}</Col>
                         </Row>
                     </Col>
                     <Col xs={3} className="border-end viewerDiv">