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 [qtList, setQtList] = useState([]);
    const [selectedQt, setSelectedQt] = useState(null);

    function getSurveyQt(){
        EgovNet.requestFetch(
            '/admin/survey/edit-qt?svySeq='+svySeq,
            {
                method: "GET"
            },
            (resp) => {
                setQtList(resp.result.qtList)
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }

    function addQt(){

    }

    function addItem(){

    }

    function editSurveyQt(e){

    }

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

    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>질문관리</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Row>
                    <Col xs={5}>
                        <Table>
                            <thead>
                            <tr>
                                <th>질문</th>
                            </tr>
                            </thead>
                            <tbody>
                            {qtList.map(qt=>{
                                return (
                                    <tr>
                                        <td>
                                            <Form.Control type={"text"} defaultValue={qt.qtTitle} onClick={()=>{setSelectedQt(qt)}}/>
                                        </td>
                                    </tr>
                                );
                            })}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <button className={"btn btn_blue_h31"} onClick={addQt}>추가</button>
                                </td>
                            </tr>
                            </tfoot>
                        </Table>
                    </Col>
                    <Col xs={7}>
                        <Form.Group as={Row} className="mb-3">
                            <Form.Label column sm={3}>
                                질문유형
                            </Form.Label>
                            <Col sm={9} key={`inline-radio`} className={'my-auto'}>
                                <Form.Check inline label="체크박스" name="qtType" type={'radio'} value={1} checked={selectedQt?.qtType === 1} onClick={()=>{setSelectedQt({...selectedQt, qtType:1})}}/>
                                <Form.Check inline label="라디오버튼" name="qtType" type={'radio'} value={2} checked={selectedQt?.qtType === 2} onClick={()=>{setSelectedQt({...selectedQt, qtType:2})}}/>
                                <Form.Check inline label="직접입력" name="qtType" type={'radio'} value={3} checked={selectedQt?.qtType === 3} onClick={()=>{setSelectedQt({...selectedQt, qtType:3})}}/>
                                <Form.Check inline label="이용자만족도" name="qtType" type={'radio'} value={4} checked={selectedQt?.qtType === 4} onClick={()=>{setSelectedQt({...selectedQt, qtType:4})}}/>
                            </Col>
                        </Form.Group>
                        <Form.Group as={Row} className={`mb-3 ${selectedQt?.qtType!==1?'d-none':''}`}>
                            <Form.Label column sm={3}>
                                최대 선택 개수
                            </Form.Label>
                            <Col sm={3}>
                                <Form.Control type="text" name="maxNo" defaultValue={selectedQt?.maxNo}/>
                            </Col>
                            <Form.Label column sm={'auto'}>
                                기타 여부
                            </Form.Label>
                            <Col sm={3} className={'my-auto'}>
                                <Form.Check type="checkbox" name="mandatoryYn" checked={selectedQt?.mandatoryYn==='Y'}/>
                            </Col>
                        </Form.Group>
                        <Table>
                            <thead>
                            <tr>
                                <th>보기</th>
                            </tr>
                            </thead>
                            <tbody>
                            {selectedQt?.itemList.map(item=>{
                                return (
                                    <tr>
                                        <td>
                                            <Form.Control type={"text"} defaultValue={item.itemNm}/>
                                        </td>
                                    </tr>
                                );
                            })}
                            </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;