diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index c7e5a16..ee4b9cf 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -306,4 +306,5 @@
     .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;}
\ No newline at end of file
+    .viewerDiv{height: calc(100vh - 180px); overflow-y: auto;}
+    .openDoc{background-color: bisque;}
\ No newline at end of file
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/Sb.style.js b/egovframe-template-simple-react-contribution/src/pages/standardCode/Sb.style.js
index 4a0bb54..582e6cc 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/Sb.style.js
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/Sb.style.js
@@ -20,7 +20,6 @@ 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 {
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/SbItem.js b/egovframe-template-simple-react-contribution/src/pages/standardCode/SbItem.js
index 5ee9d64..2d78bf9 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/SbItem.js
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/SbItem.js
@@ -12,12 +12,14 @@ const SbItem = ({item, openDocCode, updateDocCode}) => {
     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)
+    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){
@@ -36,9 +38,9 @@ const SbItem = ({item, openDocCode, updateDocCode}) => {
     }else{
         const icon = <FcFile />;
         return (
-            <SbTitle depth={item.doc_level} isOpen={isOpenDoc}>
+            <SbTitle depth={item.doc_level} id={`doc${item.seq}`} className={item.doc_code === openDocCode?'openDoc':''}>
                 <a onClick={()=>{
-                    changeOpenDoc()
+                    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>