메뉴관리 작업중.

egovframe-template-simple-react-contribution/src/css/page.css

@@ -173,16 +173,16 @@
     .menuList .head > span:nth-child(1) {width: 100px;}
     .menuList .head > span:nth-child(2) {width: 150px;}
     .menuList .head > span:nth-child(3) {width: 100px;}
-    .menuList .head > span:nth-child(4) {width: 100px;}
+    .menuList .head > span:nth-child(4) {width: 60px;}
-    .menuList .head > span:nth-child(5) {width: 100px;}
+    .menuList .head > span:nth-child(5) {width: 60px;}
     .menuList .head > span:nth-child(6) {width: 200px;}
     .menuList .head > span:nth-child(7) {width: 100px;}
     .menuList .head > span:nth-child(8) {width: 100px;}
     .menuList .result .list_item > div:nth-child(1) {width: 100px;}
     .menuList .result .list_item > div:nth-child(2) {width: 150px;}
     .menuList .result .list_item > div:nth-child(3) {width: 100px;}
-    .menuList .result .list_item > div:nth-child(4) {width: 100px;}
+    .menuList .result .list_item > div:nth-child(4) {width: 60px;}
-    .menuList .result .list_item > div:nth-child(5) {width: 100px;}
+    .menuList .result .list_item > div:nth-child(5) {width: 60px;}
     .menuList .result .list_item > div:nth-child(6) {width: 200px;}
     .menuList .result .list_item > div:nth-child(7) {width: 100px;}
     .menuList .result .list_item > div:nth-child(8) {width: 100px;}

egovframe-template-simple-react-contribution/src/pages/admin/config/MenuMgt.jsx

@@ -4,12 +4,20 @@ import URL from "constants/url";
 
 import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
 import * as EgovNet from "../../../api/egovFetch";
+import Modal from "react-bootstrap/Modal";
+import MenuModal from "./menuMgt/MenuModal";
 
 
 function MenuMgt({}) {
 
     const [listTag, setListTag] = useState([]);
 
+    const [show, setShow] = useState(false);
+    const [modalBody, setModalBody] = useState();
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
     const retrieveList = useCallback(() => {
         EgovNet.requestFetch(
             '/admin/config/menu-mgt',
@@ -32,8 +40,7 @@ function MenuMgt({}) {
                             <div>{item.menuUrl}</div>
                             <div>{item.menuTypeCd}</div>
                             <div>
-                                <button className={"btn btn_blue_h31 px-1"} onClick={()=>{saveMenu(item.menuId)}}>저장</button>
+                                <button className={"btn btn_blue_h31 px-1"} onClick={()=>{editMenu(item)}}>수정</button>
-                                <button className={"btn btn_red_h31 px-1"} onClick={()=>{removeMenu(item.menuId)}}>삭제</button>
                             </div>
                         </div>
                     );
@@ -47,12 +54,9 @@ function MenuMgt({}) {
         );
     },[]);
 
-    function saveMenu(){
+    function editMenu(menu){
-
+        handleShow();
-    }
+        setModalBody(<MenuModal savedInfo={menu}/>)
-    
-    function removeMenu(menuId){
-
     }
 
     useEffect(()=>{
@@ -90,7 +94,9 @@ function MenuMgt({}) {
                                 <span>정렬</span>
                                 <span>URI</span>
                                 <span>타입</span>
-                                <span></span>
+                                <span>
+                                    <button className={"btn btn_blue_h31 px-1"} onClick={()=>{editMenu(undefined)}}>추가</button>
+                                </span>
                             </div>
                             <div className="result">
                                 {listTag}
@@ -99,6 +105,9 @@ function MenuMgt({}) {
                     </div>
                 </div>
             </div>
+            <Modal show={show} onHide={handleClose} keyboard={false}>
+                {modalBody}
+            </Modal>
         </div>
     );
 }

egovframe-template-simple-react-contribution/src/pages/admin/config/menuMgt/MenuModal.jsx

@@ -0,0 +1,96 @@
+import react from "react"
+import Modal from "react-bootstrap/Modal";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import React from "react";
+
+function MenuModal({savedInfo}){
+
+    function editMenu(e){
+
+    }
+
+    function deleteMenu(menuId){
+        
+    }
+
+    return (
+        <>
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    {savedInfo!==undefined?`${savedInfo?.menuTitle} 상세정보`:'메뉴 생성'}
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Form onSubmit={(e) =>{editMenu(e)}} noValidate>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            아이디
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuId" placeholder="아이디" required defaultValue={savedInfo?.menuId}/>
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            이름
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuTitle" placeholder="이름" required defaultValue={savedInfo?.menuTitle} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            그룹
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="email" name="menuGroup" placeholder="그룹" required defaultValue={savedInfo?.menuGroup} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            레벨
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuLevel" placeholder="레벨" required defaultValue={savedInfo?.menuLevel} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            정렬
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuSort" placeholder="정렬" required defaultValue={savedInfo?.menuSort} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            URI
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuUrl" placeholder="URI" required defaultValue={savedInfo?.menuUrl} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} className="mb-3">
+                        <Form.Label column sm={3}>
+                            타입
+                        </Form.Label>
+                        <Col sm={9}>
+                            <Form.Control type="text" name="menuTypeCd" placeholder="타입" required defaultValue={savedInfo?.menuTypeCd} />
+                        </Col>
+                    </Form.Group>
+                    <Row className="mb-3">
+                        {savedInfo !== undefined?<Col xs={2}><button type={"button"} className={"btn btn_red_h31 px-3"} onClick={()=>{deleteMenu(savedInfo.menuId)}}>삭제</button></Col>:''}
+                        <Col xs={{span: savedInfo!==undefined?8:10}}></Col>
+                        <Col xs={2}>
+                            <button type="submit" className={"btn btn_blue_h31 px-3"}>저장</button>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal.Body>
+        </>
+    );
+}
+
+export default MenuModal;