기준코드 뷰어 수정중.

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

@@ -13,10 +13,13 @@ import * as EgovNet from 'api/egovFetch';
 import {getLocalItem} from "utils/storage";
 import CODE from "constants/code";
 import {parseJwt} from "utils/parseJwt";
+import Button from "react-bootstrap/Button";
+import {InputGroup} from "react-bootstrap";
 
 function CodeViewer(props) {
     const [treeLoading, setTreeLoading] = useState(true);
     const [docLoading, setDocLoading] = useState(true);
+
     const {linkedDocCode} = useParams();
     const [docCode, setDocCode] = useState(linkedDocCode !== undefined?linkedDocCode.split(':')[0]:props.docCode);
     const [ymd, setYmd] = useState(linkedDocCode !== undefined?linkedDocCode.split(':')[1]:props.ymd);
@@ -29,6 +32,8 @@ function CodeViewer(props) {
     const [show, setShow] = useState(false);
     const [bookMarkModal, setBookMarkModal] = useState();
 
+    const [colList, setColList] = useState([3,2,7]);
+
 
     const sessionUser = parseJwt(getLocalItem('accessToken'));
     const sessionUserSe = sessionUser?.userSe;
@@ -417,6 +422,13 @@ function CodeViewer(props) {
             }
         )
     }
+    function treeControl(){
+        if(colList[0]===3){
+            setColList([0,3,9]);
+        }else{
+            setColList([3,2,7]);
+        }
+    }
 
     useEffect(() => {
         getCodeTree();
@@ -440,22 +452,32 @@ function CodeViewer(props) {
                                             <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="비교"/>
+                                                <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"}>{errorSelector}</Col>
+                                    <Col xs={"auto"}>
+                                        <InputGroup>
+                                            <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"}/>
+                                            {errorSelector}
+                                        </InputGroup>
+                                    </Col>
                                 </Row>
                             </Col>
                         </Row>
                     </Col>
-                    <Col xs={3} className="border-end viewerDiv">
+                    <Col xs={colList[0]} className={`border-end viewerDiv ${colList[0]===3?'':'d-none'}`}>
                         {codeTree}
                     </Col>
-                    <Col xs={2} className="border-end viewerDiv">
+                    <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={7} className="viewerDiv detailInfoDiv" ref={actionAppend}>
+                    <Col xs={colList[2]} className="viewerDiv detailInfoDiv" ref={actionAppend}>
                         {docDetail}
                     </Col>
                 </Row>

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

@@ -0,0 +1,16 @@
+import React from "react";
+import {SbContainer} from "./Sb.style";
+import SbItem from "./SbItem";
+
+
+function ViewerTree({docCode, updateDocCode}){
+    return (
+        <SbContainer>
+            {tree.map((subItem) =>
+                <SbItem item={subItem} openDocCode={docCode} updateDocCode={updateDocCode} />
+            )}
+        </SbContainer>
+    );
+}
+
+export default ViewerTree;