Merge branch 'answer-structure' into main-answer-structure

docs/overview.drawio

+<mxfile host="65bd71144e">
+    <diagram id="4_LKa-YRAXo4FlEpOd_K" name="페이지-1">
+        <mxGraphModel dx="1549" dy="312" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="33" value="Frontend" style="swimlane;" vertex="1" parent="1">
+                    <mxGeometry x="-180" y="40" width="1080" height="800" as="geometry">
+                        <mxRectangle x="-20" y="40" width="80" height="23" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="2" value="Routes" style="whiteSpace=wrap;html=1;" vertex="1" parent="33">
+                    <mxGeometry x="185" y="40" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="/surveys/edit/:surveyId" style="whiteSpace=wrap;html=1;" vertex="1" parent="33">
+                    <mxGeometry x="320" y="130" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="" style="edgeStyle=none;html=1;" edge="1" parent="33" source="2" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="29" value="&lt;p style=&quot;margin: 0px ; margin-top: 4px ; text-align: center ; text-decoration: underline&quot;&gt;&lt;b&gt;EditSurvey: 설문조사 수정&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;surveyId = useParams()&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;useEffect(&lt;span&gt;surveyApi.getSurvey(surveyId))&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;&lt;br&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 질문 추가: addQuestion()&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 질문 삭제: deleteQuestion()&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;br&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 설문 수정: updateSurvey: await surveyApi.update()&lt;/span&gt;&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;" vertex="1" parent="33">
+                    <mxGeometry x="97.5" y="250" width="295" height="170" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="&lt;span style=&quot;font-size: 12px&quot;&gt;/surveys/edit/:surveyId&lt;br&gt;&lt;/span&gt;" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="33" source="2" target="29">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="340" y="450" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="30" value="&lt;p style=&quot;margin: 0px ; margin-top: 4px ; text-align: center ; text-decoration: underline&quot;&gt;&lt;b&gt;survey.api&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;getSuvey()&lt;br&gt;field2 = value2&lt;br&gt;field3 = value3&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;" vertex="1" parent="33">
+                    <mxGeometry x="460" y="40" width="160" height="90" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file

frontend/src/SurveyRouter.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App";
 import { Login, SignUp } from "./auth";
 import { RequireAuth } from "./auth/RequireAuth";
-import { SurveyForm } from "./commons";
+import { AnswerSurveyForm } from "./answers";
 import { Home } from "./home";
 import { Profile } from "./profile";
 import { EditResultButton } from "./survey";
