kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/config/baseCode/ChildCodeDiv.jsx

import React, {useState, useImperativeHandle, forwardRef} from "react";
import * as EgovNet from "api/egovFetch";
import {Container} from "react-bootstrap";
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 ChildCodeDiv({}, ref){

    const [codeItemRow, setCodeItemRow] = useState();
    const [grpCd, setGrpCd] = useState();

    useImperativeHandle(ref, ()=>({
        getCodeItemList
    }))
    async function getCodeItemList(parentCd){
        setCodeItemRow([]);
        setGrpCd(parentCd)
        EgovNet.requestFetch(
            '/admin/config/code-item?grpCd='+parentCd,
            {
                method: "GET"
            },
            (resp) => {
                const codeItemList = resp.result.codeItemList;
                const itemTag = [];
                codeItemList.forEach(function (item, index){
                    itemTag.push(
                        <Row className={"py-2 border-bottom"}>
                            <Col xs={3}><Form.Control type={"text"} size={"sm"} defaultValue={item.itemCd}/></Col>
                            <Col xs={5}><Form.Control type={"text"} size={"sm"} defaultValue={item.itemNm}/></Col>
                            <Col xs={2}><Button variant={"danger"} size={"sm"}>삭제</Button></Col>
                            <Col xs={2}><Button variant={"primary"} size={"sm"}>수정</Button></Col>
                        </Row>
                    )
                })
                setCodeItemRow(itemTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }

    return (
        <Container className={"pt-3"}>
            <Row className={"py-2 bg-light border-bottom"}>
                <Col xs={3}>코드</Col>
                <Col xs={5}>코드명</Col>
                <Col xs={2}>삭제</Col>
                <Col xs={2}>수정</Col>
            </Row>
            {codeItemRow}
            {grpCd!=null?(
                <Row className={"py-1"}>
                    <Col xs={3}>
                        <Form.Control type={"text"} placeholder={"코드"} size={"sm"}/>
                    </Col>
                    <Col xs={5}>
                        <Form.Control type={"text"} placeholder={"코드명"} size={"sm"}/>
                    </Col>
                    <Col xs={{span:2, offset:2}}><Button type={"button"} variant={"primary"} size={"sm"}>등록</Button></Col>
                </Row>
            ):(
                <Row className={"py-1"}>
                    <Col>코드 그룹을 선택해주세요.</Col>
                </Row>
            )}
        </Container>
    );
}

export default forwardRef(ChildCodeDiv);