145 lines
5.7 KiB
JavaScript
145 lines
5.7 KiB
JavaScript
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 Col from "react-bootstrap/Col";
|
|
import Row from "react-bootstrap/Row";
|
|
|
|
const BookmarkModal = ({docCode, docPart, ymd}) => {
|
|
const [modalTitle, setModalTitle] = useState();
|
|
const [modalBody, setModalBody] = useState();
|
|
const [docInfo, setDocInfo] = useState();
|
|
|
|
const getModalContent = useCallback((selectedYmd) => {
|
|
EgovNet.requestFetch(
|
|
'/standardCode/getCodeDetailInfo.do',
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
'Content-type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
docCode: docCode,
|
|
docPart: docPart,
|
|
ymd: selectedYmd===undefined?ymd:selectedYmd
|
|
})
|
|
},
|
|
(resp) => {
|
|
let bodyTag = []
|
|
if(resp.result.document.length>0){
|
|
resp.result.document.forEach(function (item, index){
|
|
const isTitle = item.full_content.includes(item.group_title);
|
|
if(item.cont_label === docPart){
|
|
setModalTitle(item.group_title);
|
|
}
|
|
if(item.full_content.includes("<table")){
|
|
item.full_content = item.full_content.replace('<table ', '<table class="table table-bordered "')
|
|
}
|
|
bodyTag.push(
|
|
<VwDiv depth={item.cont_level} isTitle={isTitle} id={item.cont_type_cd} dangerouslySetInnerHTML={ {__html: item.full_content} }></VwDiv>
|
|
)
|
|
})
|
|
}
|
|
setModalBody(bodyTag);
|
|
},
|
|
(resp) => {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
})
|
|
|
|
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 = [];
|
|
let activeIndex = 0;
|
|
let docTitle = "";
|
|
docInfo.forEach(function (item, index){
|
|
if(new Date(item.rvsn_ymd) <= new Date(ymd)){
|
|
activeIndex = index;
|
|
docTitle = item.doc_nm
|
|
}
|
|
})
|
|
docInfo.forEach(function (item, index){
|
|
let buttonClass = "btn btn-sm modalDocInfoBtn "
|
|
let pClass = "modalYearInfo ";
|
|
if(item.doc_er === 'E'){
|
|
buttonClass += "btn-success "
|
|
}else{
|
|
buttonClass += "btn-primary "
|
|
}
|
|
if(index === activeIndex){
|
|
pClass += "modalYearInfoActive"
|
|
buttonClass += "modalDocInfoActive"
|
|
}
|
|
optionTag.push(
|
|
<Col xs={"auto"}>
|
|
<input type="button"
|
|
className={buttonClass}
|
|
value={item.doc_er==='E'?'제':'개'}
|
|
onClick={docInfoSelectorChange}
|
|
data-ymd={item.rvsn_ymd}/>
|
|
<br/>
|
|
<p className={pClass}>{item.doc_yr}</p>
|
|
</Col>)
|
|
})
|
|
headTag.push(
|
|
<Row className="docInfoRow justify-content-start">
|
|
<Col xs={"auto"} className="docInfoTitle">{docCode} {docTitle}</Col>
|
|
{optionTag}
|
|
</Row>
|
|
)
|
|
}else{
|
|
headTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
|
|
}
|
|
setDocInfo(headTag);
|
|
}
|
|
)
|
|
})
|
|
|
|
const docInfoSelectorChange = useCallback((el) => {
|
|
setModalBody([<div>불러오는중</div>])
|
|
const activeBtn = document.querySelector(".modalDocInfoActive")
|
|
activeBtn.className = activeBtn.className.replace('modalDocInfoActive', '').trim();
|
|
const activeP = document.querySelector(".modalYearInfoActive")
|
|
activeP.className = activeP.className.replace('modalYearInfoActive', '').trim();
|
|
const clickBtn = el.target;
|
|
clickBtn.className += " modalDocInfoActive";
|
|
clickBtn.parentElement.querySelector("p").className += " modalYearInfoActive"
|
|
getModalContent(clickBtn.dataset.ymd);
|
|
})
|
|
|
|
useEffect(() => {
|
|
getModalContent();
|
|
getCodeInfo();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Modal.Header className="bookmarkModalHeader" closeButton>
|
|
<Modal.Title>
|
|
{docInfo} {modalTitle}
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
{modalBody}
|
|
</Modal.Body>
|
|
</>
|
|
);
|
|
}
|
|
export default BookmarkModal |