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,47 +108,67 @@ 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">
-                <h1>로그인</h1>
-                <p className="txt">전자정부표준프레임워크 경량환경 홈페이지 로그인 페이지입니다.<br />로그인을 하시면 모든 서비스를 제한없이 이용하실 수 있습니다.</p>
+        <>
+            <div className="contents" id="contents">
+                {/* <!-- 본문 --> */}
+                <div className="Plogin">
+                    <h1>로그인</h1>
+                    <p className="txt">전자정부표준프레임워크 경량환경 홈페이지 로그인 페이지입니다.<br />로그인을 하시면 모든 서비스를 제한없이 이용하실 수 있습니다.</p>
 
-                <div className="login_box">
-                    <fieldset>
-                        <legend>로그인</legend>
-                        <span className="group">
-                                <input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}
-                                       onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
-                                <input type="password" name="" title="비밀번호" placeholder="비밀번호"
-                                       onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
-                            </span>
-                        <Row className="chk justify-content-between">
-                            <Col xs={3}>
-                                <label className="f_chk" htmlFor="saveid" ref={checkRef}>
-                                    <input type="checkbox" name="" id="saveid" onChange={handleSaveIDFlag} checked={saveIDFlag}/> <em>ID저장</em>
-                                </label>
-                            </Col>
-                            <Col xs={3}>
-                                <Link to={URL.JOIN}><em>회원가입</em></Link>
-                            </Col>
-                        </Row>
-                        <button type="button" onClick={submitFormHandler}><span>LOGIN</span></button>
-                    </fieldset>
+                    <div className="login_box">
+                        <fieldset>
+                            <legend>로그인</legend>
+                            <span className="group">
+                                    <input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}
+                                           onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
+                                    <input type="password" name="" title="비밀번호" placeholder="비밀번호"
+                                           onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
+                                </span>
+                            <Row className="chk justify-content-between">
+                                <Col xs={3}>
+                                    <label className="f_chk" htmlFor="saveid" ref={checkRef}>
+                                        <input type="checkbox" name="" id="saveid" onChange={handleSaveIDFlag} checked={saveIDFlag}/> <em>ID저장</em>
+                                    </label>
+                                </Col>
+                                <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>
+                            <button type="button" onClick={submitFormHandler}><span>LOGIN</span></button>
+                        </fieldset>
+                    </div>
+
+                    <ul className="list">
+                        <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.</li>
+                        <li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
+                            변경하셔서 사용하는 것이 좋습니다.</li>
+                    </ul>
                 </div>
-
-                <ul className="list">
-                    <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.</li>
-                    <li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
-                        변경하셔서 사용하는 것이 좋습니다.</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;