Skip to content

GitLab

Commit 74ee10b0 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

develop와 병합하는 중간단계입니다.

parent 73a1e1bc
Show whitespace changes
Inline Side-by-side
frontend/src/CreateSurveyForm/question.context.tsx
View file @ 74ee10b0
...@@ -86,7 +86,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => { ...@@ -86,7 +86,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
async function addQuestion() { async function addQuestion() {
try { try {
const newQ: BasicQuestionType = await questionApi.createQuestion(); const newQ: BasicQuestionType = await questionApi.createQuestion();
setSurvey({ ...survey, questions: [...survey.questions, newQ._id] }); setSurvey({ ...survey, questions: [...survey.questions, newQ] });
setQuestionList([...questionList, newQ]); setQuestionList([...questionList, newQ]);
// setSuccess(true); // setSuccess(true);
// setError(""); // setError("");
......
frontend/src/SurveyRouter.tsx
View file @ 74ee10b0
...@@ -7,6 +7,7 @@ import { SurveyForm } from "./commons"; ...@@ -7,6 +7,7 @@ import { SurveyForm } from "./commons";
import { CreateSurveyForm } from "./CreateSurveyForm"; import { CreateSurveyForm } from "./CreateSurveyForm";
import { Home } from "./home"; import { Home } from "./home";
import { Profile } from "./profile"; import { Profile } from "./profile";
import { CreateSurvey } from "./survey";
export const SurveyRouter = () => { export const SurveyRouter = () => {
return ( return (
...@@ -16,7 +17,7 @@ export const SurveyRouter = () => { ...@@ -16,7 +17,7 @@ export const SurveyRouter = () => {
<Route index element={<Home />} /> <Route index element={<Home />} />
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} /> <Route path="signup" element={<SignUp />} />
<Route path="create" element={<CreateSurveyForm />} /> <Route path="surveys/create" element={<CreateSurvey />} />
<Route path="survey" element={<SurveyForm />} /> <Route path="survey" element={<SurveyForm />} />
<Route <Route
path="profile" path="profile"
......
frontend/src/profile/Profile.tsx
View file @ 74ee10b0
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export const Profile = () => { export const Profile = () => {
const navigate = useNavigate();
const createSurvey = () => {
// 먼저 서버에 survey 테이블에 새로운 survey 항목 추가 로직 필요
navigate("/surveys/create", { replace: true });
};
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 flex-row space-x-4 mt-5">
<Link <button
to="/create" 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 "
> >
<div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white"> <div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white">
CREATE NEW SURVEY! CREATE NEW SURVEY!
</div> </div>
</Link> </button>
<div className="w-48 h-60 rounded overflow-hidden border-2"> <div className="w-48 h-60 rounded overflow-hidden border-2">
<div className="px-6 py-4"> <div className="px-6 py-4">
<p className="text-gray-700 text-base"> <p className="text-gray-700 text-base">
......
frontend/src/questions/CheckboxForm.tsx 0 → 100644
View file @ 74ee10b0
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>
<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>
);
};
frontend/src/questions/DateForm.tsx 0 → 100644
View file @ 74ee10b0
import { useQuestion } from "./question.context";
frontend/src/questions/DropdownForm.tsx 0 → 100644
View file @ 74ee10b0
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>
<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>
);
};
frontend/src/questions/EssayForm.tsx 0 → 100644
View file @ 74ee10b0
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>
</div>
);
};
frontend/src/questions/FileForm.tsx 0 → 100644
View file @ 74ee10b0
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>
);
};
frontend/src/questions/MatrixForm.tsx 0 → 100644
View file @ 74ee10b0
import { useQuestion } from "./question.context";
frontend/src/questions/Question.tsx 0 → 100644
View file @ 74ee10b0
import React, { useState } from "react";
import { BasicQuestionType, EssayType } from "../types";
import { EssayForm } from "./EssayForm";
type Props = {
element: BasicQuestionType;
};
export const Question = ({ element }: Props) => {
const handleClick = () => {};
const typeDD = new Map([
["essay", "주관식"],
["radio", "객관식"],
["dropdown", "드롭다운(객관식)"],
["checkbox", "체크박스"],
["file", "파일"],
["rating", "선형"],
["grid", "그리드"],
["date", "날짜"],
]);
function changeDD(e: React.ChangeEvent<HTMLSelectElement>) {
const tt = e.target.value;
// questionTypeChange(e);
console.log(tt);
//if문으로 type별로 content 바뀌게 해보기
}
function getContent(element: BasicQuestionType) {
switch (element.type) {
case "essay":
return <EssayForm element={element} />;
case "radio":
// return <RadioForm element={element} />;
case "checkbox":
// return <CheckboxForm element={element} />;
case "dropdown":
// return <DropdownForm element={element} />;
case "file":
// return <FileForm element={element} />;
case "rating":
// return <RatingForm element={element} />;
default:
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 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="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={element.type}
onChange={changeDD}
>
{Array.from(typeDD.entries()).map(([k, v]) => (
<option value={k}>{v}</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>
{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}>
수정
</button>
</div>
</div>
);
};
frontend/src/questions/RadioForm.tsx 0 → 100644
View file @ 74ee10b0
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();
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>
<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>
);
};
frontend/src/questions/RatingForm.tsx 0 → 100644
View file @ 74ee10b0
import React from "react";
import { RatingType } from "../types";
import { useQuestion } from "./question.context";
import { TypeChange } from "./typeDD";
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>
<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"
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>
</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>
);
};
frontend/src/questions/index.tsx 0 → 100644
View file @ 74ee10b0
export { Question } from "./Question";
frontend/src/survey/CreateSurvey.tsx 0 → 100644
View file @ 74ee10b0
import React, { FormEvent, useState } from "react";
import { questionApi, surveyApi } from "../apis";
import { Question } from "../questions";
import { BasicQuestionType, SurveyType } from "../types";
export const CreateSurvey = () => {
const [survey, setSurvey] = useState<SurveyType>({
title: "",
comment: "",
questions: [],
});
const handleChange = () => {};
async function handleSubmit(event: FormEvent) {
event.preventDefault();
try {
const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
console.log(newSurvey);
// setSuccess(true);
// setError("");
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
async function addQuestion() {
try {
const newQuestion: BasicQuestionType = await questionApi.createQuestion();
setSurvey({ ...survey, questions: [...survey.questions, newQuestion] });
// setQuestions([...questions, newQuestion]);
// setSuccess(true);
// setError("");
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
const questions = survey.questions;
return (
<>
<form onSubmit={handleSubmit}>
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<input
type="text"
name="title"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
onChange={handleChange}
></input>
<input
type="text"
name="comment"
className="font-bold text-1xl text-center m-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
size={50}
onChange={handleChange}
></input>
</div>
{questions.map((question) => (
<Question element={question} />
))}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
<button type="button" onClick={addQuestion}>
질문 추가
</button>
</div>
<div>
<button
type="submit"
className="border bg-themeColor my-5 py-2 px-3 font-bold text-white"
>
설문조사 생성
</button>
</div>
</div>
</form>
</>
);
};
frontend/src/survey/index.tsx 0 → 100644
View file @ 74ee10b0
export { CreateSurvey } from "./CreateSurvey";
frontend/src/types/index.ts
View file @ 74ee10b0
...@@ -10,10 +10,10 @@ export interface SignupUser { ...@@ -10,10 +10,10 @@ export interface SignupUser {
password: string; password: string;
} }
export interface SurveyType{ export interface SurveyType {
title: string; title: string;
comment: string; comment: string;
questions: string[]; questions: BasicQuestionType[];
} }
export interface BasicQuestionType { export interface BasicQuestionType {
......
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