viewer.js 수정.

불필요한 useCallback() 삭제.
useEffect() 결합.
한 item에 여러 링크가 있는 경우 반영.

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/kcscDev.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/kcscDev.iml" filepath="$PROJECT_DIR$/.idea/kcscDev.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

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)
-	public ResultVO selectStandardCode(@RequestBody StandardCodeVO param, @AuthenticationPrincipal LoginVO user)
+	@PostMapping(value = "/getCodeDetailInfo.do", consumes = MediaType.APPLICATION_JSON_VALUE)
+	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/components/EgovFooter.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 function EgovFooter() {
+    if(window.location.pathname==="/standardCode/viewer"){
+        return null;
+    }else{
         return (
             <div className="footer">
                 <div className="inner">
@@ -31,6 +34,7 @@ function EgovFooter() {
                 </div>
             </div>
         );
+    }
 }
 
 export default EgovFooter;

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

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

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

@@ -305,3 +305,8 @@
     .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{height: calc(100vh - 180px); overflow-y: auto;}
+    .openDoc{background-color: bisque;}
+    .docLink{background-color: aquamarine}
+    .docLink:hover{cursor: pointer}

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

@@ -29,6 +29,18 @@ export const SbTitle = styled.div`
   }
 `;
 
+export const VwDiv = styled.div`
+  display: flex;
+  align-items: center;
+  padding-left: ${props => (props.depth * 10)}px;
+  color: ${props => (props.isTitle?'darkcyan':'black')};
+  padding-top: ${props => (props.isTitle?'10':'')}px;
+`;
+
+export const VwPtag = styled.p`
+  cursor: ${props => (props.isTitle?'pointer':'')};
+`;
+
 // 제일 하위메뉴에서 클릭할 Link
 export const SbLink = styled(Link)`
   color: inherit;

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

@@ -1,15 +1,26 @@
 import {React, useState} from 'react'
-import { useNavigate } from 'react-router-dom';
-import {SbTitle, SbSub, SbLink} from './Sb.style'
+import {SbTitle, SbSub} from './Sb.style'
 import { FcFolder, FcOpenedFolder, FcFile } from 'react-icons/fc'
 import { AiOutlinePlusSquare, AiOutlineMinusSquare } from 'react-icons/ai'
 
-const SbItem = ({ item }) => {
-    const [collapsed, setCollapsed] = useState(false);
-    const navigate = useNavigate();
+const SbItem = ({item, openDocCode, updateDocCode}) => {
+    const find = (array, openDocCode) => {
+        var result;
+        array.some(o => result = o.doc_code === openDocCode ? o : find(o.childrens || [], openDocCode));
+        return result;
+    };
+    const collapsedFlag = find(item.childrens, openDocCode) !== undefined;
+    // openDocCode === item.doc_code+' '+item.doc_code_name
+    const [collapsed, setCollapsed] = useState(collapsedFlag);
     function toggleCollapse() {
         setCollapsed(prevValue => !prevValue);
     }
+    function changeOpenDoc(seq){
+        const prevOpenDoc = window.document.getElementsByClassName("openDoc")[0];
+        prevOpenDoc.className = prevOpenDoc.className.replace('openDoc', '');
+        const nextOpenDoc = window.document.getElementById("doc"+seq);
+        nextOpenDoc.className = nextOpenDoc.className+' openDoc';
+    }
 
     if(item.childrens.length > 0){
         const icon1 = collapsed?<AiOutlinePlusSquare />:<AiOutlineMinusSquare />;
@@ -19,7 +30,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} openDocCode={openDocCode} updateDocCode={updateDocCode} />
                     ))}
                 </SbSub>
             </div>
@@ -27,15 +38,11 @@ const SbItem = ({ item }) => {
     }else{
         const icon = <FcFile />;
         return (
-            <SbTitle depth={item.doc_level}>
-                {/*<a onClick={()=>{
-                    navigate('/standardCode/viewer', {
-                        state:{
-                            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 depth={item.doc_level} id={`doc${item.seq}`} className={item.doc_code === openDocCode?'openDoc':''}>
+                <a onClick={()=>{
+                    changeOpenDoc(item.seq)
+                    updateDocCode(item.doc_code, item.doc_code_name)
+                }}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</a>
             </SbTitle>
         )
     }

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

@@ -1,14 +1,15 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import SbItem from './SbItem'
-import {SbContainer} from './Sb.style'
+import {SbContainer, VwDiv, VwPtag} 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(useParams());
+    const {linkedDocCode} = useParams();
+    const [docCode, setDocCode] = useState(linkedDocCode !== undefined?linkedDocCode:props.docCode);
+    const [docName, setDocName] = useState(props.docName);
     const [codeTree, setCodeTree] = useState();
     const [docSummary, setDocSummary] = useState();
     const [docDetail, setDocDetail] = useState();
@@ -20,22 +21,22 @@ function CodeViewer(props) {
     console.log("viewer [location] : ", location);
     console.log("viewer [docCode] : ", docCode);
 
+    const updateDocCode = (docCode, docName)=>{
+        setDocCode(docCode);
+        setDocName(docName);
+        getCodeDetailInfo(docCode);
+    }
 
-    const retrieveList = useCallback(() => {
-        console.groupCollapsed("EgovMain.retrieveList()");
-        const retrieveListURL = '/standardCode/viewer.do';
-        const requestOptions = {
+    const getCodeTree = ()=>{
+        EgovNet.requestFetch(
+            '/standardCode/getCodeTree.do',
+            {
                 method: "POST",
                 headers: {
                     'Content-type': 'application/json'
                 },
-            body: JSON.stringify({
-                docCode: docCode
-            })
-        }
-
-        EgovNet.requestFetch(retrieveListURL,
-            requestOptions,
+                body: JSON.stringify({})
+            },
             (resp) => {
                 const menuData = resp.result.codeTree;
                 // 코드 목록 트리 구성
@@ -48,8 +49,8 @@ function CodeViewer(props) {
                 if(tree.length>0){
                     treeTag.push(
                         <SbContainer>
-                            {tree.map((subItem, index) =>
-                                <SbItem item={subItem} key={index} />
+                            {tree.map((subItem) =>
+                                <SbItem item={subItem} openDocCode={docCode} updateDocCode={updateDocCode} />
                             )}
                         </SbContainer>
                     )
@@ -57,18 +58,59 @@ 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){
+                    const reg = /([A-Z]{3,5}(\s[0-9]{2}){3,4})/g
                     resp.result.document.forEach(function (item, index){
+                        const isTitle = item.full_content.includes(item.group_title);
+                        if(isTitle){
                             summaryTag.push(
-                            <div>{item.group_title}</div>
+                                <VwDiv depth={item.cont_level} isTitle={isTitle}>
+                                    <VwPtag href="#" isTitle={isTitle} onClick={() => {
+                                        document.location.hash="#"+item.cont_type_cd;
+                                    }}>
+                                        {item.group_title}
+                                    </VwPtag>
+                                </VwDiv>
                             )
+                        }
+                        if(reg.test(item.full_content)){
+                            const docCodeAry = item.full_content.match(reg);
+                            const docCodeLink = [];
+                            for(let i=0; i<docCodeAry.length; i++) {
+                                docCodeLink.push('<a class="docLink" href="/standardCode/viewer/' + docCode + '" target="_blank">' + docCode + '</a>')
+                            }
+                            for(let i=0; i<docCodeAry.length; i++){
+                                const docCode = docCodeAry[i];
+                                item.full_content = item.full_content.replaceAll(docCode, docCodeLink[i]);
+                            }
+                        }
                         detailTag.push(
-                            <div dangerouslySetInnerHTML={ {__html: item.full_content} }></div>
+                            <VwDiv depth={item.cont_level} isTitle={isTitle} id={item.cont_type_cd} dangerouslySetInnerHTML={ {__html: item.full_content} }></VwDiv>
                         )
                     })
                 }else{
@@ -81,30 +123,41 @@ function CodeViewer(props) {
                 console.log("err response : ", resp);
             }
         );
-        console.groupEnd("EgovMain.retrieveList()");
+        console.groupEnd("EgovMain.getCodeDetailInfo()");
     },[]);
 
 
     useEffect(() => {
-        retrieveList();
-    }, [retrieveList]);
+        getCodeTree();
+        getCodeDetailInfo(docCode);
+    }, []);
 
     console.log("------------------------------viewer [End]");
     console.groupEnd("viewer");
     return (
+        <Row className="mx-0">
+            <Col xs={12} className="border-bottom">
                 <Row>
-            <Col xs={3} className="border-end">
+                    <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>
     );
 }
 
+CodeViewer.defaultProps = {
+    docCode: 'KDS 21 45 00',
+    docName: '가설교량 및 노면복공 설계기준'
+}
 
 export default CodeViewer;

egovframe-template-simple-react-contribution/src/routes/index.jsx

@@ -225,8 +225,9 @@ const SecondRoutes = () => {
 		{/* 사이트관리자 암호 바꾸기 기능 추가 2023.04.15(토) 김일국 */}
 		<Route path={URL.ADMIN_MANAGER} element={<EgovAdminPasswordUpdate />} />
 
-        {/*기준코드*/}
+        {/*기준코드 뷰어*/}
         <Route path={URL.STANDARD_CODE_VIEWER} element={<CodeViewer mode={CODE.MODE_READ} />} />
+        <Route path={URL.STANDARD_CODE_VIEWER_LINK} element={<CodeViewer mode={CODE.MODE_READ} />} />
 
       </Routes>
       <EgovFooter />