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

import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import * as EgovNet from "../../api/egovFetch";

function PwFindForm(){

    const findPw = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const form = e.currentTarget;
        if(!form.email.value){
            alert("이메일을 입력해주세요.")
        }if(!form.id.value){
            alert("아이디를 입력해주세요.")
        }else{
            EgovNet.requestFetch(
                "/auth/findPw",
                {
                    method: "POST",
                    headers: {
                        'Content-type': 'application/json'
                    },
                    body: JSON.stringify({email: form.email.value, id: form.id.value})
                },
                (resp) => {
                    document.querySelector("#findResultLabel").innerText = resp.resultMessage;
                })
        }
    }

    return (
        <Form onSubmit={findPw} noValidate>
            <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                <Form.Label column sm={2}>
                    아이디
                </Form.Label>
                <Col sm={10}>
                    <Form.Control type="text" name="id" placeholder="ID" required />
                </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" name="email" placeholder="Email" required/>
                </Col>
            </Form.Group>
            <Row className="mb-3">
                <Form.Label column xs={{span:8, offset:2}} id="findResultLabel"></Form.Label>
                <Col xs={2}>
                    <Button type="submit">찾기</Button>
                </Col>
            </Row>
        </Form>
    );
}

export default PwFindForm;