Commit f10cce0d authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Type, 함수들 Question->Page

parent 6702d090
import React from "react";
import React, { useState } from "react";
import { Question } from "./Question";
interface BasicQuestionType {
export interface BasicQuestionType {
type: string;
name: 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;
};
}
interface EssayType extends BasicQuestionType {}
let EssayQ: EssayType = {
type: "comment",
name: "Question1",
title: "제목을 입력하세요",
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: "가장 높음",
},
};
interface MultiChoiceType extends BasicQuestionType {
hasOther: boolean;
choices: any;
otherText: string;
}
export const CreateSurveyForm = () => {
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
EssayQ,
RadioQ,
CheckboxQ,
]);
const [survey, setSurvey] = useState();
export const CreateSurveyForm = () => (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center">
<input
type="text"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
></input>
<textarea
className="font-bold text-1xl text-center m-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
rows={2}
cols={60}
></textarea>
</div>
function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): 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);
}
<Question />
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]);
}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
질문 추가 +
function deleteQuestion(): void {}
return (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center">
<input
type="text"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
></input>
<textarea
className="font-bold text-1xl text-center m-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
rows={2}
cols={60}
></textarea>
</div>
<Question
questionList={questionList}
QuestionListChange={QuestionListChange}
addQuestion={addQuestion}
/>
</div>
</div>
);
);
};
import React from "react";
import { CheckboxType } from "./Question";
import { CheckboxType } from "./CreateSurveyFormPage";
type Props = {
element: CheckboxType;
......@@ -19,18 +19,19 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
></input>
<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"
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="Essay">주관식</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox" selected>
<option value="essay">주관식</option>
<option value="radio">객관식</option>
<option value="dropdown">드롭다운(객관식)</option>
<option value="checkbox" selected>
체크박스(객관식)
</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
<option value="file">파일업로드</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
......
import React from "react";
import { DropdownType } from "./Question";
import { DropdownType } from "./CreateSurveyFormPage";
type Props = {
element: DropdownType;
......@@ -19,18 +19,19 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
></input>
<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"
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="Essay">주관식</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox" selected>
체크박스(객관식)
<option value="essay">주관식</option>
<option value="radio">객관식</option>
<option value="dropdown" selected>
드롭다운(객관식)
</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file">파일업로드</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
......
import React, { useState } from "react";
import { EssayType } from "./Question";
import { EssayType } from "./CreateSurveyFormPage";
type Props = {
element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QAssay = ({ element, QuestionListChange }: Props) => {
export const QEssay = ({ element, QuestionListChange }: Props) => {
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={element.name}
id="title"
name="title"
id={element.id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
......@@ -23,22 +23,23 @@ export const QAssay = ({ element, QuestionListChange }: Props) => {
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="Essay" selected>
<option value="essay" selected>
주관식
</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox">체크박스(객관식)</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
<option value="radio">객관식</option>
<option value="dropdown">드롭다운(객관식)</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file">파일업로드</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
name="comment"
id={element.id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
......
import React, { useState } from "react";
import { FileType } from "./Question";
import { FileType } from "./CreateSurveyFormPage";
type Props = {
element: FileType;
......@@ -23,15 +23,16 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="Essay" selected>
주관식
<option value="essay">주관식</option>
<option value="radio">객관식</option>
<option value="dropdown">드롭다운(객관식)</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file" selected>
파일업로드
</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox">체크박스(객관식)</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
......
import React from "react";
import { RadioType } from "./Question";
import { RadioType } from "./CreateSurveyFormPage";
type Props = {
element: RadioType;
......@@ -11,8 +11,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
name={element.name}
id="title"
id={element.id}
name="title"
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
......@@ -36,8 +36,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
id={element.id}
name="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
......
import React, { useState } from "react";
import { QAssay } from "./QAssay";
import { BasicQuestionType } from "./CreateSurveyFormPage";
import { QEssay } from "./QEssay";
import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio";
import { QDropdown } from "./QDropdown";
import { QFile } from "./QFile";
export interface BasicQuestionType {
type: string;
name: 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;
};
}
const EssayQ: EssayType = {
type: "assay",
name: "Question1",
title: "Question1",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: null,
};
const RadioQ: RadioType = {
type: "radio",
name: "Question2",
title: "Question2",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
hasOther: false,
otherText: "",
choices: ["radio1", "radio2", "radio3"],
},
};
const CheckboxQ: CheckboxType = {
type: "checkbox",
name: "Question3",
title: "Question3",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
choices: ["check1", "check2", "check3"],
maxCount: 2,
},
};
const DropdownQ: DropdownType = {
type: "dropdown",
name: "Question4",
title: "Question4",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
choices: ["drop1", "drop2", "drop3"],
hasNone: false,
},
};
const FileQ: FileType = {
type: "file",
name: "Question5",
title: "Question5",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
filename: "",
value: "",
},
type Props = {
questionList: BasicQuestionType[];
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
addQuestion: () => void;
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
export const Question = () => {
const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
EssayQ,
RadioQ,
CheckboxQ,
DropdownQ,
FileQ,
]);
// const [survey, setSurvey] = useState();
function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newList: BasicQuestionType[] = [...questionList];
const targetId: any = e.target.id;
const obj: any = newList.find((a) => a.name === e.target.name);
obj[targetId] = e.target.value;
setQuestionList(newList);
}
export const Question = ({
questionList,
QuestionListChange,
addQuestion,
}: Props) => {
return (
<>
{console.log(questionList)}
{questionList.map((element) => {
switch (element.type) {
case "assay":
case "essay":
return (
<QAssay
<QEssay
element={element}
QuestionListChange={QuestionListChange}
/>
......@@ -154,10 +57,14 @@ export const Question = () => {
QuestionListChange={QuestionListChange}
/>
);
default:
break;
}
})}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
<button onClick={addQuestion}>질문 추가</button>
</div>
</>
);
};
export const mongoUri = "mongodb://localhost/survey";
export const mongoUri = "mongodb://localhost:27017/survey";
export const jwtCofig = {
secret: "HelloSecretString",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment