import React, { useState } from "react"; import { Question } from "./Question"; export interface BasicQuestionType { type: string; id: string; title: string; isRequired: boolean; comment: string; content: any; [key: string]: string | number | boolean | any; } export interface EssayType extends BasicQuestionType {} export interface RadioType extends BasicQuestionType { content: { hasOther: boolean; choices: string[]; otherText: string; }; } export interface CheckboxType extends BasicQuestionType { content: { choices: string[]; maxCount: number; }; } export interface DropdownType extends BasicQuestionType { content: { choices: string[]; hasNone: boolean; }; } export interface FileType extends BasicQuestionType { content: { filename: string; value: string; }; } export interface RatingType extends BasicQuestionType { content: { rateMin: number; rateMax: number; minRateDescription: string; maxRateDescription: string; }; } const EssayQ: EssayType = { type: "essay", id: "000000000000", title: "Question1", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: null, }; const RadioQ: RadioType = { type: "radio", id: "000000000001", title: "Question2", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: { hasOther: false, otherText: "", choices: ["radio1", "radio2", "radio3"], }, }; const CheckboxQ: CheckboxType = { type: "checkbox", id: "000000000002", title: "Question3", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: { choices: ["check1", "check2", "check3"], maxCount: 2, }, }; const DropdownQ: DropdownType = { type: "dropdown", id: "000000000003", title: "Question4", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: { choices: ["drop1", "drop2", "drop3"], hasNone: false, }, }; const FileQ: FileType = { type: "file", id: "000000000004", title: "Question5", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: { filename: "", value: "", }, }; const RatingQ: RatingType = { type: "rating", id: "000000000005", title: "Question6", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: { rateMin: 0, rateMax: 10, minRateDescription: "가장 낮음", maxRateDescription: "가장 높음", }, }; export const CreateSurveyForm = () => { const [questionList, setQuestionList] = useState>([ EssayQ, RadioQ, CheckboxQ, ]); const [survey, setSurvey] = useState(); function QuestionListChange(e: React.ChangeEvent): void { const newList: BasicQuestionType[] = [...questionList]; const targetId: any = e.target.name; const obj: any = newList.find((a) => a.id === e.target.id); obj[targetId] = e.target.value; setQuestionList(newList); } function addQuestion(): void { //무작위로 12자리 ID제공, 추후에 질문을 DB에 생성하고 _id를 DB에서 가져오는 것으로 교체할 예정 function getRandomInt(min: number, max: number): string { min = Math.ceil(min); max = Math.floor(max); const randomNum: number = Math.floor(Math.random() * (max - min)) + min; return randomNum.toString(); } const randomId: string = getRandomInt(100000000000, 999999999999); //새로운 질문 생성 const newQ: EssayType = { type: "essay", id: randomId, title: "Question", isRequired: false, comment: "질문에 대한 설명을 입력해주세요", content: null, }; setQuestionList([...questionList, newQ]); } function deleteQuestion(): void {} return (
); };