kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/users/UserInfoModal.jsx

import React, {useEffect, useState} from "react"
import Modal from "react-bootstrap/Modal";
import * as EgovNet from "../../../api/egovFetch";
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 UserInfoModal({userSeq}){

    const [userInfo, setUserInfo] = useState({ userId: '', password: '', passwordChk: '', userNm: '', email: '', phoneNum: ''});

    function getModalContent(){
        EgovNet.requestFetch(
            '/admin/users/info?userSeq='+userSeq,
            {
                method: "GET"
            },
            (resp) => {
                const respInfo = {
                    userId: resp.result.userInfo.userId,
                    userNm: resp.result.userInfo.userNm,
                    email: resp.result.userInfo.email,
                    phoneNum: resp.result.userInfo.phoneNum,
                    password: "",
                    passwordChk: "",
                }
                setUserInfo(respInfo);
            },
            (resp) => {
                console.log("err response : ", resp);
            }
        );
    }

    function userInfoChange(){

    }

    useEffect(() => {
        getModalContent();
    }, []);

    return (
        <>
            <Modal.Header className="bookmarkModalHeader" closeButton>
                <Modal.Title>
                    {userInfo.userNm} 상세정보
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form onSubmit={userInfoChange} noValidate>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            아이디
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="text" name="userId" placeholder="아이디" required value={userInfo?.userId}
                                          onChange={e => setUserInfo({ ...userInfo, userId: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            이름
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="text" name="userNm" placeholder="이름" required value={userInfo?.userNm}
                                          onChange={e => setUserInfo({ ...userInfo, userNm: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            이메일
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="email" name="email" placeholder="email" required value={userInfo?.email}
                                          onChange={e => setUserInfo({ ...userInfo, email: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            연락처
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="text" name="phoneNum" placeholder="연락처" required value={userInfo?.phoneNum}
                                          onChange={e => setUserInfo({ ...userInfo, phoneNum: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            비밀번호
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="password" name="password" placeholder="비밀번호 변경 시 입력"
                                          onChange={e => setUserInfo({ ...userInfo, password: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            비밀번호 확인
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="password" name="passwordChk" placeholder="비밀번호 변경 시 입력"
                                          onChange={e => setUserInfo({ ...userInfo, passwordChk: e.target.value })}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            사용자 유형
                        </Form.Label>
                        <Col sm={9}>

                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            사용자 권한
                        </Form.Label>
                        <Col sm={9}>

                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
                        <Form.Label column sm={3}>
                            상태
                        </Form.Label>
                        <Col sm={9}>

                        </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>
            </Modal.Body>
        </>
    )
}

export default UserInfoModal;