Commit 7650280d authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Edit 버튼 생성

parent 8b54a1b3
......@@ -118,6 +118,7 @@ const RatingQ: RatingType = {
};
export const CreateSurveyForm = () => {
const [currentId, setCurrentId] = useState<string>("");
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
EssayQ,
RadioQ,
......@@ -125,11 +126,15 @@ export const CreateSurveyForm = () => {
]);
const [survey, setSurvey] = useState();
function changeCurrentId(event: React.MouseEvent<HTMLButtonElement>): void {
setCurrentId(event.currentTarget.id);
}
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;
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);
}
......@@ -157,30 +162,34 @@ export const CreateSurveyForm = () => {
function deleteQuestion(): void {}
return (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<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>
<button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
설문조사 생성
</button>
<>
{console.log(currentId)}
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<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}
changeCurrentId={changeCurrentId}
/>
<div>
<button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
설문조사 생성
</button>
</div>
</div>
</div>
</>
);
};
import React from "react";
type Props = {
id: string;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
export const Edit = ({ id, changeCurrentId }: Props) => {
return (
<button id={id} className="" onClick={changeCurrentId}>
수정
</button>
);
};
import React, { useState } from "react";
import { EssayType } from "./CreateSurveyFormPage";
import { Edit } from "./Edit";
type Props = {
element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
export const QEssay = ({ element, QuestionListChange }: Props) => {
export const QEssay = ({
element,
QuestionListChange,
changeCurrentId,
}: 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">
......@@ -52,6 +58,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>
<Edit id={element.id} changeCurrentId={changeCurrentId} />
</div>
</div>
);
......
......@@ -44,12 +44,19 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
></input>
</div>
<div className="flex mt-4">
{element.content.choices.map((e: string) => (
{element.content.choices.map((e: string, index: number) => (
<div>
<input type="radio" id={e} name="choice" value={e} checked={false} />
<input
type="radio"
id={element.id}
name="choice"
value={e}
disabled
/>
<input
type="text"
name="content"
name={"choice" + `${index}`}
// key={`${index}`}
className="mx-2 border-b-2"
placeholder={e}
onChange={QuestionListChange}
......
......@@ -11,12 +11,14 @@ type Props = {
questionList: BasicQuestionType[];
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
addQuestion: () => void;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
export const Question = ({
questionList,
QuestionListChange,
addQuestion,
changeCurrentId,
}: Props) => {
return (
<>
......@@ -28,6 +30,7 @@ export const Question = ({
<QEssay
element={element}
QuestionListChange={QuestionListChange}
changeCurrentId={changeCurrentId}
/>
);
case "radio":
......
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