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

frontend/src/CreateSurveyForm/question.context.tsx

@@ -86,7 +86,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
   async function addQuestion() {
     try {
       const newQ: BasicQuestionType = await questionApi.createQuestion();
-      setSurvey({ ...survey, questions: [...survey.questions, newQ._id] });
+      setSurvey({ ...survey, questions: [...survey.questions, newQ] });
       setQuestionList([...questionList, newQ]);
       // setSuccess(true);
       // setError("");

frontend/src/SurveyRouter.tsx

@@ -7,6 +7,7 @@ import { SurveyForm } from "./commons";
 import { CreateSurveyForm } from "./CreateSurveyForm";
 import { Home } from "./home";
 import { Profile } from "./profile";
+import { CreateSurvey } from "./survey";
 
 export const SurveyRouter = () => {
   return (
@@ -16,7 +17,7 @@ export const SurveyRouter = () => {
           <Route index element={<Home />} />
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<SignUp />} />
-          <Route path="create" element={<CreateSurveyForm />} />
+          <Route path="surveys/create" element={<CreateSurvey />} />
           <Route path="survey" element={<SurveyForm />} />
           <Route
             path="profile"

frontend/src/profile/Profile.tsx

 import React from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export const Profile = () => {
+  const navigate = useNavigate();
+
+  const createSurvey = () => {
+    // 먼저 서버에 survey 테이블에 새로운 survey 항목 추가 로직 필요
+    navigate("/surveys/create", { replace: true });
+  };
+
   return (
     <div className="flex flex-col items-center">
       <div className="m-5">나의 설문조사</div>
       <div className="flex flex-row space-x-4 mt-5">
-        <Link
-          to="/create"
+        <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 "
         >
           <div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white">
             CREATE NEW SURVEY!
           </div>
-        </Link>
+        </button>
         <div className="w-48 h-60 rounded overflow-hidden border-2">
           <div className="px-6 py-4">
             <p className="text-gray-700 text-base">

frontend/src/questions/CheckboxForm.tsx

+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

+import { useQuestion } from "./question.context";

frontend/src/questions/DropdownForm.tsx

+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

+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

+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

+import { useQuestion } from "./question.context";

frontend/src/questions/Question.tsx

+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

+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

+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

+export { Question } from "./Question";

frontend/src/survey/CreateSurvey.tsx

+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

+export { CreateSurvey } from "./CreateSurvey";

frontend/src/types/index.ts

@@ -10,10 +10,10 @@ export interface SignupUser {
   password: string;
 }
 
-export interface SurveyType{
+export interface SurveyType {
   title: string;
   comment: string;
-  questions: string[];
+  questions: BasicQuestionType[];
 }
 
 export interface BasicQuestionType {