id, pw 찾기 작업중.

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

@@ -82,3 +82,7 @@ button {cursor: pointer;}
 .mt40 {margin-top: 40px !important;}
 .ml10 {margin-left: 10px !important;}
 .pb10 {padding-bottom: 10px !important;}
+
+
+.clickable{cursor: pointer;}
+.findBtn{float: right}

egovframe-template-simple-react-contribution/src/pages/login/EgovLoginContent.jsx

@@ -9,6 +9,9 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 import { getLocalItem, setLocalItem, setSessionItem } from 'utils/storage';
+import Modal from "react-bootstrap/Modal";
+import IdFindForm from "./IdFindForm";
+import PwFindForm from "./PwFindForm";
 
 function EgovLoginContent(props) {
     console.group("EgovLoginContent");
@@ -24,6 +27,12 @@ function EgovLoginContent(props) {
 
     const [saveIDFlag, setSaveIDFlag] = useState(false);
 
+    const [findModalState, setFindModalState] = useState(false);
+    const [modalTitle, setModalTitle] = useState();
+    const [modalBody, setModalBody] = useState();
+    const handleClose = () => setFindModalState(false);
+    const handleShow = () => setFindModalState(true);
+
     const checkRef = useRef();
 
     const KEY_ID = "KEY_ID";
@@ -99,10 +108,22 @@ function EgovLoginContent(props) {
             })
     }
 
+    const idFindModal = () => {
+        setModalTitle("ID 찾기")
+        setModalBody(IdFindForm)
+        handleShow();
+    }
+    const pwFindModal = () => {
+        setModalTitle("PW 찾기")
+        setModalBody(PwFindForm)
+        handleShow();
+    }
+
     console.log("------------------------------EgovLoginContent [End]");
     console.groupEnd("EgovLoginContent");
 
     return (
+        <>
             <div className="contents" id="contents">
                 {/* <!-- 본문 --> */}
                 <div className="Plogin">
@@ -124,7 +145,9 @@ function EgovLoginContent(props) {
                                         <input type="checkbox" name="" id="saveid" onChange={handleSaveIDFlag} checked={saveIDFlag}/> <em>ID저장</em>
                                     </label>
                                 </Col>
-                            <Col xs={3}>
+                                <Col xs={"auto"}>
+                                    <em className="clickable" onClick={idFindModal}>ID 찾기</em>
+                                    <em className="clickable" onClick={pwFindModal}>PW 찾기</em>
                                     <Link to={URL.JOIN}><em>회원가입</em></Link>
                                 </Col>
                             </Row>
@@ -138,8 +161,14 @@ function EgovLoginContent(props) {
                             변경하셔서 사용하는 것이 좋습니다.</li>
                     </ul>
                 </div>
-            {/* <!--// 본문 --> */}
             </div>
+            <Modal show={findModalState} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>{modalTitle}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>{modalBody}</Modal.Body>
+            </Modal>
+        </>
     );
 }
 

egovframe-template-simple-react-contribution/src/pages/login/IdFindForm.jsx

@@ -0,0 +1,26 @@
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+
+function IdFindForm(){
+    return (
+        <Form>
+            <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+                <Form.Label column sm={2}>
+                    이메일
+                </Form.Label>
+                <Col sm={10}>
+                    <Form.Control type="email" placeholder="Email" />
+                </Col>
+            </Form.Group>
+            <Form.Group as={Row} className="mb-3">
+                <Col sm={{ span: 10, offset: 2 }}>
+                    <Button className="findBtn" type="submit">찾기</Button>
+                </Col>
+            </Form.Group>
+        </Form>
+    );
+}
+
+export default IdFindForm;

egovframe-template-simple-react-contribution/src/pages/login/PwFindForm.jsx

@@ -0,0 +1,34 @@
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+
+function PwFindForm(){
+    return (
+        <Form>
+            <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+                <Form.Label column sm={2}>
+                    아이디
+                </Form.Label>
+                <Col sm={10}>
+                    <Form.Control type="email" placeholder="Email" />
+                </Col>
+            </Form.Group>
+            <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
+                <Form.Label column sm={2}>
+                    이메일
+                </Form.Label>
+                <Col sm={10}>
+                    <Form.Control type="email" placeholder="Email" />
+                </Col>
+            </Form.Group>
+            <Form.Group as={Row} className="mb-3">
+                <Col sm={{ span: 10, offset: 2 }}>
+                    <Button className="findBtn" type="submit">찾기</Button>
+                </Col>
+            </Form.Group>
+        </Form>
+    );
+}
+
+export default PwFindForm;