QRating.tsx 2.56 KB
Newer Older
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
1
import React from "react";
2
import { RatingType } from "../types";
Jiwon Yoon's avatar
Jiwon Yoon committed
3
import { useQuestion } from "./question.context";
4
import { TypeChange } from "./typeDD";
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
5
6
7
8
9
10

type Props = {
  element: RatingType;
  //   deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
13
export const QRating = ({ element }: Props) => {
  const { questionListChange } = useQuestion();

Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
14
15
16
17
18
19
  return (
    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
      <div className="flex h-16 w-full place-content-between items-center">
        <input
          type="text"
          name="title"
Jiwon Yoon's avatar
Jiwon Yoon committed
20
          id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
21
22
          className="text-xl font-bold ml-6 border-b-2 w-1/2"
          placeholder={element.title}
Jiwon Yoon's avatar
Jiwon Yoon committed
23
          onChange={questionListChange}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
24
        ></input>
25
        <TypeChange tt="rating" id={element._id} />
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
26
27
28
29
30
      </div>
      <div className="flex w-full justify-center">
        <input
          type="text"
          name="comment"
Jiwon Yoon's avatar
Jiwon Yoon committed
31
          id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
32
33
          className="border w-11/12"
          placeholder="질문에 대한 설명을 입력해주세요"
Jiwon Yoon's avatar
Jiwon Yoon committed
34
          onChange={questionListChange}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
35
36
37
38
39
        ></input>
      </div>
      <div className="flex place-content-between items-center p-5">
        <input
          name="minRateDescription"
Jiwon Yoon's avatar
Jiwon Yoon committed
40
          id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
41
42
43
44
          className="border-b-2 text-center"
          size={10}
          placeholder={element.content.minRateDescription}
        ></input>
45
        {element.content.choices.map((e) => (
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
46
47
          <input
            name="text"
Jiwon Yoon's avatar
Jiwon Yoon committed
48
            id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
49
50
51
52
53
54
55
56
            type="text"
            className="border border-black rounded-full py-1 m-2 text-center"
            size={1}
            placeholder={e.text}
          ></input>
        ))}
        <input
          name="maxRateDescription"
Jiwon Yoon's avatar
Jiwon Yoon committed
57
          id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
58
59
60
61
62
63
64
65
66
          className="border-b-2 text-center"
          size={10}
          placeholder={element.content.maxRateDescription}
        ></input>
      </div>
      <div>
        <button
          //   type="button"
          name="rateValues"
Jiwon Yoon's avatar
Jiwon Yoon committed
67
          id={element._id}
Jiwon Yoon's avatar
QRating    
Jiwon Yoon committed
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
          className="border border-red-500 rounded mx-2 px-2"
          //   onClick={deleteValue}
        >
          삭제
        </button>
        <button className="border border-blue-500 rounded mx-2 px-2">
          추가
        </button>
      </div>
      <div className="flex w-full justify-end py-2">
        <button className="w-1/12">필수</button>
        <button className="w-1/12">옵션</button>
        <button className="w-1/12">삭제</button>
      </div>
    </div>
  );
};