ARating.tsx 1.53 KB
Newer Older
1
import React, { useState } from "react";
2
import { IRating, IAnswerProps } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3

4
export const ARating = ({ element, answer: answerQuestion }: IAnswerProps) => {
5
  const [selectedchoice, setSelectedchoice] = useState("");
Jiwon Yoon's avatar
Jiwon Yoon committed
6
7
  const [answer, setAnswer] = useState("");

8
9
  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
Jiwon Yoon's avatar
Jiwon Yoon committed
10
    const { name } = event.currentTarget;
11
    answerQuestion.content = name;
Jiwon Yoon's avatar
Jiwon Yoon committed
12
    setAnswer(name);
13
    setSelectedchoice(event.currentTarget.name);
14
    if (answerQuestion.content) {
Jiwon Yoon's avatar
Jiwon Yoon committed
15
16
17
18
19
      answerQuestion.requiredCheck = true;
    } else {
      answerQuestion.requiredCheck = false;
    }
    console.log(answerQuestion);
20
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
21
  return (
22
23
24
25
    <div className="flex w-full justify-center items-center my-3 overflow-x-auto">
      <label className="shrink-0 mr-1">
        {element.content.minRateDescription}
      </label>
Lee SeoYeon's avatar
Lee SeoYeon committed
26
      {element.content.choices.map((choice) => (
jang dong hyeok's avatar
jang dong hyeok committed
27
        <div className="flex gap-4 mx-1" key={choice.value}>
28
29
          <button
            type="button"
30
            className="border border-themeColor rounded-full md:w-12 md:h-12 w-9 h-9 text-center hover:bg-slate-300"
31
32
33
34
35
36
37
38
39
            name={choice.text}
            onClick={buttonClick}
            style={{
              backgroundColor:
                selectedchoice === choice.text ? "#58ACFA" : "white",
            }}
          >
            {choice.text}
          </button>
Lee SeoYeon's avatar
Lee SeoYeon committed
40
41
        </div>
      ))}
42
43
44
      <label className="shrink-0 ml-1">
        {element.content.maxRateDescription}
      </label>
Lee SeoYeon's avatar
Lee SeoYeon committed
45
46
47
    </div>
  );
};