Commit 1e910f2e authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

Merge branch 'develop'

parents 5c9540ec 2e1489ce
import React, { useState } from "react"; import React, { useState } from "react";
import { Question } from "./Question"; import { Question } from "./Question";
import { QuestionProvider } from "./question.context";
export interface BasicQuestionType { export interface BasicQuestionType {
type: string; type: string;
id: string; _id: string;
title: string; title: string;
isRequired: boolean; isRequired: boolean;
comment: string; comment: string;
...@@ -38,8 +39,10 @@ export interface FileType extends BasicQuestionType { ...@@ -38,8 +39,10 @@ export interface FileType extends BasicQuestionType {
} }
export interface RatingType extends BasicQuestionType { export interface RatingType extends BasicQuestionType {
content: { content: {
rateMin: number; rateValues: {
rateMax: number; value: number;
text: string;
}[];
minRateDescription: string; minRateDescription: string;
maxRateDescription: string; maxRateDescription: string;
}; };
...@@ -47,7 +50,7 @@ export interface RatingType extends BasicQuestionType { ...@@ -47,7 +50,7 @@ export interface RatingType extends BasicQuestionType {
const EssayQ: EssayType = { const EssayQ: EssayType = {
type: "essay", type: "essay",
id: "000000000000", _id: "000000000000",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
...@@ -55,7 +58,7 @@ const EssayQ: EssayType = { ...@@ -55,7 +58,7 @@ const EssayQ: EssayType = {
}; };
const RadioQ: RadioType = { const RadioQ: RadioType = {
type: "radio", type: "radio",
id: "000000000001", _id: "000000000001",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
...@@ -67,7 +70,7 @@ const RadioQ: RadioType = { ...@@ -67,7 +70,7 @@ const RadioQ: RadioType = {
}; };
const CheckboxQ: CheckboxType = { const CheckboxQ: CheckboxType = {
type: "checkbox", type: "checkbox",
id: "000000000002", _id: "000000000002",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
...@@ -78,7 +81,7 @@ const CheckboxQ: CheckboxType = { ...@@ -78,7 +81,7 @@ const CheckboxQ: CheckboxType = {
}; };
const DropdownQ: DropdownType = { const DropdownQ: DropdownType = {
type: "dropdown", type: "dropdown",
id: "000000000003", _id: "000000000003",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
...@@ -89,7 +92,7 @@ const DropdownQ: DropdownType = { ...@@ -89,7 +92,7 @@ const DropdownQ: DropdownType = {
}; };
const FileQ: FileType = { const FileQ: FileType = {
type: "file", type: "file",
id: "000000000004", _id: "000000000004",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
...@@ -100,82 +103,52 @@ const FileQ: FileType = { ...@@ -100,82 +103,52 @@ const FileQ: FileType = {
}; };
const RatingQ: RatingType = { const RatingQ: RatingType = {
type: "rating", type: "rating",
id: "000000000005", _id: "000000000005",
title: "Question Title", title: "Question Title",
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
content: { content: {
rateMin: 0, rateValues: [
rateMax: 10, { value: 1, text: "1" },
{ value: 2, text: "2" },
{ value: 3, text: "3" },
],
minRateDescription: "가장 낮음", minRateDescription: "가장 낮음",
maxRateDescription: "가장 높음", maxRateDescription: "가장 높음",
}, },
}; };
export const CreateSurveyForm = () => { export const CreateSurveyForm = () => {
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
EssayQ,
RadioQ,
CheckboxQ,
]);
const [survey, setSurvey] = useState(); const [survey, setSurvey] = useState();
const [error, setError] = useState("");
function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void { const [disabled, setDisabled] = useState(false);
const newList: BasicQuestionType[] = [...questionList]; const [success, setSuccess] = useState(false);
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 ( return (
<div className="flex flex-col place-items-center"> <>
<div className="flex flex-col container place-items-center mt-4"> <QuestionProvider>
<input <div className="flex flex-col place-items-center">
type="text" <div className="flex flex-col container place-items-center mt-4">
className="font-bold text-4xl text-center m-2 border-b-2" <input
placeholder="설문지 제목" type="text"
></input> className="font-bold text-4xl text-center m-2 border-b-2"
<textarea placeholder="설문지 제목"
className="font-bold text-1xl text-center m-2 resize-none" ></input>
placeholder="설문조사에 대한 설명을 입력해주세요" <textarea
rows={2} className="font-bold text-1xl text-center m-2 resize-none"
cols={60} placeholder="설문조사에 대한 설명을 입력해주세요"
></textarea> rows={2}
</div> cols={60}
<Question ></textarea>
questionList={questionList} </div>
QuestionListChange={QuestionListChange} <Question />
addQuestion={addQuestion} <div>
/> <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
<div> 설문조사 생성
<button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white"> </button>
설문조사 생성 </div>
</button> </div>
</div> </QuestionProvider>
</div> </>
); );
}; };
import React from "react";
import { useQuestion } from "./question.context";
type Props = {
id: string;
};
export const Edit = ({ id }: Props) => {
const { editClick } = useQuestion();
return (
<button id={id} className="w-1/12" onClick={editClick}>
수정
</button>
);
};
import React from "react"; import React from "react";
import { CheckboxType } from "./CreateSurveyFormPage"; import { CheckboxType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
type Props = { type Props = {
element: CheckboxType; element: CheckboxType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QCheckbox = ({ element, QuestionListChange }: Props) => ( export const QCheckbox = ({ element }: Props) => {
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"> const { questionListChange } = useQuestion();
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<input return (
type="text" <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
name={element.name} <div className="flex flexgi-row h-16 w-full place-content-between items-center">
id="title" <input
className="text-xl font-bold ml-6 border-b-2 w-1/2" type="text"
placeholder={element.title} name="title"
onChange={QuestionListChange} id={element._id}
></input> className="text-xl font-bold ml-6 border-b-2 w-1/2"
<select placeholder={element.title}
id="Questions" onChange={questionListChange}
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" ></input>
> <select
<option>질문종류</option> id="Questions"
<option value="essay">주관식</option> 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 value="radio">객관식</option> >
<option value="dropdown">드롭다운(객관식)</option> <option>질문종류</option>
<option value="checkbox" selected> <option value="essay">주관식</option>
체크박스(객관식) <option value="radio">객관식</option>
</option> <option value="dropdown">드롭다운(객관식)</option>
<option value="file">파일업로드</option> <option value="checkbox" selected>
<option value="rating">선형</option> 체크박스(객관식)
<option value="grid">그리드</option> </option>
<option value="date">날짜</option> <option value="file">파일업로드</option>
</select> <option value="rating">선형</option>
</div> <option value="grid">그리드</option>
<div className="flex w-full justify-center"> <option value="date">날짜</option>
<input </select>
type="text" </div>
name={element.name} <div className="flex w-full justify-center">
id="comment" <input
className="border w-11/12" type="text"
placeholder="질문에 대한 설명을 입력해주세요" name="comment"
onChange={QuestionListChange} id={element._id}
></input> className="border w-11/12"
</div> placeholder="질문에 대한 설명을 입력해주세요"
<div id="commentarea" className="flex mt-4"> onChange={questionListChange}
{element.content.choices.map((e: string) => ( ></input>
<div> </div>
<input type="checkbox" checked={false}></input> <div id="commentarea" className="flex mt-4">
<input {element.content.choices.map((e: string) => (
type="text" <div>
className="mx-2 border-b-2" <input type="checkbox" checked={false}></input>
placeholder={e} <input
></input> type="text"
</div> className="mx-2 border-b-2"
))} placeholder={e}
</div> ></input>
<div className="flex w-full flex-row justify-end py-2"> </div>
<button className="w-1/12">필수</button> ))}
<button className="w-1/12">옵션</button> </div>
<button className="w-1/12">삭제</button> <div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
<Edit id={element._id} />
</div>
</div> </div>
</div> );
); };
import { useQuestion } from "./question.context";
import React from "react"; import React from "react";
import { DropdownType } from "./CreateSurveyFormPage"; import { DropdownType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = { type Props = {
element: DropdownType; element: DropdownType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QDropdown = ({ element, QuestionListChange }: Props) => ( export const QDropdown = ({ element }: Props) => {
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"> const { questionListChange } = useQuestion();
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> return (
<input <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
type="text" <div className="flex flexgi-row h-16 w-full place-content-between items-center">
name={element.name} <input
id="title" type="text"
className="text-xl font-bold ml-6 border-b-2 w-1/2" name="title"
placeholder={element.title} id={element._id}
onChange={QuestionListChange} className="text-xl font-bold ml-6 border-b-2 w-1/2"
></input> placeholder={element.title}
<select onChange={questionListChange}
id="Questions" ></input>
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" <select
> id="Questions"
<option>질문종류</option> 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 value="essay">주관식</option> >
<option value="radio">객관식</option> <option>질문종류</option>
<option value="dropdown" selected> <option value="essay">주관식</option>
드롭다운(객관식) <option value="radio">객관식</option>
</option> <option value="dropdown" selected>
<option value="checkbox">체크박스(객관식)</option> 드롭다운(객관식)
<option value="file">파일업로드</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>
</select> <option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={questionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => (
<div>
<input type="checkbox" checked={false}></input>
<input
type="text"
className="mx-2 border-b-2"
placeholder={e}
></input>
</div>
))}
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div> </div>
<div className="flex w-full justify-center"> );
<input };
type="text"
name={element.name}
id="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => (
<div>
<input type="checkbox" checked={false}></input>
<input
type="text"
className="mx-2 border-b-2"
placeholder={e}
></input>
</div>
))}
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
import React, { useState } from "react"; import React, { useState } from "react";
import { EssayType } from "./CreateSurveyFormPage"; import { EssayType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
type Props = { type Props = {
element: EssayType; element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QEssay = ({ element, QuestionListChange }: Props) => { export const QEssay = ({ element }: Props) => {
const { questionListChange } = useQuestion();
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="title" name="title"
id={element.id} 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}
></input> ></input>
<select <select
id="Questions" id="Questions"
...@@ -39,10 +42,10 @@ export const QEssay = ({ element, QuestionListChange }: Props) => { ...@@ -39,10 +42,10 @@ export const QEssay = ({ element, QuestionListChange }: Props) => {
<input <input
type="text" type="text"
name="comment" name="comment"
id={element.id} id={element._id}
className="border w-11/12" className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요" placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange} onChange={questionListChange}
></input> ></input>
</div> </div>
<div id="commentarea" className="flex mt-4 w-full justify-center"> <div id="commentarea" className="flex mt-4 w-full justify-center">
...@@ -52,6 +55,7 @@ export const QEssay = ({ element, QuestionListChange }: Props) => { ...@@ -52,6 +55,7 @@ export const QEssay = ({ element, QuestionListChange }: Props) => {
<button className="w-1/12">필수</button> <button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button> <button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button> <button className="w-1/12">삭제</button>
<Edit id={element._id} />
</div> </div>
</div> </div>
); );
......
import React, { useState } from "react"; import React, { useState } from "react";
import { FileType } from "./CreateSurveyFormPage"; import { FileType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = { type Props = {
element: FileType; element: FileType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QFile = ({ element, QuestionListChange }: Props) => { export const QFile = ({ element }: Props) => {
const { questionListChange } = useQuestion();
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}
></input> ></input>
<select <select
id="Questions" id="Questions"
...@@ -38,11 +40,11 @@ export const QFile = ({ element, QuestionListChange }: Props) => { ...@@ -38,11 +40,11 @@ export const QFile = ({ 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} name="comment"
id="comment" id={element._id}
className="border w-11/12" className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요" placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange} onChange={questionListChange}
></input> ></input>
</div> </div>
<div id="commentarea" className="flex mt-4 w-full justify-center"> <div id="commentarea" className="flex mt-4 w-full justify-center">
......
import { useQuestion } from "./question.context";
import React from "react"; import React from "react";
import { RadioType } from "./CreateSurveyFormPage"; import { RadioType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = { type Props = {
element: RadioType; element: RadioType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}; };
export const QRadio = ({ element, QuestionListChange }: Props) => ( export const QRadio = ({ element }: Props) => {
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"> const { questionListChange } = useQuestion();
<div className="flex h-16 w-full place-content-between items-center"> return (
<input <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
type="text" <div className="flex h-16 w-full place-content-between items-center">
id={element.id} <input
name="title" type="text"
className="text-xl font-bold ml-6 border-b-2 w-1/2" name="title"
placeholder={element.title} id={element._id}
onChange={QuestionListChange} className="text-xl font-bold ml-6 border-b-2 w-1/2"
></input> placeholder={element.title}
<select onChange={questionListChange}
id="Questions" ></input>
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" <select
> id="Questions"
<option>질문종류</option> 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"
<option value="Essay">주관식</option> >
<option value="MultipleChoice" selected> <option>질문종류</option>
객관식 <option value="Essay">주관식</option>
</option> <option value="MultipleChoice" selected>
<option value="Dropdown">드롭다운(객관식)</option> 객관식
<option value="CheckBox">체크박스(객관식)</option> </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>
</select> <option value="Grid">그리드</option>
</div> <option value="Date">날짜</option>
<div className="flex w-full justify-center"> </select>
<input </div>
type="text" <div className="flex w-full justify-center">
id={element.id} <input
name="comment" type="text"
className="border w-11/12" name="comment"
placeholder="질문에 대한 설명을 입력해주세요" id={element._id}
onChange={QuestionListChange} className="border w-11/12"
></input> placeholder="질문에 대한 설명을 입력해주세요"
</div> onChange={questionListChange}
<div className="flex mt-4"> ></input>
{element.content.choices.map((e: string) => ( </div>
<div> <div className="flex mt-4">
<input type="radio" id={e} name="choice" value={e} checked={false} /> {element.content.choices.map((e: string, index: number) => (
<input <div>
type="text" <input
name="content" type="radio"
className="mx-2 border-b-2" id={element._id}
placeholder={e} name="choice"
onChange={QuestionListChange} value={e}
></input> disabled
<button></button> />
</div> <input
))} type="text"
{/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2"> name={"choice" + `${index}`}
// key={`${index}`}
className="mx-2 border-b-2"
placeholder={e}
onChange={questionListChange}
></input>
<button></button>
</div>
))}
{/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+ +
</button> */} </button> */}
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div> </div>
<div className="flex w-full flex-row justify-end py-2"> );
<button className="w-1/12">필수</button> };
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
import React from "react";
import { RatingType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = {
element: RatingType;
// deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export const QRating = ({ element }: Props) => {
const { questionListChange } = useQuestion();
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="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={questionListChange}
></input>
<select
id={element._id}
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="radio">객관식</option>
<option value="dropdown">드롭다운(객관식)</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file">파일업로드</option>
<option value="rating" selected>
선형
</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={questionListChange}
></input>
</div>
<div className="flex place-content-between items-center p-5">
<input
name="minRateDescription"
id={element._id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.minRateDescription}
></input>
{element.content.rateValues.map((e) => (
<input
name="text"
id={element._id}
type="text"
className="border border-black rounded-full py-1 m-2 text-center"
size={1}
placeholder={e.text}
></input>
))}
<input
name="maxRateDescription"
id={element._id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.maxRateDescription}
></input>
</div>
<div>
<button
// type="button"
name="rateValues"
id={element._id}
className="border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
삭제
</button>
<button className="border border-blue-500 rounded mx-2 px-2">
추가
</button>
</div>
<div className="flex w-full justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
};
import React, { useState } from "react"; import React, { useState } from "react";
import { BasicQuestionType } from "./CreateSurveyFormPage";
import { QEssay } from "./QEssay"; 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";
import { QRating } from "./QRating";
import { useQuestion } from "./question.context";
type Props = { type Props = {};
questionList: BasicQuestionType[];
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void; export const Question = ({}: Props) => {
addQuestion: () => void; const { addQuestion, questionList, currentId } = useQuestion();
};
export const Question = ({
questionList,
QuestionListChange,
addQuestion,
}: Props) => {
return ( return (
<> <>
{console.log(questionList)} {console.log(questionList, currentId)}
{questionList.map((element) => { {questionList.map((element) => {
switch (element.type) { switch (element.type) {
case "essay": case "essay":
return ( return <QEssay element={element} />;
<QEssay
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "radio": case "radio":
return ( return <QRadio element={element} />;
<QRadio
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "checkbox": case "checkbox":
return ( return <QCheckbox element={element} />;
<QCheckbox
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "dropdown": case "dropdown":
return ( return <QDropdown element={element} />;
<QDropdown
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "file": case "file":
return ( return <QFile element={element} />;
<QFile case "rating":
element={element} return <QRating element={element} />;
QuestionListChange={QuestionListChange}
/>
);
default: default:
break; break;
} }
......
import React, {
createContext,
FC,
ReactNode,
useContext,
useState,
} from "react";
import axios from "axios";
import { BasicQuestionType } from "./CreateSurveyFormPage";
interface IQuestionContext {
questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
questionList: BasicQuestionType[];
editClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
currentId: string;
addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
}
const QuestionContext = createContext<IQuestionContext>({
questionListChange: () => {},
questionList: [],
editClick: () => {},
currentId: "",
addQuestion: async () => {},
});
export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>(
[]
);
const [currentId, setCurrentId] = useState<string>("");
function questionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newList: BasicQuestionType[] = [...questionList];
const obj: any = newList.find((a) => a._id === e.target.id); //고유 _id로 질문찾기
const targetKey: any = e.target.name;
obj[targetKey] = e.target.value;
setQuestionList(newList);
}
async function addQuestion(e: React.MouseEvent<HTMLButtonElement>) {
try {
const res = await axios.post("/api/questions/create", {
type: "essay",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: null,
});
console.log(res.data);
setQuestionList([...questionList, res.data]);
// setSuccess(true);
// setError("");
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
function editClick(e: React.MouseEvent<HTMLButtonElement>) {
setCurrentId(e.currentTarget.id);
}
return (
<QuestionContext.Provider
value={{
questionListChange,
addQuestion,
questionList,
editClick,
currentId,
}}
>
{children}
</QuestionContext.Provider>
);
};
export const useQuestion = () => useContext(QuestionContext);
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack TypeScript React TailwindCSS Template</title> <title>Simple Survey Form</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
export * as authCtrl from "./auth.controller"; export * as authCtrl from "./auth.controller";
export * as questionCtrl from "./question.controller";
export * as roleCtrl from "./role.controller"; export * as roleCtrl from "./role.controller";
export * as userCtrl from "./user.controller"; export * as userCtrl from "./user.controller";
import { questionDb } from "../db";
import { asyncWrap } from "../helpers/asyncWrap";
export const createQuestion = asyncWrap(async (req, res) => {
const question = req.body;
console.log("question body", question);
const newQuestion = await questionDb.createQuestion(question);
return res.json(newQuestion);
});
export * as userDb from "./user.db";
export * as roleDb from "./role.db"; export * as roleDb from "./role.db";
export * as questionDb from "./question.db";
export * as userDb from "./user.db";
import { Question, IQuestion } from "../models";
export const createQuestion = async (question: IQuestion) => {
const newQuestion = await Question.create(question);
const newQ = {
_id: newQuestion._id,
type: newQuestion.type,
title: newQuestion.title,
isRequired: newQuestion.isRequired,
comment: newQuestion.comment,
content: newQuestion.content,
}
return newQ;
};
export { default as User, IUser } from "./user.model"; export { default as Question, IQuestion } from "./question.model";
export { default as Role } from "./role.model"; export { default as Role } from "./role.model";
export { default as User, IUser } from "./user.model";
import { model, Schema, Types } from "mongoose";
export interface IQuestion {
type: string;
// id: string;
title?: string;
isRequired: boolean;
comment?: string;
content?: any;
}
const schema = new Schema<IQuestion>({
// id: {type:String},
type:{type:String},
title: {type:String},
isRequired: {type:Boolean},
comment:{type: String},
content:{type: Object},
});
export default model<IQuestion>("Question", schema);
\ No newline at end of file
...@@ -16,7 +16,7 @@ const schema = new Schema<IUser>( ...@@ -16,7 +16,7 @@ const schema = new Schema<IUser>(
{ {
email: { email: {
type: String, type: String,
rquired: true, required: true,
unique: true, unique: true,
validate: [validateEmail, "이메일을 입력해주세요"], validate: [validateEmail, "이메일을 입력해주세요"],
}, },
......
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