.

frontend/src/CreateSurveyForm/QCheckbox.tsx

@@ -22,7 +22,7 @@ export const QCheckbox = ({ element }: Props) => {
           placeholder={element.title}
           onChange={questionListChange}
         ></input>
-        <TypeChange tt="checkbox" id={element._id} />
+        <TypeChange selectedType="checkbox" id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QDropdown.tsx

@@ -20,7 +20,7 @@ export const QDropdown = ({ element }: Props) => {
           placeholder={element.title}
           onChange={questionListChange}
         ></input>
-        <TypeChange tt="dropdown" id={element._id} />
+        <TypeChange selectedType="dropdown" id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QEssay.tsx

@@ -23,7 +23,7 @@ export const QEssay = ({ element }: Props) => {
           onChange={questionListChange}
         ></input>
         {/* <TypeChange tt={"essay"} id={element._id} /> */}
-        <TypeChange tt={"essay"} id={element._id} />
+        <TypeChange selectedType={"essay"} id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QFile.tsx

@@ -21,7 +21,7 @@ export const QFile = ({ element }: Props) => {
           placeholder={element.title}
           onChange={questionListChange}
         ></input>
-        <TypeChange tt="file" id={element._id} />
+        <TypeChange selectedType="file" id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QRadio.tsx

@@ -20,7 +20,7 @@ export const QRadio = ({ element }: Props) => {
           placeholder={element.title}
           onChange={questionListChange}
         ></input>
-        <TypeChange tt="radio" id={element._id} />
+        <TypeChange selectedType="radio" id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QRating.tsx

@@ -22,7 +22,7 @@ export const QRating = ({ element }: Props) => {
           placeholder={element.title}
           onChange={questionListChange}
         ></input>
-        <TypeChange tt="rating" id={element._id} />
+        <TypeChange selectedType="rating" id={element._id} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/question.context.tsx

@@ -10,7 +10,7 @@ import { questionApi, surveyApi } from "../apis";
 
 interface questionTypeChangeProp {
   id: string;
-  tt: string;
+  selectedType: string;
 }
 
 interface IQuestionContext {
@@ -22,7 +22,7 @@ interface IQuestionContext {
   editCompleteClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   currentId: string;
   addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
-  questionTypeChange: ({ id, tt }: questionTypeChangeProp) => void;
+  questionTypeChange: ({ id, selectedType }: questionTypeChangeProp) => void;
 }
 
 const QuestionContext = createContext<IQuestionContext>({
@@ -82,12 +82,15 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
     setQuestionList(newList);
   }
   //질문 Type 바꾸는 함수
-  function questionTypeChange({ id, tt }: questionTypeChangeProp): void {
+  function questionTypeChange({
+    id,
+    selectedType,
+  }: questionTypeChangeProp): void {
     const newType: BasicQuestionType[] = [...questionList];
     const objType: any = newType.find((t) => t._id === id);
-    objType.type = tt;
+    objType.type = selectedType;
     // TODO
-    if ((tt = "essay")) {
+    if ((selectedType = "essay")) {
       objType.content;
     }
     setQuestionList(newType);

frontend/src/CreateSurveyForm/typeDD.tsx

@@ -3,10 +3,10 @@ import { useQuestion } from "./question.context";
 
 type typeChangeProps = {
   id: string;
-  tt: string;
+  selectedType: string;
 };
 
-export function TypeChange({ tt, id }: typeChangeProps) {
+export function TypeChange({ selectedType, id }: typeChangeProps) {
   const { questionTypeChange } = useQuestion();
 
   const typeDD = new Map([
@@ -21,11 +21,11 @@ export function TypeChange({ tt, id }: typeChangeProps) {
   ]);
 
   function changeDD(e: React.ChangeEvent<HTMLSelectElement>) {
-    const tt = e.target.value;
+    const targetType = e.target.value;
     // questionTypeChange(e);
     console.log(e.target.value);
     console.log(id);
-    questionTypeChange({ id, tt });
+    questionTypeChange({ id, selectedType });
     //if문으로 type별로 content 바뀌게 해보기
   }
 
@@ -33,8 +33,8 @@ export function TypeChange({ tt, id }: typeChangeProps) {
     <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={tt}
+      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={selectedType}
       onChange={changeDD}
     >
       {Array.from(typeDD.entries()).map(([k, v]) => (

frontend/src/home/Home.tsx

@@ -9,7 +9,7 @@ export const Home = () => (
     <div className="flex flex-col place-items-center container">
       <div>
         <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 "
         >
           <div className="text-center w-28 font-bold text-black place-items-center">

frontend/src/profile/Profile.tsx

@@ -12,7 +12,7 @@ export const Profile = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="m-5">나의 설문조사</div>
-      <div className="flex flex-row space-x-4 mt-5">
+      <div className="flex space-x-4 mt-5">
         <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 "
@@ -31,7 +31,7 @@ export const Profile = () => {
             <div className="px-2 py-2">
               <label>설문조사 이름</label>
             </div>
-            <div className="flex justify-end dropdown-toggle">
+            <div className="flex justify-end">
               <select className="py-2 w-14 bg-themeColor rounded text-white">
                 <option selected>옵션</option>
                 <option>삭제</option>
@@ -50,7 +50,7 @@ export const Profile = () => {
             <div className="px-2 py-2">
               <label>설문조사이름</label>
             </div>
-            <div className="flex justify-end dropdown-toggle">
+            <div className="flex justify-end">
               <select className="py-2 w-14 bg-themeColor rounded text-white">
                 <option selected>옵션</option>
                 <option>삭제</option>
@@ -69,7 +69,7 @@ export const Profile = () => {
             <div className="px-2 py-2">
               <label>설문조사 이름</label>
             </div>
-            <div className="flex justify-end dropdown-toggle">
+            <div className="flex justify-end">
               <select className="py-2 w-14 bg-themeColor rounded text-white">
                 <option selected>옵션</option>
                 <option>삭제</option>
@@ -88,7 +88,7 @@ export const Profile = () => {
             <div className="px-2 py-2">
               <label>설문조사 이름</label>
             </div>
-            <div className="flex justify-end dropdown-toggle">
+            <div className="flex justify-end">
               <select className="py-2 w-14 bg-themeColor rounded text-white">
                 <option selected>옵션</option>
                 <option>삭제</option>

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 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>
   );
 };

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 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>
   );
 };

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>

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 id="commentarea" className="flex mt-4 w-full justify-center">
+      <input type="file" className=" w-11/12 h-16" disabled></input>
     </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";
+import { RadioForm } from "./RadioForm";
 
 type Props = {
   element: BasicQuestionType;
@@ -32,7 +33,7 @@ export const Question = ({ element }: Props) => {
       case "essay":
         return <EssayForm element={element} />;
       case "radio":
-      // return <RadioForm element={element} />;
+        return <RadioForm element={element} />;
       case "checkbox":
       // return <CheckboxForm element={element} />;
       case "dropdown":
@@ -60,12 +61,12 @@ export const Question = ({ element }: Props) => {
         <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"
+          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}
           onChange={changeDD}
         >
-          {Array.from(typeDD.entries()).map(([k, v]) => (
-            <option value={k}>{v}</option>
+          {Array.from(typeDD.entries()).map(([key, value]) => (
+            <option value={key}>{value}</option>
           ))}
         </select>
       </div>
@@ -81,11 +82,11 @@ export const Question = ({ element }: Props) => {
       </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}>
+      <div className="place-self-end py-2">
+        <button className="px-0.5">필수</button>
+        <button className="px-0.5">옵션</button>
+        <button className="px-0.5">삭제</button>
+        <button id={element.id} className="px-0.5" onClick={handleClick}>
           수정
         </button>
       </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();
+export const RadioForm = ({ element }: Props) => {
   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 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
+          />
+        </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;
@@ -9,76 +7,32 @@ type Props = {
 };
 
 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">
+    <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
-          type="text"
-          name="title"
+          name="text"
           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}
+          className="border border-black rounded-full py-1 m-2 text-center"
+          size={1}
+          placeholder={e.text}
         ></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>
+      ))}
+      <input
+        name="maxRateDescription"
+        id={element._id}
+        className="border-b-2 text-center"
+        size={10}
+        placeholder={element.content.maxRateDescription}
+      ></input>
     </div>
   );
 };