AQuestion.tsx 2.18 KB
Newer Older
1
import React from "react";
Yoon, Daeki's avatar
Yoon, Daeki committed
2
import { BasicQuestionType, AnswerQuestionType } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3
4
5
import { ACheckboxForm } from "./ACheckboxForm";
import { ADateForm } from "./ADateForm";
import { ADropdownForm } from "./ADropdownForm";
6
import { AEssayForm } from "./AEssayForm";
7
import { AFileForm } from "./AFileForm";
8
import { ARadioForm } from "./ARadioForm";
Lee SeoYeon's avatar
Lee SeoYeon committed
9
import { ARatingForm } from "./ARatingForm";
10

Jiwon Yoon's avatar
Jiwon Yoon committed
11
type Props = {
12
  question: BasicQuestionType;
Yoon, Daeki's avatar
Yoon, Daeki committed
13
  answerQuestion: AnswerQuestionType;
14
  addFiles: (oneFile: { questionId: string; file: File }) => void;
15
};
Jiwon Yoon's avatar
Jiwon Yoon committed
16
export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
17
18
19
  function getContent(question: BasicQuestionType) {
    switch (question.type) {
      case "essay":
Jiwon Yoon's avatar
Jiwon Yoon committed
20
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
21
          <AEssayForm element={question} answerQuestion={answerQuestion} />
Jiwon Yoon's avatar
Jiwon Yoon committed
22
        );
23
      case "radio":
Jiwon Yoon's avatar
Jiwon Yoon committed
24
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
25
          <ARadioForm element={question} answerQuestion={answerQuestion} />
Jiwon Yoon's avatar
Jiwon Yoon committed
26
        );
27
      case "checkbox":
Jiwon Yoon's avatar
Jiwon Yoon committed
28
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
29
          <ACheckboxForm element={question} answerQuestion={answerQuestion} />
Jiwon Yoon's avatar
Jiwon Yoon committed
30
        );
31
      case "dropdown":
Jiwon Yoon's avatar
Jiwon Yoon committed
32
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
33
          <ADropdownForm element={question} answerQuestion={answerQuestion} />
Jiwon Yoon's avatar
Jiwon Yoon committed
34
        );
35
36
37
38
      case "file":
        return (
          <AFileForm
            element={question}
Jiwon Yoon's avatar
Jiwon Yoon committed
39
            answerQuestion={answerQuestion}
40
41
42
            addFiles={addFiles}
          />
        );
Lee SeoYeon's avatar
Lee SeoYeon committed
43
      case "rating":
Jiwon Yoon's avatar
Jiwon Yoon committed
44
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
45
          <ARatingForm element={question} answerQuestion={answerQuestion} />
Jiwon Yoon's avatar
Jiwon Yoon committed
46
        );
Lee SeoYeon's avatar
Lee SeoYeon committed
47
      case "date":
Jiwon Yoon's avatar
Jiwon Yoon committed
48
        return <ADateForm element={question} answerQuestion={answerQuestion} />;
49
50
51
52
53
54
      default:
        return <></>;
    }
  }

  return (
jang dong hyeok's avatar
jang dong hyeok committed
55
    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4 rounded-lg">
jang dong hyeok's avatar
jang dong hyeok committed
56
      <div className="flex my-1 w-11/12 place-content-between items-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
57
        <div className="text-xl font-bold">{question.title}</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
58
59
60
61
62
        {question.isRequired ? (
          <div className="text-xs text-red-600">* 필수질문</div>
        ) : (
          <></>
        )}
63
      </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
64
      <div className="w-11/12 text-slate-500">{question.comment}</div>
65
66
67
68
      {getContent(question)}
    </div>
  );
};