기준코드 뷰어 작업중.

egovframe-template-simple-backend-contribution/src/main/java/egovframework/dbnt/kcsc/standardCode/StandardCodeController.java

@@ -213,6 +213,25 @@ public class StandardCodeController {
 	private final StandardCodeService standardCodeService;
 
 
+	@Operation(
+			summary = "건설기준코드 트리 조회",
+			description = "건설기준코드 트리 조회",
+			tags = {"StandardCodeController"}
+	)
+	@ApiResponses(value = {
+			@ApiResponse(responseCode = "200", description = "조회 성공"),
+			@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
+	})
+	@PostMapping(value = "/getCodeTree.do", consumes = MediaType.APPLICATION_JSON_VALUE)
+	public ResultVO getCodeTree(@RequestBody StandardCodeVO param, @AuthenticationPrincipal LoginVO user)
+			throws Exception {
+		ResultVO resultVO = new ResultVO();
+		Map<String, Object> resultMap = new HashMap<>();
+		resultMap.put("codeTree", standardCodeService.selectStandardCodeTree());
+		resultVO.setResult(resultMap);
+		return resultVO;
+	}
+
 	@Operation(
 			summary = "건설기준코드 내용 조회",
 			description = "건설기준코드 내용 조회",
@@ -222,12 +241,11 @@ public class StandardCodeController {
 			@ApiResponse(responseCode = "200", description = "조회 성공"),
 			@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
 	})
-	@PostMapping(value = "/viewer.do", consumes = MediaType.APPLICATION_JSON_VALUE)
+	@PostMapping(value = "/getCodeDetailInfo.do", consumes = MediaType.APPLICATION_JSON_VALUE)
-	public ResultVO selectStandardCode(@RequestBody StandardCodeVO param, @AuthenticationPrincipal LoginVO user)
+	public ResultVO getCodeDetailInfo(@RequestBody StandardCodeVO param, @AuthenticationPrincipal LoginVO user)
 			throws Exception {
 		ResultVO resultVO = new ResultVO();
 		Map<String, Object> resultMap = new HashMap<>();
-		resultMap.put("codeTree", standardCodeService.selectStandardCodeTree());
 		resultMap.put("document", standardCodeService.selectStandardCodeDocument(param));
 		resultVO.setResult(resultMap);
 		return resultVO;

egovframe-template-simple-react-contribution/src/constants/url.js

@@ -77,7 +77,7 @@ const URL = {
 
     //기준코드
     STANDARD_CODE_LIST          : "/standardCode/list", //건설기준코드/리스트
-    STANDARD_CODE_VIEWER        : "/standardCode/viewer/:docCode", //건설기준코드/뷰어
+    STANDARD_CODE_VIEWER        : "/standardCode/viewer", //건설기준코드/뷰어
 }
 
 export default URL;

egovframe-template-simple-react-contribution/src/css/page.css

@@ -305,3 +305,5 @@
     .calendar_info ul li::before {content: ""; display: block; position: absolute; left: 20px; top: 27px; width: 2px; height: 2px; background: #222;}
     .calendar_info ul li a {color: #222; font-size: 16px; font-weight: 300;}
     .calendar_info ul li span {position: absolute; right: 15px; top: 15px; color: #808080; font-size: 16px; font-weight: 300;}
+
+    .viewerDiv{max-height: 650px; overflow-y: auto;}

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

@@ -1,12 +1,11 @@
 import {React, useState} from 'react'
-import { useNavigate } from 'react-router-dom';
+import {SbTitle, SbSub} from './Sb.style'
-import {SbTitle, SbSub, SbLink} from './Sb.style'
 import { FcFolder, FcOpenedFolder, FcFile } from 'react-icons/fc'
 import { AiOutlinePlusSquare, AiOutlineMinusSquare } from 'react-icons/ai'
 
-const SbItem = ({ item }) => {
+const SbItem = ({item, updateDocCode}) => {
+
     const [collapsed, setCollapsed] = useState(false);
-    const navigate = useNavigate();
     function toggleCollapse() {
         setCollapsed(prevValue => !prevValue);
     }
@@ -19,7 +18,7 @@ const SbItem = ({ item }) => {
                 <SbTitle depth={item.doc_level} onClick={toggleCollapse}>{icon1}{icon2}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbTitle>
                 <SbSub isOpen={collapsed}>
                     {item.childrens.map((child) => (
-                        <SbItem item={child} />
+                        <SbItem item={child} updateDocCode={updateDocCode} />
                     ))}
                 </SbSub>
             </div>
@@ -28,14 +27,9 @@ const SbItem = ({ item }) => {
         const icon = <FcFile />;
         return (
             <SbTitle depth={item.doc_level}>
-                {/*<a onClick={()=>{
+                <a onClick={()=>{
-                    navigate('/standardCode/viewer', {
+                    updateDocCode(item.doc_code, item.doc_code_name)
-                        state:{
+                }}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</a>
-                            docCode: item.doc_code
-                        }
-                    })
-                }}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</a>*/}
-                <SbLink to={"/standardCode/viewer/"+item.doc_code}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbLink>
             </SbTitle>
         )
     }

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import SbItem from './SbItem'
 import {SbContainer} from './Sb.style'
 import Row from 'react-bootstrap/Row';
@@ -7,8 +7,8 @@ import Col from 'react-bootstrap/Col';
 import * as EgovNet from 'api/egovFetch';
 
 function CodeViewer(props) {
-
+    const [docCode, setDocCode] = useState(props.docCode);
-    const [{docCode}, setDocCode] = useState(useParams());
+    const [docName, setDocName] = useState(props.docName);
     const [codeTree, setCodeTree] = useState();
     const [docSummary, setDocSummary] = useState();
     const [docDetail, setDocDetail] = useState();
@@ -21,21 +21,23 @@ function CodeViewer(props) {
     console.log("viewer [docCode] : ", docCode);
 
 
-    const retrieveList = useCallback(() => {
+
-        console.groupCollapsed("EgovMain.retrieveList()");
+    const updateDocCode = useCallback((docCode, docName)=>{
-        const retrieveListURL = '/standardCode/viewer.do';
+        setDocCode(docCode);
-        const requestOptions = {
+        setDocName(docName);
+        getCodeDetailInfo(docCode);
+    })
+
+    const getCodeTree = useCallback(()=>{
+        EgovNet.requestFetch(
+            '/standardCode/getCodeTree.do',
+            {
                 method: "POST",
                 headers: {
                     'Content-type': 'application/json'
                 },
-            body: JSON.stringify({
+                body: JSON.stringify({})
-                docCode: docCode
+            },
-            })
-        }
-
-        EgovNet.requestFetch(retrieveListURL,
-            requestOptions,
             (resp) => {
                 const menuData = resp.result.codeTree;
                 // 코드 목록 트리 구성
@@ -48,8 +50,8 @@ function CodeViewer(props) {
                 if(tree.length>0){
                     treeTag.push(
                         <SbContainer>
-                            {tree.map((subItem, index) =>
+                            {tree.map((subItem) =>
-                                <SbItem item={subItem} key={index} />
+                                <SbItem item={subItem} updateDocCode={updateDocCode} />
                             )}
                         </SbContainer>
                     )
@@ -57,18 +59,42 @@ function CodeViewer(props) {
                     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>{item.group_title}</div>
+                                <div><p href="#" onClick={() => {
+                                    document.location.hash="#"+item.cont_type_cd;
+                                }}>{item.group_title}</p></div>
                             )
+                        }
                         detailTag.push(
-                            <div dangerouslySetInnerHTML={ {__html: item.full_content} }></div>
+                            <div id={item.cont_type_cd} dangerouslySetInnerHTML={ {__html: item.full_content} }></div>
                         )
                     })
                 }else{
@@ -81,25 +107,34 @@ function CodeViewer(props) {
                 console.log("err response : ", resp);
             }
         );
-        console.groupEnd("EgovMain.retrieveList()");
+        console.groupEnd("EgovMain.getCodeDetailInfo()");
     },[]);
 
 
     useEffect(() => {
-        retrieveList();
+        getCodeDetailInfo();
-    }, [retrieveList]);
+    }, []);
+    useEffect(() => {
+        getCodeTree();
+    }, []);
 
     console.log("------------------------------viewer [End]");
     console.groupEnd("viewer");
     return (
         <Row>
-            <Col xs={3} className="border-end">
+            <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">
+            <Col xs={3} className="border-end viewerDiv">
                 {docSummary}
             </Col>
-            <Col xs={6}>
+            <Col xs={6} className="viewerDiv">
                 {docDetail}
             </Col>
         </Row>