설문관리 작업중.

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

@@ -8,8 +8,8 @@ import * as EgovNet from "api/egovFetch";
 
 function QuestionModal({svySeq}){
 
-    const [qtTag, setQtTag] = useState([]);
+    const [qtList, setQtList] = useState([]);
-    const [itemTag, setItemTag] = useState([]);
+    const [selectedQt, setSelectedQt] = useState(null);
 
     function getSurveyQt(){
         EgovNet.requestFetch(
@@ -18,19 +18,7 @@ function QuestionModal({svySeq}){
                 method: "GET"
             },
             (resp) => {
-
+                setQtList(resp.result.qtList)
-                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);
@@ -38,42 +26,12 @@ function QuestionModal({svySeq}){
         );
     }
 
-    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){
@@ -91,7 +49,7 @@ function QuestionModal({svySeq}){
             </Modal.Header>
             <Modal.Body>
                 <Row>
-                    <Col xs={6}>
+                    <Col xs={5}>
                         <Table>
                             <thead>
                             <tr>
@@ -99,7 +57,15 @@ function QuestionModal({svySeq}){
                             </tr>
                             </thead>
                             <tbody>
-                            {qtTag}
+                            {qtList.map(qt=>{
+                                return (
+                                    <tr>
+                                        <td>
+                                            <Form.Control type={"text"} defaultValue={qt.qtTitle} onClick={()=>{setSelectedQt(qt)}}/>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
                             </tbody>
                             <tfoot>
                             <tr>
@@ -110,7 +76,32 @@ function QuestionModal({svySeq}){
                             </tfoot>
                         </Table>
                     </Col>
-                    <Col xs={6}>
+                    <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>
@@ -118,7 +109,15 @@ function QuestionModal({svySeq}){
                             </tr>
                             </thead>
                             <tbody>
-                            {itemTag}
+                            {selectedQt?.itemList.map(item=>{
+                                return (
+                                    <tr>
+                                        <td>
+                                            <Form.Control type={"text"} defaultValue={item.itemNm}/>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
                             </tbody>
                             <tfoot>
                             <tr>