kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/contents/survey/QuestionModal.jsx

import React, {useEffect, useState} from "react";
import Modal from "react-bootstrap/Modal";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Table from "react-bootstrap/Table";
import * as EgovNet from "api/egovFetch";

function QuestionModal({svySeq}){

    const [qtTag, setQtTag] = useState([]);
    const [itemTag, setItemTag] = useState([]);

    function getSurveyQt(){
        EgovNet.requestFetch(
            '/admin/survey/edit-qt?svySeq='+svySeq,
            {
                method: "GET"
            },
            (resp) => {

                const temp = [];
                resp.result.qtList.forEach(function (qt, index){
                    temp.push(
                        <tr>
                            <td className={"clickable"} onClick={()=>selectQt(qt.itemList)}>
                                <Form.Control type={"text"} defaultValue={qt.qtTitle}/>
                            </td>
                        </tr>
                    )
                })
                setQtTag(temp);

            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }

    function selectQt(itemList){
        const temp = [];
        itemList.forEach(function (item, index){
            temp.push(
                <tr>
                    <td>
                        <Form.Control type={"text"} defaultValue={item.itemNm}/>
                    </td>
                </tr>
            )
        })
        setItemTag(temp);
    }

    function addQt(){
        const temp = [...qtTag]
        temp.push(
            <tr>
                <td>
                    <Form.Control type={"text"}/>
                </td>
            </tr>
        )
        setQtTag(temp)
    }

    function addItem(){
        const temp = [...itemTag]
        temp.push(
            <tr>
                <td>
                    <Form.Control type={"text"}/>
                </td>
            </tr>
        )
        setItemTag(temp)
    }

    function editSurveyQt(e){

    }

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

    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>질문관리</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Row>
                    <Col xs={6}>
                        <Table>
                            <thead>
                            <tr>
                                <th>질문</th>
                            </tr>
                            </thead>
                            <tbody>
                            {qtTag}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <button className={"btn btn_blue_h31"} onClick={addQt}>추가</button>
                                </td>
                            </tr>
                            </tfoot>
                        </Table>
                    </Col>
                    <Col xs={6}>
                        <Table>
                            <thead>
                            <tr>
                                <th>보기</th>
                            </tr>
                            </thead>
                            <tbody>
                            {itemTag}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <button className={"btn btn_blue_h31"} onClick={addItem}>추가</button>
                                </td>
                            </tr>
                            </tfoot>
                        </Table>
                    </Col>
                </Row>
            </Modal.Body>
            <Modal.Footer>
                <button type="button" className={"btn btn_blue_h31 px-3"}>저장</button>
            </Modal.Footer>
        </>
    );
}

export default QuestionModal;