From a63a47a7b8b56fbed2481553085bf8b2ab2b5423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EC=84=9D=20=EC=B5=9C?= Date: Thu, 8 Feb 2024 15:46:10 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EC=A4=80=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=B7=B0=EC=96=B4=20=EC=88=98=EC=A0=95=EC=A4=91.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Loading.jsx | 12 +- .../src/components/Loading.style.jsx | 1 + .../standardCode/list/StandardCodePage.jsx | 6 +- .../pages/standardCode/viewer/CodeViewer.jsx | 136 +++++++----------- .../pages/standardCode/viewer/ViewerTree.jsx | 35 ++++- .../standardCode/StandardCodeController.java | 2 +- 6 files changed, 95 insertions(+), 97 deletions(-) diff --git a/egovframe-template-simple-react-contribution/src/components/Loading.jsx b/egovframe-template-simple-react-contribution/src/components/Loading.jsx index e5ef8fa..c85b469 100644 --- a/egovframe-template-simple-react-contribution/src/components/Loading.jsx +++ b/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 ( - + props.$visible?"block":"none"}; ` diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx b/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx index f2c018d..3c483c2 100644 --- a/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx +++ b/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({}) { 즐겨찾기 { - listLoading?():( + listLoading?():( ) } diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx index 6b0fec4..9423951 100644 --- a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx +++ b/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([
]) - setDocDetail([
불러오는중
]) - 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( - - {tree.map((subItem) => - - )} - - ) - }else{ - treeTag.push(
검색된 결과가 없습니다.
); // 코드 목록 초기값 - } - 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? ():( - - - - - - - - - {docInfo} - - - - - - - - - - - - {errorSelector} - - - - - - - - {codeTree} - - -
- -
- {docSummary} - - - {docDetail} - - - )} + {/*{treeLoading || docLoading? ():()}*/} + + + + + + + + + + {docInfo} + + + + + + + + + + + + {errorSelector} + + + + + + + + {/*{codeTree}*/} + + + +
+ +
+ {docSummary} + + + {docDetail} + + {bookMarkModal} @@ -490,8 +450,8 @@ function CodeViewer(props) { } CodeViewer.defaultProps = { - docCode: 'KCS 24 31 10', - docName: '용접(한계상태설계법)' + docCode: 'KDS 11 10 15', + docName: '지반계측' } export default CodeViewer; diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViewerTree.jsx b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViewerTree.jsx index 54d875f..0ae311e 100644 --- a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViewerTree.jsx +++ b/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 ( {tree.map((subItem) => diff --git a/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/standardCode/StandardCodeController.java b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/standardCode/StandardCodeController.java index cecf673..9274f8a 100644 --- a/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/standardCode/StandardCodeController.java +++ b/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 resultMap = new HashMap<>();