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

import React, {useCallback, 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";
import SelectOption from "components/commonCode/SelectOption";
import CheckBox from "components/commonCode/CheckBox";
import CODE from "../../../constants/code";

function UserInfoModal({userSeq}){

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

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

    function userInfoChange(e){
        e.preventDefault();
        e.stopPropagation();
        const form = e.target;
        const info = {
            userSeq: form.userSeq.value,
            userId: form.userId.value,
            password: form.password.value,
            passwordChk: form.passwordChk.value,
            userNm: form.userNm.value,
            email: form.email.value,
            phoneNum: form.phoneNum.value,
            userSe: form.userSe.value,
            userRole: '',
            status: form.status.value,
        }
        let userRole = '';
        form.userRole.forEach(function (input){
            if(input.checked){
                userRole += input.value+','
            }
        })
        if(userRole){
            info.userRole = userRole.slice(0, -1)
        }
        EgovNet.requestFetch(
            '/admin/users/info',
            {
                method: "PUT",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(info)
            },
            (resp) => {
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    alert("저장되었습니다.")
                }else if(Number(resp.resultCode) === Number(CODE.RCV_ERROR_AUTH)){
                    console.log("토큰 갱신중.")
                }else{
                    alert(resp.result.resultMessage)
                }
            }
        )
    }

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

    useEffect(()=>{
        const checkBoxDiv = document.querySelector("#ROLE_checkBoxDiv")
        const userRole = userInfo.userRole;
        if(userRole){
            checkBoxDiv.childNodes.forEach(function (div){
                const input = div.children[0];
                if(userRole.includes(input.value)){
                    input.checked = true;
                }
            })
        }
    }, [userInfo]);

    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>
                    {userInfo.userNm} 상세정보
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form onSubmit={(e) =>{userInfoChange(e)}} noValidate>
                    <input type={"hidden"} name={"userSeq"} defaultValue={userInfo.userSeq} />
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            아이디
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="text" name="userId" placeholder="아이디" required defaultValue={userInfo?.userId} readOnly/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            비밀번호
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="password" name="password" placeholder="비밀번호 변경 시 입력" />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            비밀번호 확인
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="password" name="passwordChk" placeholder="비밀번호 변경 시 입력" />
                        </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="userNm" placeholder="이름" required defaultValue={userInfo?.userNm} />
                        </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="email" placeholder="email" required defaultValue={userInfo?.email} />
                        </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="phoneNum" placeholder="연락처" required defaultValue={userInfo?.phoneNum} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            사용자 유형
                        </Form.Label>
                        <Col sm={9}>
                            <SelectOption name={"userSe"} grpCd={"ACC_TYPE"} selectedValue={userInfo?.userSe} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            사용자 권한
                        </Form.Label>
                        <Col sm={9}>
                            <CheckBox name={"userRole"} grpCd={"ROLE"} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            상태
                        </Form.Label>
                        <Col sm={9}>
                            <SelectOption name={"status"} grpCd={"ACC_STUS"} selectedValue={userInfo?.status} />
                        </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;