개정이력모달창기능구현

egovframe-template-simple-react-contribution/src/css/Custom/customMain.css

@@ -2,9 +2,12 @@
     height: 35px;
     line-height: 35px;
     display: block;
-    background-color: gray;
+    background-color: #909090;
     text-align: center;
     border-radius: 13px;
     color: white;
     margin: 5px;
+}
+.mainbnt:hover{
+    background-color: #212121;
 }

egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx

@@ -107,7 +107,7 @@ function EgovMain(props) {
                     <div className="left_col">
                         {/*<img src="/assets/images/img_simple_main.png" alt="단순 홈페이지 전자정부 표준프레임워크의 경량환경 내부업무에 대한 최신 정보와 기술을 제공하고 있습니다." />*/}
                         <h3>건설기준코드 검색</h3>
-                        <Row className="justify-content-md-center">
+                        <Row>
                             <Col xs={3}><a href="/standardCode/list/1010" title="공통코드" className={"mainbnt"}>공통코드</a></Col>
                             <Col xs={3}><a href="/standardCode/list/101011" title="공통코드" className={"mainbnt"}>지반코드</a></Col>
                             <Col xs={3}><a href="/standardCode/list/101014" title="공통코드" className={"mainbnt"}>구조코드</a></Col>
@@ -126,26 +126,6 @@ function EgovMain(props) {
                             <Col xs={3}><a href="/standardCode/list/102057" title="공통코드" className={"mainbnt"}>상수도코드</a></Col>
                             <Col xs={3}><a href="/standardCode/list/102061" title="공통코드" className={"mainbnt"}>하수도코드</a></Col>
                             <Col xs={3}><a href="/standardCode/list/102067" title="공통코드" className={"mainbnt"}>농업기반코드</a></Col>
-                            {/*
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/1010" title="공통코드">공통코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/101011" title="지반코드">지반코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/101014" title="구조코드">구조코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/101017" title="내진코드">내진코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102021" title="가설코드">가설코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102024" title="교량코드">교량코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102027" title="터널코드">터널코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102029" title="공동구코드">공동구코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102031" title="설비코드">설비코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102034" title="조경코드">조경코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102041" title="건축코드">건축코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102044" title="도로코드">도로코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102047" title="철도코드">철도코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102051" title="하천코드">하천코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102054" title="댐코드">댐코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102057" title="상수도코드">상수도코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102061" title="하수도코드">하수도코드</a></Button></Col>
-                            <Col xs={3}><Button variant="secondary"><a href="/Search/ListCodes/102067" title="농업기반코드">농업기반코드</a></Button></Col>
-                            */}
                         </Row>
                     </div>
 

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

@@ -9,8 +9,20 @@ import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavInform';
 import EgovPaging from 'components/EgovPaging';
 import { itemIdxByPage } from 'utils/calc';
 
+import  StandardCodeListModal from './StandardCodeListModal'
+
 function StandardCodeList(props) {
     const {listCode} = useParams();
+    const [show, setshow] = useState(false);
+    const [groupseq,setgroupseq] = useState();
+    function showhandling(e){
+        const param = e.currentTarget.dataset;
+        setshow(true);
+        setgroupseq(param.groupseq);
+    }
+    function close () {
+        setshow(false);
+    }
     console.group("StandardCodeList");
     console.log("[Start] StandardCodeList ------------------------------");
     console.log("StandardCodeList [props] : ", props);
@@ -63,7 +75,7 @@ function StandardCodeList(props) {
 
                     mutListTag.push(
                         <Link
-                            to={{pathname: URL.STANDARD_CODE_DETAIL}}
+                            to={"#"}
                             state={{
                                 docInfoSeq: item.docInfoSeq,
                                 docNm: item.docNm,
@@ -83,10 +95,11 @@ function StandardCodeList(props) {
                             <div className="al">
                                 {item.docNm}
                             </div>}
+                            <div><button onClick={showhandling}  data-groupseq = {item.groupSeq}>개정이력</button></div>
                             <div></div>
                             <div></div>
                             <div></div>
-                            <div></div>
+
                         </Link>
                     );
                 });
@@ -193,6 +206,7 @@ function StandardCodeList(props) {
                                 retrieveList({ ...searchCondition, pageIndex: passedPage, searchCnd: cndRef.current.value, searchWrd: wrdRef.current.value })
                             }} />
                             {/* <!--/ Paging --> */}
+                            <StandardCodeListModal show ={show} groupseq ={groupseq} onClose = {close}/>
                         </div>
 
                         {/* <!--// 본문 --> */}

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

@@ -0,0 +1,17 @@
+import {Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle} from "react-bootstrap";
+
+
+function StandardCodeListModal({show,groupseq,onClose}){
+    //todo 로직추가구현필요
+    return(
+        <Modal show={show}>
+            <ModalHeader>
+                <ModalTitle>개정이력</ModalTitle>
+            </ModalHeader>
+            <ModalBody>
+                {groupseq}
+            </ModalBody>
+            <ModalFooter><Button onClick={onClose}>닫기</Button></ModalFooter>
+        </Modal>)
+}
+export default StandardCodeListModal;