@@ -22,7 +22,7 @@ export const SurveyRouter = () => {
             <Route path=":surveyId" element={<EditSurvey />} />
             <Route path=":surveyId/result" element={<ResultSurvey />} />
           </Route>
-          <Route path="surveys/:surveyId" element={<SurveyForm />} />
+          <Route path="surveys/:surveyId" element={<AnswerSurveyForm />} />
           <Route
             path="profile"
             element={

frontend/src/commons/ACheckboxForm.tsx → frontend/src/answers/ACheckboxForm.tsx

 import React, { useState } from "react";
-import { CheckboxType, AnswersType } from "../types";
+import { CheckboxType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: CheckboxType;
   answerQuestion: any | undefined;
-};
+}
 
 export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
   const [answer, setAnswer] = useState("");

frontend/src/commons/ADropdownForm.tsx → frontend/src/answers/ADropdownForm.tsx

 import React, { useState } from "react";
-import { DropdownType, AnswersType } from "../types";
+import { DropdownType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: DropdownType;
   answerQuestion: any | undefined;
-};
+}
 
 export const ADropdownForm = ({ element, answerQuestion }: Props) => {
   const [answer, setAnswer] = useState("");

frontend/src/commons/AEssayForm.tsx → frontend/src/answers/AEssayForm.tsx

 import React, { useState } from "react";
-import { EssayType, AnswersType } from "../types";
+import { AnswerProps, EssayType } from "../types";
 
 type Props = {
   element: EssayType;

frontend/src/commons/AFileForm.tsx → frontend/src/answers/AFileForm.tsx

 import React, { useState } from "react";
-import { FileType, AnswersType } from "../types";
+import { FileType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: FileType;
   answerQuestion: any | undefined;
   addFiles: (oneFile: { questionId: string; file: File }) => void;
-};
+}
 
 export const AFileForm = ({ element, answerQuestion, addFiles }: Props) => {
   const [answer, setAnswer] = useState("");

frontend/src/commons/ARadioForm.tsx → frontend/src/answers/ARadioForm.tsx

 import React, { useState } from "react";
-import { RadioType, AnswersType } from "../types";
+import { RadioType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: RadioType;
   answerQuestion: any | undefined;
-};
+}
 
 export const ARadioForm = ({ element, answerQuestion }: Props) => {
   const [answer, setAnswer] = useState("");
@@ -23,7 +23,7 @@ export const ARadioForm = ({ element, answerQuestion }: Props) => {
   return (
     <div className="flex w-full gap-2 justify-around my-3">
       {element.content.choices.map((choice) => (
-        <div>
+        <div key={choice.text}>
           <input
             className="mr-2"
             type="radio"

frontend/src/commons/ARatingForm.tsx → frontend/src/answers/ARatingForm.tsx

 import React, { useState } from "react";
-import { RatingType, AnswersType } from "../types";
+import { RatingType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: RatingType;
   answerQuestion: any | undefined;
-};
+}
 
 export const ARatingForm = ({ element, answerQuestion }: Props) => {
   const [selectedchoice, setSelectedchoice] = useState("");

frontend/src/commons/SurveyForm.tsx → frontend/src/answers/AnswerSurveyForm.tsx

@@ -7,7 +7,7 @@ import { Question } from "../questions";
 import { AnswerType, SurveyType } from "../types";
 import { AQuestion } from "./AQuestion";
 
-export const SurveyForm = () => {
+export const AnswerSurveyForm = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
   const [files, setFiles] = useState<{ questionId: string; file: File }[]>([]);
   const [requiredErrorMessage, setRequiredErrorMessage] = useState("");

frontend/src/answers/index.tsx

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

frontend/src/commons/constants.ts

+export const QUESTION_TYPES = new Map([
+  ["essay", "주관식"],
+  ["radio", "객관식"],
+  ["dropdown", "드롭다운"],
+  ["checkbox", "체크박스"],
+  ["file", "파일"],
+  ["rating", "선형"],
+  ["grid", "그리드"],
+  ["date", "날짜"],
+]);

frontend/src/commons/index.tsx

 export { Header } from "./Header";
-export { SurveyForm } from "./SurveyForm";
+export { QUESTION_TYPES } from "./constants";
\ No newline at end of file

frontend/src/questions/Question.tsx

-import React, { useState, Dispatch, SetStateAction } from "react";
-import { BasicQuestionType, EssayType } from "../types";
+import React, { useState } from "react";
+import { BasicQuestionType } from "../types";
 import { questionApi } from "../apis";
 import { EssayForm } from "./EssayForm";
 import { CheckboxForm } from "./CheckboxForm";
@@ -8,6 +8,7 @@ import { DropdownForm } from "./DropdownForm";
 import { FileForm } from "./FileForm";
 import { RatingForm } from "./RatingForm";
 import { DateForm } from "./DateForm";
+import { QUESTION_TYPES } from "../commons";
 
 type Props = {
   element: BasicQuestionType;
@@ -16,17 +17,6 @@ type Props = {
   isSave: boolean;
 };
 
-const typeDropDown = new Map([
-  ["essay", "주관식"],
-  ["radio", "객관식"],
-  ["dropdown", "드롭다운"],
-  ["checkbox", "체크박스"],
-  ["file", "파일"],
-  ["rating", "선형"],
-  ["grid", "그리드"],
-  ["date", "날짜"],
-]);
-
 export const Question = ({
   element,
   handleQuestion,
@@ -165,13 +155,15 @@ export const Question = ({
           name="type"
           onChange={handleSelect}
           disabled={save}
+          value={element.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"
         >
-          {Array.from(typeDropDown.entries()).map(([key, value]) => (
+          {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
             <option
+              key={key}
               id={element._id}
               value={key}
-              selected={key === element.type}
+              // selected={key === element.type}
             >
               {value}
             </option>

frontend/src/survey/EditSurvey.tsx

@@ -139,6 +139,7 @@ export const EditSurvey = () => {
           </div>
           {questions.map((question) => (
             <Question
+              key={question._id}
               element={question}
               isSave={state ? true : false}
               handleQuestion={handleQuestion}

frontend/src/types/index.ts

@@ -44,22 +44,21 @@ export interface RadioType extends BasicQuestionType {
   };
 }
 
-export interface CheckboxType extends BasicQuestionType {
-  content: {
-    choices: {
+interface IChoices {
   value: number;
   text: string;
-    }[];
+}
+
+export interface CheckboxType extends BasicQuestionType {
+  content: {
+    choices: IChoices[];
     maxCount: number;
   };
 }
 
 export interface DropdownType extends BasicQuestionType {
   content: {
-    choices: {
-      value: number;
-      text: string;
-    }[];
+    choices: IChoices[];
     hasNone: boolean;
   };
 }
@@ -93,3 +92,9 @@ export interface AnswerType {
   guestId: string;
   answers: AnswersType[];
 }
+
+export interface AnswerProps {
+  element: BasicQuestionType;
+  // answers: AnswersType | undefined;
+  // handleAnswer: () => void;
+}