QRadio.tsx 2.52 KB
Newer Older
1
import React from "react";
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { RadioType } from "./CreateSurveyFormPage";
3
4
5

type Props = {
  element: RadioType;
Jiwon Yoon's avatar
Jiwon Yoon committed
6
  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8
};

Jiwon Yoon's avatar
Jiwon Yoon committed
9
export const QRadio = ({ element, QuestionListChange }: Props) => (
10
  <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
13
    <div className="flex h-16 w-full place-content-between items-center">
      <input
        type="text"
Jiwon Yoon's avatar
Jiwon Yoon committed
14
15
        id={element.id}
        name="title"
Jiwon Yoon's avatar
Jiwon Yoon committed
16
17
18
19
        className="text-xl font-bold ml-6 border-b-2 w-1/2"
        placeholder={element.title}
        onChange={QuestionListChange}
      ></input>
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
      <select
        id="Questions"
        className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor focus:themeColor block w-full mr-3 p-2.5"
      >
        <option>질문종류</option>
        <option value="Essay">주관식</option>
        <option value="MultipleChoice" selected>
          객관식
        </option>
        <option value="Dropdown">드롭다운(객관식)</option>
        <option value="CheckBox">체크박스(객관식)</option>
        <option value="Rating">선형</option>
        <option value="Grid">그리드</option>
        <option value="Date">날짜</option>
      </select>
    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
36
37
38
    <div className="flex w-full justify-center">
      <input
        type="text"
Jiwon Yoon's avatar
Jiwon Yoon committed
39
40
        id={element.id}
        name="comment"
Jiwon Yoon's avatar
Jiwon Yoon committed
41
        className="border w-11/12"
42
        placeholder="질문에 대한 설명을 입력해주세요"
Jiwon Yoon's avatar
Jiwon Yoon committed
43
44
        onChange={QuestionListChange}
      ></input>
45
    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
46
    <div className="flex mt-4">
Jiwon Yoon's avatar
Jiwon Yoon committed
47
      {element.content.choices.map((e: string, index: number) => (
48
        <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
49
50
51
52
53
54
55
          <input
            type="radio"
            id={element.id}
            name="choice"
            value={e}
            disabled
          />
56
57
          <input
            type="text"
Jiwon Yoon's avatar
Jiwon Yoon committed
58
59
            name={"choice" + `${index}`}
            // key={`${index}`}
60
61
            className="mx-2 border-b-2"
            placeholder={e}
Jiwon Yoon's avatar
Jiwon Yoon committed
62
            onChange={QuestionListChange}
63
64
65
66
67
68
69
70
71
72
          ></input>
          <button></button>
        </div>
      ))}
      {/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
        +
      </button> */}
    </div>
    <div className="flex w-full flex-row justify-end py-2">
      <button className="w-1/12">필수</button>
Jiwon Yoon's avatar
Jiwon Yoon committed
73
      <button className="w-1/12">옵션</button>
74
75
76
77
      <button className="w-1/12">삭제</button>
    </div>
  </div>
);