diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index 8116173..5302e82 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -336,4 +336,11 @@
 .docInfoTitle{white-space: nowrap;}
 .yearInfo{font-size: 9px}
 .yearInfoActive{color: #0d6efd}
-.docInfoBtn{--bs-btn-padding-y: 0.1rem;--bs-btn-padding-x: 0.25rem;--bs-btn-font-size: 0.7rem;}
\ No newline at end of file
+.docInfoBtn{--bs-btn-padding-y: 0.1rem;--bs-btn-padding-x: 0.25rem;--bs-btn-font-size: 0.7rem; filter: grayscale(100%);}
+.docInfoActive{filter: grayscale(0%);}
+.modalYearInfo{font-size: 9px}
+.modalYearInfoActive{color: #0d6efd}
+.modalDocInfoBtn{--bs-btn-padding-y: 0.1rem;--bs-btn-padding-x: 0.25rem;--bs-btn-font-size: 0.7rem; filter: grayscale(100%);}
+.modalDocInfoActive{filter: grayscale(0%);}
+.docInfoRow > .col{--bs-gutter-x: 0.5rem;}
+.bookmarkModalHeader{--bs-modal-title-line-height:1;}
\ No newline at end of file
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/BookmarkModal.js b/egovframe-template-simple-react-contribution/src/pages/standardCode/BookmarkModal.js
index 7e4bf03..0c4c746 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/BookmarkModal.js
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/BookmarkModal.js
@@ -3,14 +3,15 @@ import Modal from "react-bootstrap/Modal";
 import * as EgovNet from "../../api/egovFetch";
 import {VwDiv} from "./Vw.style";
 import Form from "react-bootstrap/Form";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
 
-const BookmarkModal = ({docCode, docPart}) => {
+const BookmarkModal = ({docCode, docPart, ymd}) => {
     const [modalTitle, setModalTitle] = useState();
     const [modalBody, setModalBody] = useState();
-    const [docInfoSeq, setDocInfoSeq] = useState();
     const [docInfo, setDocInfo] = useState();
 
-    const getModalContent = useCallback((docInfoSeq) => {
+    const getModalContent = useCallback((selectedYmd) => {
         EgovNet.requestFetch(
             '/standardCode/getCodeDetailInfo.do',
             {
@@ -19,9 +20,9 @@ const BookmarkModal = ({docCode, docPart}) => {
                     'Content-type': 'application/json'
                 },
                 body: JSON.stringify({
-                    docInfoSeq: docInfoSeq,
                     docCode: docCode,
-                    docPart: docPart
+                    docPart: docPart,
+                    ymd: selectedYmd===undefined?ymd:selectedYmd
                 })
             },
             (resp) => {
@@ -67,15 +68,38 @@ const BookmarkModal = ({docCode, docPart}) => {
                 let headTag = [];
                 if(docInfo.length>0){
                     let optionTag = [];
+                    let activeIndex = 0;
+                    let docTitle = "";
                     docInfo.forEach(function (item, index){
-                        optionTag.push(
-                            <option value={item.doc_info_seq}
-                                    selected={docInfoSeq===item.doc_info_seq || (docInfoSeq===undefined && item.last_yn === 'Y')}>
-                                {item.doc_er==='E'?'재정':'개정'} {item.kcsc_cd} {item.doc_nm} :{item.doc_yr}
-                            </option>
-                        )
+                        if(new Date(item.estb_ymd) <= new Date(ymd)){
+                            activeIndex = index;
+                            docTitle = item.doc_nm
+                        }
                     })
-                    headTag.push(<Form.Select size="sm" onChange={docInfoSelectorChange}>{optionTag}</Form.Select>)
+                    docInfo.forEach(function (item, index){
+                        let buttonClass = "btn btn-sm modalDocInfoBtn "
+                        let pClass = "modalYearInfo ";
+                        if(item.doc_er === 'E'){
+                            buttonClass += "btn-outline-success "
+                        }else{
+                            buttonClass += "btn-outline-primary "
+                        }
+                        if(index === activeIndex){
+                            pClass += "modalYearInfoActive"
+                            buttonClass += "modalDocInfoActive"
+                        }
+                        optionTag.push(
+                            <Col>
+                                <input type="button"
+                                       className={buttonClass}
+                                       value={item.doc_er==='E'?'재':'개'}
+                                       onClick={docInfoSelectorChange}
+                                       data-ymd={item.estb_ymd}/>
+                                <br/>
+                                <p className={pClass}>{item.doc_yr}</p>
+                            </Col>)
+                    })
+                    headTag.push(<Row className="docInfoRow"><Col className="docInfoTitle">{docCode} {docTitle}</Col>{optionTag}</Row>)
                 }else{
                     headTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                 }
@@ -86,9 +110,14 @@ const BookmarkModal = ({docCode, docPart}) => {
 
     const docInfoSelectorChange = useCallback((el) => {
         setModalBody([<div>불러오는중</div>])
-        const docInfoSeq = el.target.value
-        setDocInfoSeq(docInfoSeq);
-        getModalContent(docInfoSeq);
+        const activeBtn = document.querySelector(".modalDocInfoActive")
+        activeBtn.className = activeBtn.className.replace('modalDocInfoActive', '').trim();
+        const activeP = document.querySelector(".modalYearInfoActive")
+        activeP.className = activeP.className.replace('modalYearInfoActive', '').trim();
+        const clickBtn = el.target;
+        clickBtn.className += " modalDocInfoActive";
+        clickBtn.parentElement.querySelector("p").className += " modalYearInfoActive"
+        getModalContent(clickBtn.dataset.ymd);
     })
 
     useEffect(() => {
@@ -98,7 +127,7 @@ const BookmarkModal = ({docCode, docPart}) => {
 
     return (
         <>
-            <Modal.Header closeButton>
+            <Modal.Header className="bookmarkModalHeader" closeButton>
                 <Modal.Title>
                     {docInfo} {modalTitle}
                 </Modal.Title>
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer.js b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer.js
index 6b4d583..566b12f 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer.js
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer.js
@@ -45,6 +45,8 @@ function CodeViewer(props) {
     console.log("viewer [docCode] : ", docCode);
 
     const updateDocCode = (docCode, docName)=>{
+        setDocSummary([<div></div>])
+        setDocDetail([<div>불러오는중</div>])
         setDocCode(docCode);
         setDocName(docName);
         getCodeInfo(docCode);
@@ -111,17 +113,30 @@ function CodeViewer(props) {
                 if(docInfo.length>0){
                     let optionTag = [];
                     docInfo.forEach(function (item, index){
+                        let buttonClass = "btn btn-sm docInfoBtn "
+                        let pClass = "yearInfo ";
+                        if(item.doc_er === 'E'){
+                            buttonClass += "btn-outline-success "
+                        }else{
+                            buttonClass += "btn-outline-primary "
+                        }
+                        if(index === docInfo.length-1){
+                            pClass += "yearInfoActive"
+                            buttonClass += "docInfoActive"
+                        }
                         optionTag.push(
                             <Col>
                                 <input type="button"
-                                       className="btn btn-sm docInfoBtn btn-outline-secondary"
-                                       value={item.doc_er==='E'?'재':'개'} />
+                                       className={buttonClass}
+                                       value={item.doc_er==='E'?'재':'개'}
+                                       onClick={docInfoSelectorChange}
+                                       data-ymd={item.estb_ymd}/>
                                 <br/>
-                                <p className="yearInfo">{item.doc_yr}</p>
+                                <p className={pClass}>{item.doc_yr}</p>
                             </Col>)
 
                     })
-                    headTag.push(<Row><Col className="docInfoTitle">{docCode} {docName}</Col>{optionTag}</Row>)
+                    headTag.push(<Row className="docInfoRow"><Col className="docInfoTitle">{docCode} {docName}</Col>{optionTag}</Row>)
                 }else{
                     headTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                 }
@@ -152,6 +167,7 @@ function CodeViewer(props) {
                 // 문서 오류 선택 구성
                 let errorTag = [];
                 let optionTag = [];
+                //const activeYmd = document.querySelector(".docInfoActive").dataset.ymd;
                 if(resp.result.document.length>0){
                     const docLinkReg = /([A-Z]{3,5}(\s[0-9]{2}){3,4})/g
                     const docPartReg = /\((?:표|그림|부록)?\s*([A-Z]\.)?(?!\d\))\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\)/g // /(\((?:표|그림|부록)?\s*([A-Z]\.)?\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\))/g
@@ -185,8 +201,6 @@ function CodeViewer(props) {
                             item.full_content = "<input type='checkbox' " +
                                 "class='titleCheckBox "+parentContCd+"' " +
                                 "id='"+item.cont_type_cd+"chk' " +
-                                // `onclick="const flag = this.checked; document.querySelectorAll('.'+this.id.replace('chk', '')).forEach((input)=>{input.checked = flag})"` +
-                                // "onClick={chkboxControll} "+
                                 ">"+item.full_content;
                             if(index!==0 && item.cont_level===1 && item.cont_order !== 1){
                                 item.full_content = "<br>"+item.full_content;
@@ -198,7 +212,8 @@ function CodeViewer(props) {
                                 const docCodeMap = new Map();
                                 for(let i=0; i<docCodeAry.length; i++) {
                                     const docCode = docCodeAry[i];
-                                    docCodeMap.set(docCode, '<a class="docLink" href="/standardCode/viewer/' + docCode + '" target="_blank">' + docCode + '</a>')
+                                    //docCodeMap.set(docCode, '<a class="docLink" href="/standardCode/viewer/' + docCode + '" target="_blank">' + docCode + '</a>')
+                                    docCodeMap.set(docCode, '<a class="docLink" href="#" data-doccode="'+docCode+'" target="_blank">' + docCode + '</a>')
                                 }
                                 docCodeMap.forEach((docCodeLink, docCode)=>{
                                     item.full_content = item.full_content.replaceAll(docCode, docCodeLink);
@@ -272,15 +287,21 @@ function CodeViewer(props) {
         setDocSummary([<div></div>])
         setDocDetail([<div>불러오는중</div>])
         setSelectFlag(true);
-        const docInfoSeq = el.target.value
-        setDocInfoSeq(docInfoSeq);
-        getCodeDetailInfo(docCode);
+        const activeBtn = document.querySelector(".docInfoActive")
+        activeBtn.className = activeBtn.className.replace('docInfoActive', '').trim();
+        const activeP = document.querySelector(".yearInfoActive")
+        activeP.className = activeP.className.replace('yearInfoActive', '').trim();
+        const clickBtn = el.target;
+        clickBtn.className += " docInfoActive";
+        clickBtn.parentElement.querySelector("p").className += " yearInfoActive"
+        getCodeDetailInfo(docCode, clickBtn.dataset.ymd);
     })
     const actionAppend = (el) => {
         if(!el) return;
         if(el.childNodes.length===0){
             return
         }else{
+            docLinkActionAppend(el)
             bookmarkBtnActionAppend(el)
             checkboxActionAppend(el)
             if(sessionUserSe === "ADM"){
@@ -290,13 +311,25 @@ function CodeViewer(props) {
             }
         }
     }
+
+    const docLinkActionAppend = (el) => {
+        const docLinkList = el.getElementsByClassName("docLink")
+        for(let docLink of docLinkList){
+            docLink.onclick = (e) => {
+                const ymd = document.querySelector(".docInfoActive").dataset.ymd;
+                debugger
+                window.open("/standardCode/viewer/", "mozillaTab")
+            }
+
+        }
+    }
     const bookmarkBtnActionAppend = (el) => {
         const bookmarkList = el.getElementsByClassName("bookmark")
         for(let bookmark of bookmarkList){
             bookmark.onclick = (e) => {
                 handleShow();
                 const params = e.currentTarget.dataset
-                setBookMarkModal(<BookmarkModal docCode={params.doccode} docPart={params.docpart}/>)
+                setBookMarkModal(<BookmarkModal docCode={params.doccode} docPart={params.docpart} ymd={document.querySelector(".docInfoActive").dataset.ymd}/>)
             }
         }
     }
diff --git a/kcsc-back-end/src/main/resources/application-prod.properties b/kcsc-back-end/src/main/resources/application-prod.properties
index 953757d..feb400e 100644
--- a/kcsc-back-end/src/main/resources/application-prod.properties
+++ b/kcsc-back-end/src/main/resources/application-prod.properties
@@ -16,8 +16,8 @@ spring.sql.init.encoding=utf-8
 spring.datasource.hikari.maximum-pool-size=4
 #postgresql
 spring.datasource.driverClassName=org.postgresql.Driver
-spring.datasource.url=jdbc:postgresql://localhost:5432/kcsc
-spring.datasource.username=kcsc
+spring.datasource.url=jdbc:postgresql://118.219.150.34:50503/kcsc
+spring.datasource.username=dbnt0031
 spring.datasource.password=dbnt0928!
 
 #jpa