기준코드 뷰어 목차, 내용 css 추가.

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/viewer.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useLocation } 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';
@@ -84,15 +84,20 @@ function CodeViewer(props) {
                 let detailTag = [];
                 if(resp.result.document.length>0){
                     resp.result.document.forEach(function (item, index){
-                        if(item.full_content.includes(item.group_title)){
+                        const isTitle = item.full_content.includes(item.group_title);
+                        if(isTitle){
                             summaryTag.push(
-                                <div><p href="#" onClick={() => {
-                                    document.location.hash="#"+item.cont_type_cd;
-                                }}>{item.group_title}</p></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>
                             )
                         }
                         detailTag.push(
-                            <div id={item.cont_type_cd} 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{