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

import React, { useState, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import SbItem from './SbItem'
import {SbContainer} from './Sb.style'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import * as EgovNet from 'api/egovFetch';

function CodeViewer(props) {
    const [docCode, setDocCode] = useState(props.docCode);
    const [docName, setDocName] = useState(props.docName);
    const [codeTree, setCodeTree] = useState();
    const [docSummary, setDocSummary] = useState();
    const [docDetail, setDocDetail] = useState();

    console.group("viewer");
    console.log("[Start] viewer ------------------------------");
    console.log("viewer [props] : ", props);
    const location = useLocation();
    console.log("viewer [location] : ", location);
    console.log("viewer [docCode] : ", docCode);

    const updateDocCode = useCallback((docCode, docName)=>{
        setDocCode(docCode);
        setDocName(docName);
        getCodeDetailInfo(docCode);
    })

    const getCodeTree = useCallback(()=>{
        EgovNet.requestFetch(
            '/standardCode/getCodeTree.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({})
            },
            (resp) => {
                const menuData = resp.result.codeTree;
                // 코드 목록 트리 구성
                // https://garve32.tistory.com/52 참고
                const nest = (menuData, parent_seq = null, link = 'parent_seq') =>
                    menuData.filter(item => item[link] === parent_seq)
                        .map(item => ({ ...item, childrens: nest(menuData, item.seq) }));
                const tree = nest(menuData);
                let treeTag = [];
                if(tree.length>0){
                    treeTag.push(
                        <SbContainer>
                            {tree.map((subItem) =>
                                <SbItem item={subItem} updateDocCode={updateDocCode} />
                            )}
                        </SbContainer>
                    )
                }else{
                    treeTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                }
                setCodeTree(treeTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    })

    const getCodeDetailInfo = useCallback((docCode) => {
        console.groupCollapsed("EgovMain.getCodeDetailInfo()");
        EgovNet.requestFetch(
            '/standardCode/getCodeDetailInfo.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({
                    docCode: docCode
                })
            },
            (resp) => {
                // 목차 구성
                let summaryTag = [];
                // 문서 전문 구성
                let detailTag = [];
                if(resp.result.document.length>0){
                    resp.result.document.forEach(function (item, index){
                        if(item.full_content.includes(item.group_title)){
                            summaryTag.push(
                                <div><p href="#" onClick={() => {
                                    document.location.hash="#"+item.cont_type_cd;
                                }}>{item.group_title}</p></div>
                            )
                        }
                        detailTag.push(
                            <div id={item.cont_type_cd} dangerouslySetInnerHTML={ {__html: item.full_content} }></div>
                        )
                    })
                }else{
                    summaryTag.push(<li key="0">검색된 결과가 없습니다.</li>);
                }
                setDocSummary(summaryTag);
                setDocDetail(detailTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovMain.getCodeDetailInfo()");
    },[]);


    useEffect(() => {
        getCodeDetailInfo();
    }, []);
    useEffect(() => {
        getCodeTree();
    }, []);

    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={3} className="border-end viewerDiv">
                {docSummary}
            </Col>
            <Col xs={6} className="viewerDiv">
                {docDetail}
            </Col>
        </Row>
    );
}


export default CodeViewer;