result, answer 로직 및 불필요한 폴더 파일 삭제

frontend/src/questions/EssayForm.tsx → frontend/src/forms/QEssay.tsx

 import React from "react";
-import { IEssay } from "../types";
+import { IQuestionFormProps } from "../types";
 
-type Props = {
-  element: IEssay;
-  isEditing: boolean;
-};
-
-export const EssayForm = ({ element, isEditing: save }: Props) => {
+export const QEssay = ({}: IQuestionFormProps) => {
   return (
     <div id="commentarea" className="flex mt-4 w-full justify-center">
       <input className="border w-11/12 h-16" disabled></input>

frontend/src/questions/FileForm.tsx → frontend/src/forms/QFile.tsx

 import React from "react";
-import { IFile } from "../types";
+import { IQuestionFormProps } from "../types";
 
-type Props = {
-  element: IFile;
-  isEditing: boolean;
-};
-
-export const FileForm = ({ element, isEditing: save }: Props) => {
+export const QFile = ({ element, isEditing }: IQuestionFormProps) => {
   return (
     <div id="content" className="flex mt-4 w-full justify-center">
       <input type="file" className=" w-11/12 h-16" disabled></input>

frontend/src/questions/RadioForm.tsx → frontend/src/forms/QRadio.tsx

 import React, { useState } from "react";
-import { IRadio } from "../types";
+import { IQuestionFormProps } from "../types";
 
-type Props = {
-  element: IRadio;
-  handleQuestion: (id: string) => void;
-  isEditing: boolean;
-};
-
-export const RadioForm = ({ element, handleQuestion, isEditing }: Props) => {
+export const QRadio = ({
+  element,
+  handleQuestion,
+  isEditing,
+}: IQuestionFormProps) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {

frontend/src/questions/RatingForm.tsx → frontend/src/forms/QRating.tsx

 import React, { useState } from "react";
-import { IRating } from "../types";
+import { IQuestionFormProps } from "../types";
 
-type Props = {
-  element: IRating;
-  handleQuestion: (id: string) => void;
-  isEditing: boolean;
-};
-
-export const RatingForm = ({ element, handleQuestion, isEditing }: Props) => {
+export const QRating = ({
+  element,
+  handleQuestion,
+  isEditing,
+}: IQuestionFormProps) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {

frontend/src/results/RCheckboxForm.tsx → frontend/src/forms/RCheckbox.tsx

@@ -5,7 +5,7 @@ type Props = {
   question: IQuestionData;
 };
 
-export const RCheckboxForm = ({ question }: Props) => {
+export const RCheckbox = ({ question }: Props) => {
   const result = question.answers.flat().reduce((acc: any, cur: any) => {
     acc[cur] = (acc[cur] || 0) + 1;
     return acc;
@@ -15,7 +15,7 @@ export const RCheckboxForm = ({ question }: Props) => {
   return (
     <div className="m-5">
       {question.content.choices.map((choice: any) => (
-        <div className="">
+        <div key={choice.text} className="">
           <span className="font-bold">{choice.text}</span>
           <span className="ml-3">
             - {result[choice.text] ? result[choice.text] : 0}

frontend/src/results/RDateForm.tsx → frontend/src/forms/RDate.tsx

@@ -5,11 +5,13 @@ type Props = {
   question: IQuestionData;
 };
 
-export const RDateForm = ({ question }: Props) => {
+export const RDate = ({ question }: Props) => {
   return (
     <div className="m-5">
       {question.answers.map((answer: any) => (
-        <div className="font-bold">{answer}</div>
+        <div key={answer} className="font-bold">
+          {answer}
+        </div>
       ))}
     </div>
   );

frontend/src/results/RDropdownForm.tsx → frontend/src/forms/RDropdown.tsx

@@ -5,7 +5,7 @@ type Props = {
   question: IQuestionData;
 };
 
-export const RDropdownForm = ({ question }: Props) => {
+export const RDropdown = ({ question }: Props) => {
   const result = question.answers.reduce((acc: any, cur: any) => {
     acc[cur] = (acc[cur] || 0) + 1;
     return acc;

frontend/src/results/REssayForm.tsx → frontend/src/forms/REssay.tsx

@@ -5,7 +5,7 @@ type Props = {
   question: IQuestionData;
 };
 
-export const REssayForm = ({ question }: Props) => {
+export const REssay = ({ question }: Props) => {
   return (
     <div className="m-5">
       {question.answers.map((answer: any, index: number) => (

frontend/src/results/RFileForm.tsx → frontend/src/forms/RFile.tsx

-import React from "react";
+import React, { Fragment } from "react";
 import { baseImageUrl } from "../apis";
 
 type Props = {
   question: any;
 };
 
-export const RFileForm = ({ question }: Props) => {
+export const RFile = ({ question }: Props) => {
+  console.log("question", question);
   return (
     <div className="m-5 flex justify-start items-center">
-      {question.answers.map((answer: any) => (
-        <>
+      {question.answers.map((answer: any, index: number) => (
+        <Fragment key={index}>
           <img
             className="h-14"
-            key={answer.url}
+            key={answer[0].url}
             alt="file"
-            src={`${baseImageUrl}/${answer.url}`}
+            src={`${baseImageUrl}/${answer[0].url}`}
           />
-          <div className="ml-3">{answer.name}</div>
-        </>
+          <div className="ml-3">{answer[0].name}</div>
+        </Fragment>
       ))}
     </div>
   );

frontend/src/results/RRadioForm.tsx → frontend/src/forms/RRadio.tsx

@@ -5,7 +5,7 @@ type Props = {
   question: IQuestionData;
 };
 
-export const RRadioForm = ({ question }: Props) => {
+export const RRadio = ({ question }: Props) => {
   const result = question.answers.reduce((acc: any, cur: any) => {
     acc[cur] = (acc[cur] || 0) + 1;
     return acc;

frontend/src/results/RRatingForm.tsx → frontend/src/forms/RRating.tsx

@@ -5,7 +5,7 @@ type Props = {
   question: IQuestionData;
 };
 
-export const RRatingForm = ({ question }: Props) => {
+export const RRating = ({ question }: Props) => {
   const result = question.answers.reduce((acc: any, cur: any) => {
     acc[cur] = (acc[cur] || 0) + 1;
     return acc;
@@ -15,7 +15,7 @@ export const RRatingForm = ({ question }: Props) => {
     <div className="m-5">
       <div>{question.content.minRateDescription}</div>
       {question.content.choices.map((choice: any) => (
-        <div className="">
+        <div key={choice.text} className="">
           <span className="font-bold">{choice.text}</span>
           <span className="ml-3">
             - {result[choice.text] ? result[choice.text] : 0}

frontend/src/forms/index.tsx

+export { QCheckbox } from "./QCheckbox";
+export { QDate } from "./QDate";
+export { QDropdown } from "./QDropdown";
+export { QEssay } from "./QEssay";
+export { QFile } from "./QFile";
+export { QRadio } from "./QRadio";
+export { QRating } from "./QRating";
+export { ACheckbox } from "./ACheckbox";
+export { ADate } from "./ADate";
+export { ADropdown } from "./ADropdown";
+export { AEssay } from "./AEssay";
+export { AFile } from "./AFile";
+export { ARadio } from "./ARadio";
+export { ARating } from "./ARating";
+export { RCheckbox } from "./RCheckbox";
+export { RDate } from "./RDate";
+export { RDropdown } from "./RDropdown";
+export { REssay } from "./REssay";
+export { RFile } from "./RFile";
+export { RRadio } from "./RRadio";
+export { RRating } from "./RRating";

frontend/src/helpers/index.ts

 export { catchErrors } from "./catchErrors";
+export {
+  getElementByQuestionType,
+  getAnswerElementByType,
+} from "./question.helper";

frontend/src/helpers/question.helper.tsx

+import React from "react";
+import {
+  QCheckbox,
+  QDate,
+  QDropdown,
+  QEssay,
+  QFile,
+  QRadio,
+  QRating,
+  ACheckbox,
+  ADate,
+  ADropdown,
+  AEssay,
+  AFile,
+  ARadio,
+  ARating,
+  REssay,
+  RCheckbox,
+  RRadio,
+  RDropdown,
+  RFile,
+  RRating,
+  RDate,
+} from "../forms";
+import { CreateQuestionData, IAnswer, IQuestionData } from "../types";
+
+export const getElementByQuestionType = (
+  element: CreateQuestionData,
+  handleQuestion: Function,
+  isEditing: boolean
+) => {
+  switch (element.type) {
+    case "singletext":
+      return (
+        <QEssay
+          element={element}
+          isEditing={isEditing}
+          handleQuestion={handleQuestion}
+        />
+      );
+    case "radio":
+      return (
+        <QRadio
+          handleQuestion={handleQuestion}
+          element={element}
+          isEditing={isEditing}
+        />
+      );
+    case "checkbox":
+      return (
+        <QCheckbox
+          handleQuestion={handleQuestion}
+          element={element}
+          isEditing={isEditing}
+        />
+      );
+    case "dropdown":
+      return (
+        <QDropdown
+          handleQuestion={handleQuestion}
+          element={element}
+          isEditing={isEditing}
+        />
+      );
+    case "file":
+      return (
+        <QFile
+          element={element}
+          isEditing={isEditing}
+          handleQuestion={handleQuestion}
+        />
+      );
+    case "rating":
+      return (
+        <QRating
+          handleQuestion={handleQuestion}
+          element={element}
+          isEditing={isEditing}
+        />
+      );
+    case "date":
+      return <QDate />;
+    default:
+      return <></>;
+  }
+};
+
+export const getAnswerElementByType = (
+  element: IQuestionData,
+  answer: IAnswer
+) => {
+  switch (element.type) {
+    case "singletext":
+      return <AEssay element={element} answer={answer} />;
+    case "radio":
+      return <ARadio answer={answer} element={element} />;
+    case "checkbox":
+      return <ACheckbox answer={answer} element={element} />;
+    case "dropdown":
+      return <ADropdown answer={answer} element={element} />;
+    case "file":
+      return <AFile element={element} answer={answer} />;
+    case "rating":
+      return <ARating answer={answer} element={element} />;
+    case "date":
+      return <ADate element={element} answer={answer} />;
+    default:
+      return <></>;
+  }
+};
+
+export const getResultElementByType = (question: IQuestionData) => {
+  switch (question.type) {
+    case "singletext":
+      return <REssay question={question} />;
+    case "radio":
+      return <RRadio question={question} />;
+    case "checkbox":
+      return <RCheckbox question={question} />;
+    case "dropdown":
+      return <RDropdown question={question} />;
+    case "file":
+      return <RFile question={question} />;
+    case "rating":
+      return <RRating question={question} />;
+    case "date":
+      return <RDate question={question} />;
+    default:
+      return <></>;
+  }
+};

frontend/src/home/Home.tsx

@@ -11,7 +11,7 @@ export const Home = () => {
       console.log("버튼");
       location.href = "/login";
     } else {
-      location.href = "/profile";
+      location.href = "/surveys/profile";
     }
   }
 

frontend/src/index.tsx

 import React from "react";
 import "tailwindcss/tailwind.css";
 import { createRoot } from "react-dom/client";
-import { SurveyRouter } from "./SurveyRouter";
 import { MainRouter } from "./MainRouter";
 
 const container = document.getElementById("root");
@@ -9,7 +8,6 @@ const root = createRoot(container!);
 
 root.render(
   <React.StrictMode>
-    {/* <SurveyRouter /> */}
     <MainRouter />
   </React.StrictMode>
 );

frontend/src/layouts/ResultLayout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+
+export const ResultLayout = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};

frontend/src/layouts/index.tsx

 export { AnswerLayout } from "./AnswerLayout";
 export { BaseLayout } from "./BaseLayout";
 export { ModifyLayout } from "./ModifyLayout";
+export { ResultLayout } from "./ResultLayout";

frontend/src/questions/Question.tsx

-import React, { useState } from "react";
-import { IQuestionData } from "../types";
-import { questionApi } from "../apis";
-import { EssayForm } from "./EssayForm";
-import { CheckboxForm } from "./CheckboxForm";
-import { RadioForm } from "./RadioForm";
-import { DropdownForm } from "./DropdownForm";
-import { FileForm } from "./FileForm";
-import { RatingForm } from "./RatingForm";
-import { DateForm } from "./DateForm";
-import { QUESTION_TYPES } from "../commons";
-
-type Props = {
-  element: IQuestionData;
-  isEditing: boolean;
-  handleEditing: (qid: string, isEditing: boolean) => void;
-  handleQuestion: (element: IQuestionData) => void;
-  deleteQuestion: (id: string) => void;
-};
-
-export const Question = ({
-  element,
-  isEditing,
-  handleEditing,
-  handleQuestion,
-  deleteQuestion,
-}: Props) => {
-  const [question, setQuestion] = useState({ ...element });
-  // const [isEditing, setIsEditing] = useState(false);
-
-  // console.log("is editing in question:", isEditing);
-
-  async function handleEditComplete() {
-    try {
-      console.log(question);
-      const newQuestion: IQuestionData = await questionApi.updateQuestion(
-        question
-      );
-      // console.log(newQuestion);
-      handleQuestion(question);
-      // setIsEditing(true);
-      handleEditing(question._id, false);
-      // setSuccess(true);
-      // setError("");
-    } catch (error) {
-      console.log("에러발생");
-      // catchErrors(error, setError)
-    } finally {
-      // setLoading(false);
-    }
-  }
-
-  function handleSelect(event: React.ChangeEvent<HTMLSelectElement>) {
-    const selectedType = event.currentTarget.value;
-    console.log(selectedType);
-    let content;
-    if (
-      selectedType === "radio" ||
-      selectedType === "dropdown" ||
-      selectedType === "checkbox"
-    ) {
-      content = {
-        choices: [{ text: "", value: 0 }],
-      };
-    } else if (selectedType === "essay") {
-      content = { choices: [] };
-    } else if (selectedType === "rating") {
-      content = {
-        minRateDescription: "",
-        maxRateDescription: "",
-        choices: [{ text: "", value: 0 }],
-      };
-    }
-    setQuestion({ ...question, type: selectedType, content: content });
-  }
-
-  const handleElement = () => {
-    console.log("handle element");
-    setQuestion({ ...question });
-  };
-
-  function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
-    const { name, value } = event.currentTarget;
-    setQuestion({ ...question, [name]: value });
-  }
-
-  function getContent(element: IQuestionData) {
-    switch (element.type) {
-      case "essay":
-        return <EssayForm element={element} isEditing={isEditing} />;
-      case "radio":
-        return (
-          <RadioForm
-            handleQuestion={handleElement}
-            element={element}
-            isEditing={isEditing}
-          />
-        );
-      case "checkbox":
-        return (
-          <CheckboxForm
-            handleQuestion={handleElement}
-            element={element}
-            isEditing={isEditing}
-          />
-        );
-      case "dropdown":
-        return (
-          <DropdownForm
-            handleQuestion={handleElement}
-            element={element}
-            isEditing={isEditing}
-          />
-        );
-      case "file":
-        return <FileForm element={element} isEditing={isEditing} />;
-      case "rating":
-        return (
-          <RatingForm
-            handleQuestion={handleElement}
-            element={element}
-            isEditing={isEditing}
-          />
-        );
-      case "date":
-        return <DateForm />;
-      default:
-        return <></>;
-    }
-  }
-
-  const handleRequired = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked, value } = event.currentTarget;
-    question[value] = checked;
-    setQuestion({ ...question, [value]: checked });
-  };
-
-  const onCancel = () => {
-    console.log("element canceled button clicked", element);
-    console.log("question canceled button clicked", question);
-    setQuestion(element);
-    // setIsEditing(true);
-    handleEditing(question._id, false);
-  };
-
-  const handleDelete = () => {
-    if (window.confirm("질문을 삭제하시겠습니까?")) {
-      deleteQuestion(element._id);
-      alert("삭제되었습니다.");
-    } else {
-      alert("질문 삭제를 취소합니다.");
-    }
-  };
-
-  const handleEditClick = () => {
-    // setIsEditing(false);
-    handleEditing(question._id, true);
-  };
-
-  return (
-    <div
-      style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
-      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
-    >
-      <div className="flex h-16 w-full place-content-center items-center">
-        <input
-          type="text"
-          name="title"
-          id={question._id}
-          className="text-xl font-bold border-b-2 w-11/12"
-          placeholder={"Question Title"}
-          value={question.title}
-          onChange={handleQuestionInfo}
-          disabled={!isEditing}
-        ></input>
-      </div>
-      <div className="flex w-full justify-center">
-        <input
-          type="text"
-          name="comment"
-          id={question._id}
-          className="border w-11/12"
-          placeholder="질문에 대한 설명을 입력해주세요"
-          value={question.comment}
-          onChange={handleQuestionInfo}
-          disabled={!isEditing}
-        ></input>
-      </div>
-      {getContent(question)}
-      <div className="flex flex-row place-content-between w-11/12 py-2">
-        <select
-          id={question._id}
-          name="type"
-          onChange={handleSelect}
-          disabled={!isEditing}
-          value={question.type}
-          className="w-32 h-10 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor"
-        >
-          {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
-            <option key={key} id={question._id} value={key}>
-              {value}
-            </option>
-          ))}
-        </select>
-        <div className="place-self-end py-2">
-          <input
-            type="checkbox"
-            id="isRequired"
-            value="isRequired"
-            onChange={handleRequired}
-            disabled={!isEditing}
-            checked={question.isRequired}
-          />
-          <label htmlFor="isRequired" className="px-1">
-            필수
-          </label>
-          {isEditing ? (
-            <>
-              <button type="button" className="px-1" onClick={onCancel}>
-                취소
-              </button>
-
-              <button
-                type="button"
-                className="px-1"
-                onClick={handleEditComplete}
-              >
-                확인
-              </button>
-            </>
-          ) : (
-            <>
-              <button type="button" className="px-1" onClick={handleDelete}>
-                삭제
-              </button>
-              <button type="button" className="px-1" onClick={handleEditClick}>
-                수정
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/questions/index.tsx

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