기준코드 뷰어 작업중.

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

@@ -20,6 +20,7 @@ export const SbSub = styled.div`
 export const SbTitle = styled.div`
   display: flex;
   align-items: center;
+  background-color: ${props => props.isOpen ? 'bisque' : ''};
   padding-left: ${props => 30+(props.depth * 10)}px;
   height: 32px;
   &:hover {

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

@@ -3,12 +3,22 @@ import {SbTitle, SbSub} from './Sb.style'
 import { FcFolder, FcOpenedFolder, FcFile } from 'react-icons/fc'
 import { AiOutlinePlusSquare, AiOutlineMinusSquare } from 'react-icons/ai'
 
-const SbItem = ({item, updateDocCode}) => {
-
-    const [collapsed, setCollapsed] = useState(false);
+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);
+    const [isOpenDoc, setIsOpenDoc] = useState(item.doc_code === openDocCode);
     function toggleCollapse() {
         setCollapsed(prevValue => !prevValue);
     }
+    function changeOpenDoc(){
+        setIsOpenDoc(prevValue => !prevValue)
+    }
 
     if(item.childrens.length > 0){
         const icon1 = collapsed?<AiOutlinePlusSquare />:<AiOutlineMinusSquare />;
@@ -18,7 +28,7 @@ const SbItem = ({item, updateDocCode}) => {
                 <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} updateDocCode={updateDocCode} />
+                        <SbItem item={child} openDocCode={openDocCode} updateDocCode={updateDocCode} />
                     ))}
                 </SbSub>
             </div>
@@ -26,8 +36,9 @@ const SbItem = ({item, updateDocCode}) => {
     }else{
         const icon = <FcFile />;
         return (
-            <SbTitle depth={item.doc_level}>
+            <SbTitle depth={item.doc_level} isOpen={isOpenDoc}>
                 <a onClick={()=>{
+                    changeOpenDoc()
                     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

@@ -49,7 +49,7 @@ function CodeViewer(props) {
                     treeTag.push(
                         <SbContainer>
                             {tree.map((subItem) =>
-                                <SbItem item={subItem} updateDocCode={updateDocCode} />
+                                <SbItem item={subItem} openDocCode={docCode} updateDocCode={updateDocCode} />
                             )}
                         </SbContainer>
                     )
@@ -115,7 +115,7 @@ function CodeViewer(props) {
 
 
     useEffect(() => {
-        getCodeDetailInfo();
+        getCodeDetailInfo(docCode);
     }, []);
     useEffect(() => {
         getCodeTree();
@@ -144,5 +144,9 @@ function CodeViewer(props) {
     );
 }
 
+CodeViewer.defaultProps = {
+    docCode: 'KDS 21 45 00',
+    docName: '가설교량 및 노면복공 설계기준'
+}
 
 export default CodeViewer;