Skip to content

GitLab

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

Type, 함수들 Question->Page

parent 6702d090
Hide whitespace changes
Inline Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
View file @ f10cce0d
import React from "react"; import React, { useState } from "react";
import { Question } from "./Question"; import { Question } from "./Question";
interface BasicQuestionType { export interface BasicQuestionType {
type: string; type: string;
name: string; id: string;
title: string; title: string;
isRequired: boolean; 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 {} const EssayQ: EssayType = {
let EssayQ: EssayType = { type: "essay",
type: "comment", id: "000000000000",
name: "Question1", title: "Question1",
title: "제목을 입력하세요",
isRequired: false, 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 { export const CreateSurveyForm = () => {
hasOther: boolean; const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
choices: any; EssayQ,
otherText: string; RadioQ,
} CheckboxQ,
]);
const [survey, setSurvey] = useState();
export const CreateSurveyForm = () => ( function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
<div className="flex flex-col place-items-center"> const newList: BasicQuestionType[] = [...questionList];
<div className="flex flex-col container place-items-center"> const targetId: any = e.target.name;
<input const obj: any = newList.find((a) => a.id === e.target.id);
type="text" obj[targetId] = e.target.value;
className="font-bold text-4xl text-center m-2 border-b-2" setQuestionList(newList);
placeholder="설문지 제목" }
></input>
<textarea
className="font-bold text-1xl text-center m-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
rows={2}
cols={60}
></textarea>
</div>
<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>
</div> );
); };
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @ f10cce0d
import React from "react"; import React from "react";
import { CheckboxType } from "./Question"; import { CheckboxType } from "./CreateSurveyFormPage";
type Props = { type Props = {
element: CheckboxType; element: CheckboxType;
...@@ -19,18 +19,19 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => ( ...@@ -19,18 +19,19 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
></input> ></input>
<select <select
id="Questions" 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>질문종류</option>
<option value="Essay">주관식</option> <option value="essay">주관식</option>
<option value="MultipleChoice">객관식</option> <option value="radio">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option> <option value="dropdown">드롭다운(객관식)</option>
<option value="CheckBox" selected> <option value="checkbox" selected>
체크박스(객관식) 체크박스(객관식)
</option> </option>
<option value="Rating">선형</option> <option value="file">파일업로드</option>
<option value="Grid">그리드</option> <option value="rating">선형</option>
<option value="Date">날짜</option> <option value="grid">그리드</option>
<option value="date">날짜</option>
</select> </select>
</div> </div>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
......
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @ f10cce0d
import React from "react"; import React from "react";
import { DropdownType } from "./Question"; import { DropdownType } from "./CreateSurveyFormPage";
type Props = { type Props = {
element: DropdownType; element: DropdownType;
...@@ -19,18 +19,19 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => ( ...@@ -19,18 +19,19 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
></input> ></input>
<select <select
id="Questions" 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>질문종류</option>
<option value="Essay">주관식</option> <option value="essay">주관식</option>
<option value="MultipleChoice">객관식</option> <option value="radio">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option> <option value="dropdown" selected>
<option value="CheckBox" selected> 드롭다운(객관식)
체크박스(객관식)
</option> </option>
<option value="Rating">선형</option> <option value="checkbox">체크박스(객관식)</option>
<option value="Grid">그리드</option> <option value="file">파일업로드</option>
<option value="Date">날짜</option> <option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select> </select>
</div> </div>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
......
frontend/src/CreateSurveyForm/QAssay.tsx → frontend/src/CreateSurveyForm/QEssay.tsx
View file @ f10cce0d
import React, { useState } from "react"; import React, { useState } from "react";
import { EssayType } from "./Question"; import { EssayType } from "./CreateSurveyFormPage";
type Props = { type Props = {
element: EssayType; element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void; QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QAssay = ({ element, QuestionListChange }: Props) => { export const QEssay = ({ element, QuestionListChange }: Props) => {
return ( 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 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"> <div className="flex h-16 w-full place-content-between items-center">
<input <input
type="text" type="text"
name={element.name} name="title"
id="title" id={element.id}
className="text-xl font-bold ml-6 border-b-2 w-1/2" className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title} placeholder={element.title}
onChange={QuestionListChange} onChange={QuestionListChange}
...@@ -23,22 +23,23 @@ export const QAssay = ({ element, QuestionListChange }: Props) => { ...@@ -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" 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>질문종류</option>
<option value="Essay" selected> <option value="essay" selected>
주관식 주관식
</option> </option>
<option value="MultipleChoice">객관식</option> <option value="radio">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option> <option value="dropdown">드롭다운(객관식)</option>
<option value="CheckBox">체크박스(객관식)</option> <option value="checkbox">체크박스(객관식)</option>
<option value="Rating">선형</option> <option value="file">파일업로드</option>
<option value="Grid">그리드</option> <option value="rating">선형</option>
<option value="Date">날짜</option> <option value="grid">그리드</option>
<option value="date">날짜</option>
</select> </select>
</div> </div>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<input <input
type="text" type="text"
name={element.name} name="comment"
id="comment" id={element.id}
className="border w-11/12" className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요" placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange} onChange={QuestionListChange}
......
frontend/src/CreateSurveyForm/QFile.tsx
View file @ f10cce0d
import React, { useState } from "react"; import React, { useState } from "react";
import { FileType } from "./Question"; import { FileType } from "./CreateSurveyFormPage";
type Props = { type Props = {
element: FileType; element: FileType;
...@@ -23,15 +23,16 @@ export const QFile = ({ element, QuestionListChange }: Props) => { ...@@ -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" 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>질문종류</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>
<option value="MultipleChoice">객관식</option> <option value="rating">선형</option>
<option value="Dropdown">드롭다운(객관식)</option> <option value="grid">그리드</option>
<option value="CheckBox">체크박스(객관식)</option> <option value="date">날짜</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
</select> </select>
</div> </div>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
......
frontend/src/CreateSurveyForm/QRadio.tsx
View file @ f10cce0d
import React from "react"; import React from "react";
import { RadioType } from "./Question"; import { RadioType } from "./CreateSurveyFormPage";
type Props = { type Props = {
element: RadioType; element: RadioType;
...@@ -11,8 +11,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => ( ...@@ -11,8 +11,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div className="flex h-16 w-full place-content-between items-center"> <div className="flex h-16 w-full place-content-between items-center">
<input <input
type="text" type="text"
name={element.name} id={element.id}
id="title" name="title"
className="text-xl font-bold ml-6 border-b-2 w-1/2" className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title} placeholder={element.title}
onChange={QuestionListChange} onChange={QuestionListChange}
...@@ -36,8 +36,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => ( ...@@ -36,8 +36,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<input <input
type="text" type="text"
name={element.name} id={element.id}
id="comment" name="comment"
className="border w-11/12" className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요" placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange} onChange={QuestionListChange}
......
frontend/src/CreateSurveyForm/Question.tsx
View file @ f10cce0d
import React, { useState } from "react"; import React, { useState } from "react";
import { QAssay } from "./QAssay"; import { BasicQuestionType } from "./CreateSurveyFormPage";
import { QEssay } from "./QEssay";
import { QCheckbox } from "./QCheckbox"; import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio"; import { QRadio } from "./QRadio";
import { QDropdown } from "./QDropdown"; import { QDropdown } from "./QDropdown";
import { QFile } from "./QFile"; import { QFile } from "./QFile";
export interface BasicQuestionType { type Props = {
type: string; questionList: BasicQuestionType[];
name: string; QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
title: string; addQuestion: () => void;
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: "",
},
}; };
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ]; export const Question = ({
questionList,
export const Question = () => { QuestionListChange,
const [questionList, setQuestionList] = useState<BasicQuestionType[]>([ addQuestion,
EssayQ, }: Props) => {
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);
}
return ( return (
<> <>
{console.log(questionList)} {console.log(questionList)}
{questionList.map((element) => { {questionList.map((element) => {
switch (element.type) { switch (element.type) {
case "assay": case "essay":
return ( return (
<QAssay <QEssay
element={element} element={element}
QuestionListChange={QuestionListChange} QuestionListChange={QuestionListChange}
/> />
...@@ -154,10 +57,14 @@ export const Question = () => { ...@@ -154,10 +57,14 @@ export const Question = () => {
QuestionListChange={QuestionListChange} QuestionListChange={QuestionListChange}
/> />
); );
default: default:
break; break;
} }
})} })}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
<button onClick={addQuestion}>질문 추가</button>
</div>
</> </>
); );
}; };
src/config.ts
View file @ f10cce0d
export const mongoUri = "mongodb://localhost/survey"; export const mongoUri = "mongodb://localhost:27017/survey";
export const jwtCofig = { export const jwtCofig = {
secret: "HelloSecretString", 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