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