기준코드 뷰어 수정중.

egovframe-template-simple-react-contribution/src/components/Loading.jsx

@@ -1,10 +1,16 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Blocks} from "react-loader-spinner";
 import {LoadingDiv} from "./Loading.style";
 
-function Loading () {
+function Loading ({loadingState}) {
+    const [visible, setVisible] = useState(loadingState);
+
+    useEffect(() => {
+        setVisible(loadingState)
+    }, [loadingState]);
+
     return (
-        <LoadingDiv>
+        <LoadingDiv $visible={visible}>
             <Blocks
                 height="150"
                 width="150"

egovframe-template-simple-react-contribution/src/components/Loading.style.jsx

@@ -4,4 +4,5 @@ export const LoadingDiv = styled.div`
   min-height: 83vh;
   padding-top: calc(40vh - 150px);
   padding-left: calc(54vw - 150px);
+  display: ${props=>props.$visible?"block":"none"};
 `

egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx

@@ -1,12 +1,12 @@
 import React, {useState, useCallback} from 'react';
-import {Link, useParams} from 'react-router-dom';
+import {useParams} from 'react-router-dom';
 
 import * as EgovNet from 'api/egovFetch';
 import DownloadModal from './DownloadModal'
 import StandardCodeSearchForm from "./StandardCodeSearchForm";
 import Loading from "components/Loading";
 import StandardCodeList from "./StandardCodeList";
-import URL from "constants/url";
+
 import Modal from "react-bootstrap/Modal";
 import HistoryModal from "./HistoryModal";
 
@@ -87,7 +87,7 @@ function StandardCodePage({}) {
                                                 <span>즐겨찾기</span>
                                             </div>
                                             {
-                                                listLoading?(<Loading/>):(
+                                                listLoading?(<Loading loadingState={true}/>):(
                                                     <StandardCodeList listData={listData} filterData={filterData} getHistoryModal={historyModal}/>
                                                 )
                                             }

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

@@ -15,6 +15,7 @@ import CODE from "constants/code";
 import {parseJwt} from "utils/parseJwt";
 import Button from "react-bootstrap/Button";
 import {InputGroup} from "react-bootstrap";
+import ViewerTree from "./ViewerTree";
 
 function CodeViewer(props) {
     const [treeLoading, setTreeLoading] = useState(true);
@@ -24,7 +25,6 @@ function CodeViewer(props) {
     const [docCode, setDocCode] = useState(linkedDocCode !== undefined?linkedDocCode.split(':')[0]:props.docCode);
     const [ymd, setYmd] = useState(linkedDocCode !== undefined?linkedDocCode.split(':')[1]:props.ymd);
     const [docInfo, setDocInfo] = useState();
-    const [codeTree, setCodeTree] = useState();
     const [docSummary, setDocSummary] = useState();
     const [docDetail, setDocDetail] = useState();
     const [errorSelector, setErrorSelector] = useState();
@@ -49,53 +49,12 @@ function CodeViewer(props) {
     console.log("viewer [docCode] : ", docCode);
 
     const updateDocCode = (docCode)=>{
-        setDocSummary([<div></div>])
-        setDocDetail([<div>불러오는중</div>])
-        setDocInfo([])
+        setDocLoading(true);
         setDocCode(docCode);
         getCodeInfo(docCode);
         getCodeDetailInfo(docCode);
     }
 
-    const getCodeTree = ()=>{
-        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} openDocCode={docCode} updateDocCode={updateDocCode} />
-                            )}
-                        </SbContainer>
-                    )
-                }else{
-                    treeTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
-                }
-                setCodeTree(treeTag);
-                setTreeLoading(false);
-            },
-            function (resp) {
-                console.log("err response : ", resp);
-            }
-        );
-    }
-
     const getCodeInfo = useCallback((docCode) => {
         console.groupCollapsed("EgovMain.getCodeInfo()");
         EgovNet.requestFetch(
@@ -309,6 +268,7 @@ function CodeViewer(props) {
         clickBtn.parentElement.querySelector("p").className += " yearInfoActive"
         getCodeDetailInfo(clickBtn.dataset.doccode, clickBtn.dataset.ymd);
     })
+
     const actionAppend = (el) => {
         if(!el) return;
         if(el.childNodes.length===0){
@@ -431,7 +391,6 @@ function CodeViewer(props) {
     }
 
     useEffect(() => {
-        getCodeTree();
         getCodeInfo(docCode);
         getCodeDetailInfo(docCode);
     }, []);
@@ -440,48 +399,49 @@ function CodeViewer(props) {
     console.groupEnd("viewer");
     return (
         <>
-            {treeLoading || docLoading? (<Loading/>):(
-                <Row className="mx-0">
-                    <Col xs={12} className="border-bottom">
-                        <Row>
-                            <Col xs={3}></Col>
-                            <Col xs={9}>
-                                <Row className="justify-content-between">
-                                    <Col xs={"auto"}>
-                                        <Row>
-                                            <Col xs={"auto"}>{docInfo}</Col>
-                                            <Col>
-                                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="연혁"/>
-                                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="2단비교"/>
-                                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="신구조문"/>
-                                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="첨부파일"/>
-                                            </Col>
-                                        </Row>
-                                    </Col>
-                                    <Col xs={"auto"}>
-                                        <InputGroup>
-                                            <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"}/>
-                                            {errorSelector}
-                                        </InputGroup>
-                                    </Col>
-                                </Row>
-                            </Col>
-                        </Row>
-                    </Col>
-                    <Col xs={colList[0]} className={`border-end viewerDiv ${colList[0]===3?'':'d-none'}`}>
-                        {codeTree}
-                    </Col>
-                    <Col xs={colList[1]} className="border-end viewerDiv">
-                        <div>
-                            <Button size={"sm"} variant={"outline-secondary"} onClick={treeControl}>{colList[0]===3?'트리 접기':'트리 펼치기'}</Button>
-                        </div>
-                        {docSummary}
-                    </Col>
-                    <Col xs={colList[2]} className="viewerDiv detailInfoDiv" ref={actionAppend}>
-                        {docDetail}
-                    </Col>
-                </Row>
-                )}
+            {/*{treeLoading || docLoading? ():()}*/}
+            <Loading loadingState={treeLoading || docLoading}/>
+            <Row className={`mx-0 ${treeLoading || docLoading?'d-none':''}`}>
+                <Col xs={12} className="border-bottom">
+                    <Row>
+                        <Col xs={3}></Col>
+                        <Col xs={9}>
+                            <Row className="justify-content-between">
+                                <Col xs={"auto"}>
+                                    <Row>
+                                        <Col xs={"auto"}>{docInfo}</Col>
+                                        <Col>
+                                            <input type="button" className="btn btn-sm btn-primary optionBtn" value="연혁"/>
+                                            <input type="button" className="btn btn-sm btn-primary optionBtn" value="2단비교"/>
+                                            <input type="button" className="btn btn-sm btn-primary optionBtn" value="신구조문"/>
+                                            <input type="button" className="btn btn-sm btn-primary optionBtn" value="첨부파일"/>
+                                        </Col>
+                                    </Row>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <InputGroup>
+                                        <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"}/>
+                                        {errorSelector}
+                                    </InputGroup>
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                </Col>
+                <Col xs={colList[0]} className={`border-end viewerDiv ${colList[0]===3?'':'d-none'}`}>
+                    {/*{codeTree}*/}
+                    <ViewerTree docCode={docCode} updateDocCode={updateDocCode} setTreeLoading={setTreeLoading}/>
+                </Col>
+                <Col xs={colList[1]} className="border-end viewerDiv">
+                    <div>
+                        <Button size={"sm"} variant={"outline-secondary"} onClick={treeControl}>{colList[0]===3?'트리 접기':'트리 펼치기'}</Button>
+                    </div>
+                    {docSummary}
+                </Col>
+                <Col xs={colList[2]} className="viewerDiv detailInfoDiv" ref={actionAppend}>
+                    {docDetail}
+                </Col>
+            </Row>
             <Modal show={show} onHide={handleClose} size="xl" keyboard={false} scrollable>
                 {bookMarkModal}
             </Modal>
@@ -490,8 +450,8 @@ function CodeViewer(props) {
 }
 
 CodeViewer.defaultProps = {
-    docCode: 'KCS 24 31 10',
-    docName: '용접(한계상태설계법)'
+    docCode: 'KDS 11 10 15',
+    docName: '지반계측'
 }
 
 export default CodeViewer;

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

@@ -1,9 +1,40 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {SbContainer} from "./Sb.style";
 import SbItem from "./SbItem";
+import * as EgovNet from "api/egovFetch";
 
 
-function ViewerTree({docCode, updateDocCode}){
+function ViewerTree({docCode, updateDocCode, setTreeLoading}){
+    const [tree, setTree] = useState([]);
+    function getCodeTree(){
+        EgovNet.requestFetch(
+            '/standardCode/code-tree',
+            {
+                method: "GET",
+                headers: {
+                    'Content-type': 'application/json'
+                }
+            },
+            (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) }));
+                setTree(nest(menuData));
+                setTreeLoading(false);
+            },
+            function (resp) {
+                console.log("err response : ", resp);
+            }
+        );
+    }
+
+    useEffect(() => {
+        getCodeTree()
+    }, []);
+
     return (
         <SbContainer>
             {tree.map((subItem) =>

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/standardCode/StandardCodeController.java

@@ -61,7 +61,7 @@ public class StandardCodeController extends BaseController {
 			@ApiResponse(responseCode = "200", description = "조회 성공"),
 			@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
 	})
-	@RequestMapping(method = RequestMethod.POST, value = "/getCodeTree.do", consumes = MediaType.APPLICATION_JSON_VALUE)
+	@RequestMapping(method = RequestMethod.GET, value = "/code-tree")
 	public ResultVO getCodeTree() throws Exception {
 		ResultVO resultVO = new ResultVO();
 		Map<String, Object> resultMap = new HashMap<>();