Commit 005a4d71 authored by jang dong hyeok's avatar jang dong hyeok
Browse files

.

parent 373fe9c8
......@@ -22,7 +22,7 @@ export const QCheckbox = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="checkbox" id={element._id} />
<TypeChange selectedType="checkbox" id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -20,7 +20,7 @@ export const QDropdown = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="dropdown" id={element._id} />
<TypeChange selectedType="dropdown" id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -23,7 +23,7 @@ export const QEssay = ({ element }: Props) => {
onChange={questionListChange}
></input>
{/* <TypeChange tt={"essay"} id={element._id} /> */}
<TypeChange tt={"essay"} id={element._id} />
<TypeChange selectedType={"essay"} id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -21,7 +21,7 @@ export const QFile = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="file" id={element._id} />
<TypeChange selectedType="file" id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -20,7 +20,7 @@ export const QRadio = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="radio" id={element._id} />
<TypeChange selectedType="radio" id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -22,7 +22,7 @@ export const QRating = ({ element }: Props) => {
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="rating" id={element._id} />
<TypeChange selectedType="rating" id={element._id} />
</div>
<div className="flex w-full justify-center">
<input
......
......@@ -10,7 +10,7 @@ import { questionApi, surveyApi } from "../apis";
interface questionTypeChangeProp {
id: string;
tt: string;
selectedType: string;
}
interface IQuestionContext {
......@@ -22,7 +22,7 @@ interface IQuestionContext {
editCompleteClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
currentId: string;
addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
questionTypeChange: ({ id, tt }: questionTypeChangeProp) => void;
questionTypeChange: ({ id, selectedType }: questionTypeChangeProp) => void;
}
const QuestionContext = createContext<IQuestionContext>({
......@@ -82,12 +82,15 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
setQuestionList(newList);
}
//질문 Type 바꾸는 함수
function questionTypeChange({ id, tt }: questionTypeChangeProp): void {
function questionTypeChange({
id,
selectedType,
}: questionTypeChangeProp): void {
const newType: BasicQuestionType[] = [...questionList];
const objType: any = newType.find((t) => t._id === id);
objType.type = tt;
objType.type = selectedType;
// TODO
if ((tt = "essay")) {
if ((selectedType = "essay")) {
objType.content;
}
setQuestionList(newType);
......
......@@ -3,10 +3,10 @@ import { useQuestion } from "./question.context";
type typeChangeProps = {
id: string;
tt: string;
selectedType: string;
};
export function TypeChange({ tt, id }: typeChangeProps) {
export function TypeChange({ selectedType, id }: typeChangeProps) {
const { questionTypeChange } = useQuestion();
const typeDD = new Map([
......@@ -21,11 +21,11 @@ export function TypeChange({ tt, id }: typeChangeProps) {
]);
function changeDD(e: React.ChangeEvent<HTMLSelectElement>) {
const tt = e.target.value;
const targetType = e.target.value;
// questionTypeChange(e);
console.log(e.target.value);
console.log(id);
questionTypeChange({ id, tt });
questionTypeChange({ id, selectedType });
//if문으로 type별로 content 바뀌게 해보기
}
......@@ -33,8 +33,8 @@ export function TypeChange({ tt, id }: typeChangeProps) {
<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}
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg w-full mr-3 p-2.5"
defaultValue={selectedType}
onChange={changeDD}
>
{Array.from(typeDD.entries()).map(([k, v]) => (
......
......@@ -9,7 +9,7 @@ export const Home = () => (
<div className="flex flex-col place-items-center container">
<div>
<Link
to="/create"
to="/surveys/create"
className="flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg "
>
<div className="text-center w-28 font-bold text-black place-items-center">
......
......@@ -12,7 +12,7 @@ export const Profile = () => {
return (
<div className="flex flex-col items-center">
<div className="m-5">나의 설문조사</div>
<div className="flex flex-row space-x-4 mt-5">
<div className="flex space-x-4 mt-5">
<button
onClick={createSurvey}
className="flex h-60 w-48 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
......@@ -31,7 +31,7 @@ export const Profile = () => {
<div className="px-2 py-2">
<label>설문조사 이름</label>
</div>
<div className="flex justify-end dropdown-toggle">
<div className="flex justify-end">
<select className="py-2 w-14 bg-themeColor rounded text-white">
<option selected>옵션</option>
<option>삭제</option>
......@@ -50,7 +50,7 @@ export const Profile = () => {
<div className="px-2 py-2">
<label>설문조사이름</label>
</div>
<div className="flex justify-end dropdown-toggle">
<div className="flex justify-end">
<select className="py-2 w-14 bg-themeColor rounded text-white">
<option selected>옵션</option>
<option>삭제</option>
......@@ -69,7 +69,7 @@ export const Profile = () => {
<div className="px-2 py-2">
<label>설문조사 이름</label>
</div>
<div className="flex justify-end dropdown-toggle">
<div className="flex justify-end">
<select className="py-2 w-14 bg-themeColor rounded text-white">
<option selected>옵션</option>
<option>삭제</option>
......@@ -88,7 +88,7 @@ export const Profile = () => {
<div className="px-2 py-2">
<label>설문조사 이름</label>
</div>
<div className="flex justify-end dropdown-toggle">
<div className="flex justify-end">
<select className="py-2 w-14 bg-themeColor rounded text-white">
<option selected>옵션</option>
<option>삭제</option>
......
import React from "react";
import { CheckboxType } from "../types";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
import { TypeChange } from "./typeDD";
type Props = {
element: CheckboxType;
};
export const QCheckbox = ({ 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 flexgi-row 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>
<TypeChange tt="checkbox" />
</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: any) => (
<div>
......@@ -46,12 +19,5 @@ export const QCheckbox = ({ element }: Props) => {
</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>
<Edit id={element._id} />
</div>
</div>
);
};
import { useQuestion } from "./question.context";
import React from "react";
import { DropdownType } from "../types";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: DropdownType;
};
export const QDropdown = ({ 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 flexgi-row 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>
<TypeChange tt="dropdown" />
</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: any) => (
<div>
......@@ -44,11 +19,5 @@ export const QDropdown = ({ element }: Props) => {
</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 { EssayType } from "../types";
// import { useQuestion } from "./question.context";
// import { Edit } from "./Edit";
// import { TypeChange } from "./typeDD";
type Props = {
element: EssayType;
};
export const EssayForm = ({ element }: Props) => {
// const { questionListChange } = useQuestion();
return (
<div id="commentarea" className="flex mt-4 w-full justify-center">
<input className="border w-11/12 h-16" disabled></input>
......
import React, { useState } from "react";
import { FileType } from "../types";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: FileType;
};
export const QFile = ({ 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>
<TypeChange tt="file" />
</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 w-full justify-center">
<input type="file" className=" w-11/12 h-16" disabled></input>
</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 { useQuestion } from "./question.context";
import React, { useState } from "react";
import { BasicQuestionType, EssayType } from "../types";
import { EssayForm } from "./EssayForm";
import { RadioForm } from "./RadioForm";
type Props = {
element: BasicQuestionType;
......@@ -32,7 +33,7 @@ export const Question = ({ element }: Props) => {
case "essay":
return <EssayForm element={element} />;
case "radio":
// return <RadioForm element={element} />;
return <RadioForm element={element} />;
case "checkbox":
// return <CheckboxForm element={element} />;
case "dropdown":
......@@ -60,12 +61,12 @@ export const Question = ({ element }: Props) => {
<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"
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg w-full mr-3 p-2.5"
defaultValue={element.type}
onChange={changeDD}
>
{Array.from(typeDD.entries()).map(([k, v]) => (
<option value={k}>{v}</option>
{Array.from(typeDD.entries()).map(([key, value]) => (
<option value={key}>{value}</option>
))}
</select>
</div>
......@@ -81,11 +82,11 @@ export const Question = ({ element }: Props) => {
</div>
{getContent(element)}
<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>
<button id={element.id} className="w-1/12" onClick={handleClick}>
<div className="place-self-end py-2">
<button className="px-0.5">필수</button>
<button className="px-0.5">옵션</button>
<button className="px-0.5">삭제</button>
<button id={element.id} className="px-0.5" onClick={handleClick}>
수정
</button>
</div>
......
import React from "react";
import { RadioType } from "../types";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: RadioType;
};
export const QRadio = ({ element }: Props) => {
const { questionListChange } = useQuestion();
export const RadioForm = ({ element }: 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="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={questionListChange}
></input>
<TypeChange tt="radio" />
</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 mt-4">
{element.content.choices.map((e: any, index: number) => (
<div>
......@@ -42,26 +17,8 @@ export const QRadio = ({ element }: Props) => {
value={e.text}
disabled
/>
<input
type="text"
name={"choice"}
// key={`${index}`}
className="mx-2 border-b-2"
placeholder={e.text}
onChange={questionListChange}
></input>
<button></button>
</div>
))}
{/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+
</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>
);
};
import React from "react";
import { RatingType } from "../types";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
type Props = {
element: RatingType;
......@@ -9,31 +7,7 @@ type Props = {
};
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>
<TypeChange tt="rating" />
</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"
......@@ -60,25 +34,5 @@ export const QRating = ({ element }: Props) => {
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>
);
};
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