Commit 7035f39e authored by jang dong hyeok's avatar jang dong hyeok
Browse files

changeDD함수로 questionList접근해서 type바꾸기

parent 37cfe93b
......@@ -2,6 +2,7 @@ import React from "react";
import { CheckboxType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
import { TypeChange } from "./typeDD";
type Props = {
element: CheckboxType;
......@@ -21,22 +22,7 @@ export const QCheckbox = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<select
id="Questions"
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" selected>
체크박스(객관식)
</option>
<option value="file">파일업로드</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
<TypeChange tt="checkbox" />
</div>
<div className="flex w-full justify-center">
<input
......
import React from "react";
import { DropdownType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: DropdownType;
......@@ -19,22 +20,7 @@ export const QDropdown = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<select
id="Questions"
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" selected>
드롭다운(객관식)
</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file">파일업로드</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
<TypeChange tt="dropdown" />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -2,6 +2,7 @@ import React, { useState } from "react";
import { EssayType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
import { TypeChange } from "./typeDD";
type Props = {
element: EssayType;
......@@ -21,22 +22,8 @@ export const QEssay = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<select
id="Questions"
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>
<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>
{/* <TypeChange tt={"essay"} id={element._id} /> */}
<TypeChange tt={"essay"} />
</div>
<div className="flex w-full justify-center">
<input
......
import React, { useState } from "react";
import { FileType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: FileType;
......@@ -20,22 +21,7 @@ export const QFile = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<select
id="Questions"
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" selected>
파일업로드
</option>
<option value="rating">선형</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
<TypeChange tt="file" />
</div>
<div className="flex w-full justify-center">
<input
......
import React from "react";
import { RadioType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: RadioType;
......@@ -19,21 +20,7 @@ export const QRadio = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></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"
>
<option>질문종류</option>
<option value="Essay">주관식</option>
<option value="MultipleChoice" selected>
객관식
</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox">체크박스(객관식)</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
</select>
<TypeChange tt="radio" />
</div>
<div className="flex w-full justify-center">
<input
......
import React from "react";
import { RatingType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: RatingType;
......@@ -21,22 +22,7 @@ export const QRating = ({ element }: Props) => {
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>
<TypeChange tt="rating" />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -7,6 +7,7 @@ import React, {
} from "react";
import axios from "axios";
import { BasicQuestionType } from "./CreateSurveyFormPage";
import e from "express";
interface IQuestionContext {
questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
......@@ -14,6 +15,7 @@ interface IQuestionContext {
editClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
currentId: string;
addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
questionTypeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}
const QuestionContext = createContext<IQuestionContext>({
......@@ -22,6 +24,7 @@ const QuestionContext = createContext<IQuestionContext>({
editClick: () => {},
currentId: "",
addQuestion: async () => {},
questionTypeChange: () => {},
});
export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
......@@ -37,6 +40,13 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
obj[targetKey] = e.target.value;
setQuestionList(newList);
}
function questionTypeChange(e: React.ChangeEvent<HTMLSelectElement>): void {
const newType: BasicQuestionType[] = [...questionList];
const objType: any = newType.find((t) => t._id === e.target.id);
const targetType: string = e.target.name;
objType[targetType] = e.target.value;
setQuestionList(newType);
}
async function addQuestion(e: React.MouseEvent<HTMLButtonElement>) {
try {
......@@ -71,6 +81,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
questionList,
editClick,
currentId,
questionTypeChange,
}}
>
{children}
......
import React, { ChangeEvent, useState } from "react";
import { useQuestion } from "./question.context";
type typeChangeProps = {
tt: string;
};
export function TypeChange({ tt }: typeChangeProps) {
const { questionTypeChange } = useQuestion();
const typeDD = new Map([
["essay", "주관식"],
["radio", "객관식"],
["dropdown", "드롭다운(객관식)"],
["checkbox", "체크박스"],
["file", "파일"],
["rating", "선형"],
["grid", "그리드"],
["date", "날짜"],
]);
function changeDD(e: ChangeEvent<HTMLSelectElement>) {
const tt = e.target.value;
questionTypeChange(e);
console.log(tt);
//if문으로 type별로 content 바뀌게 해보기
}
return (
<select
id="Questions"
name="type"
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"
defaultValue={tt}
onChange={changeDD}
>
{Array.from(typeDD.entries()).map(([k, v]) => (
<option value={k}>{v}</option>
))}
</select>
);
}
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