0708

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

@@ -15,19 +15,28 @@ export interface EssayType extends BasicQuestionType {}
 export interface RadioType extends BasicQuestionType {
   content: {
     hasOther: boolean;
-    choices: string[];
+    choices: {
+      value: number;
+      text: string;
+    }[];
     otherText: string;
   };
 }
 export interface CheckboxType extends BasicQuestionType {
   content: {
-    choices: string[];
+    choices: {
+      value: number;
+      text: string;
+    }[];
     maxCount: number;
   };
 }
 export interface DropdownType extends BasicQuestionType {
   content: {
-    choices: string[];
+    choices: {
+      value: number;
+      text: string;
+    }[];
     hasNone: boolean;
   };
 }
@@ -39,7 +48,7 @@ export interface FileType extends BasicQuestionType {
 }
 export interface RatingType extends BasicQuestionType {
   content: {
-    rateValues: {
+    choices: {
       value: number;
       text: string;
     }[];
@@ -65,7 +74,11 @@ const RadioQ: RadioType = {
   content: {
     hasOther: false,
     otherText: "",
-    choices: ["radio1", "radio2", "radio3"],
+    choices: [
+      { value: 1, text: "radio1" },
+      { value: 2, text: "radio2" },
+      { value: 3, text: "radio3" },
+    ],
   },
 };
 const CheckboxQ: CheckboxType = {
@@ -75,7 +88,11 @@ const CheckboxQ: CheckboxType = {
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
   content: {
-    choices: ["check1", "check2", "check3"],
+    choices: [
+      { value: 1, text: "check1" },
+      { value: 2, text: "check2" },
+      { value: 3, text: "check3" },
+    ],
     maxCount: 2,
   },
 };
@@ -86,7 +103,11 @@ const DropdownQ: DropdownType = {
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
   content: {
-    choices: ["drop1", "drop2", "drop3"],
+    choices: [
+      { value: 1, text: "drop1" },
+      { value: 2, text: "drop2" },
+      { value: 3, text: "drop3" },
+    ],
     hasNone: false,
   },
 };
@@ -108,7 +129,7 @@ const RatingQ: RatingType = {
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
   content: {
-    rateValues: [
+    choices: [
       { value: 1, text: "1" },
       { value: 2, text: "2" },
       { value: 3, text: "3" },

frontend/src/CreateSurveyForm/QCheckbox.tsx

@@ -49,7 +49,7 @@ export const QCheckbox = ({ element }: Props) => {
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4">
-        {element.content.choices.map((e: string) => (
+        {element.content.choices.map((e: any) => (
           <div>
             <input type="checkbox" checked={false}></input>
             <input

frontend/src/CreateSurveyForm/QDropdown.tsx

@@ -47,7 +47,7 @@ export const QDropdown = ({ element }: Props) => {
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4">
-        {element.content.choices.map((e: string) => (
+        {element.content.choices.map((e: any) => (
           <div>
             <input type="checkbox" checked={false}></input>
             <input

frontend/src/CreateSurveyForm/QRadio.tsx

@@ -46,7 +46,7 @@ export const QRadio = ({ element }: Props) => {
         ></input>
       </div>
       <div className="flex mt-4">
-        {element.content.choices.map((e: string, index: number) => (
+        {element.content.choices.map((e: any, index: number) => (
           <div>
             <input
               type="radio"

frontend/src/CreateSurveyForm/QRating.tsx

@@ -56,7 +56,7 @@ export const QRating = ({ element }: Props) => {
           size={10}
           placeholder={element.content.minRateDescription}
         ></input>
-        {element.content.rateValues.map((e) => (
+        {element.content.choices.map((e) => (
           <input
             name="text"
             id={element._id}

frontend/src/auth/Login.tsx

@@ -36,11 +36,9 @@ export const Login = () => {
   }
 
   return (
-    <div className="flex justify-center mt-3">
-      <form
-        onSubmit={handleSubmit}
-        className="flex flex-col space-y-4 mt-5 text-xl font-bold"
-      >
+    <div className="flex flex-col items-center mt-5">
+      <div className="text-2xl mt-5">로그인</div>
+      <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
         <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
           이메일
         </label>
@@ -75,7 +73,7 @@ export const Login = () => {
           <button
             type="submit"
             disabled={loading ? true : false}
-            className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
+            className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-5"
           >
             {loading && (
               <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" />

frontend/src/auth/SignUp.tsx

@@ -67,9 +67,9 @@ export const SignUp = () => {
   }
 
   return (
-    <div className="flex flex-col items-center mt-3">
-      <div className="text-2xl">회원 가입</div>
-      <form onSubmit={handleSubmit} className="flex flex-col mt-5 w-80">
+    <div className="flex flex-col items-center mt-5">
+      <div className="text-2xl mt-5">회원가입</div>
+      <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
         <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
           이름
         </label>

frontend/src/commons/SurveyForm.tsx

-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 
-export const SurveyForm = () => (
-  <div className="flex flex-col place-items-center">
-    <div className="flex flex-col container place-items-center mt-4">
-      <form className="font-bold text-4xl text-center m-2">설문지 제목</form>
-      <textarea
-        className="font-bold text-1xl text-center m-2 resize-none"
-        placeholder="설문조사에 대한 설명을 입력해주세요"
-        rows={2}
-        cols={60}
-      ></textarea>
-      <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-        <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-          <form className="text-xl font-bold ml-6 w-1/2">Q1. 첫번째 질문</form>
+export const SurveyForm = () => {
+  return (
+    <div className="flex flex-col place-items-center">
+      <div className="flex flex-col container place-items-center mt-4">
+        <form className="font-bold text-4xl text-center m-2">설문지 제목</form>
+        <textarea
+          className="font-bold text-1xl text-center m-2 resize-none"
+          placeholder="설문조사에 대한 설명을 입력해주세요"
+          rows={2}
+          cols={60}
+        ></textarea>
+        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+            <form className="text-xl font-bold ml-6 w-1/2">
+              Q1. 첫번째 질문
+            </form>
+          </div>
+          <form className="border w-11/12 my-3">설문조사 설명</form>
+          <input
+            className="border w-11/12 h-36 my-3"
+            type="text"
+            placeholder="설문조사 답변"
+          ></input>
         </div>
-        <form className="border w-11/12 my-3">설문조사 설명</form>
-        <input
-          className="border w-11/12 h-36 my-3"
-          type="text"
-          placeholder="설문조사 답변"
-        ></input>
-      </div>
-      <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-        <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-          <form className="text-xl font-bold ml-6 w-1/2">Q1. 첫번째 질문</form>
+        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+            <form className="text-xl font-bold ml-6 w-1/2">
+              Q2. 두번째 질문
+            </form>
+          </div>
+          <form className="border w-11/12 my-4">설문조사 설명</form>
+          <div className="flex flex-row items-center m-3">
+            <div className="mb-4 mx-3">
+              <input
+                id="default-checkbox"
+                type="checkbox"
+                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg font-medium">First checkbox</label>
+            </div>
+            <div className="mb-4 mx-3">
+              <input
+                id="default-checkbox"
+                type="checkbox"
+                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg font-medium">
+                Second checkbox
+              </label>
+            </div>
+            <div className="mb-4 mx-3">
+              <input
+                id="default-checkbox"
+                type="checkbox"
+                value=""
+                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg font-medium">Third checkbox</label>
+            </div>
+            <div className="mb-4 mx-4">
+              <input
+                id="default-checkbox"
+                type="checkbox"
+                value=""
+                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg font-medium">
+                Fourth checkbox
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+            <form className="text-xl font-bold ml-6 w-1/2">
+              Q3. 세번째 질문
+            </form>
+          </div>
+          <form className="border w-11/12 my-4">설문조사 설명</form>
+          <div className="flex flex-row items-center m-3">
+            <div className="flex items-center mb-4 mx-4">
+              <input
+                id="default-radio-1"
+                type="radio"
+                value=""
+                name="default-radio"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg">First radio</label>
+            </div>
+            <div className="flex items-center mb-4 mx-4">
+              <input
+                id="default-radio-1"
+                type="radio"
+                value=""
+                name="default-radio"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg">Second radio</label>
+            </div>
+            <div className="flex items-center mb-4 mx-4">
+              <input
+                checked
+                id="default-radio-2"
+                type="radio"
+                value=""
+                name="default-radio"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <label className="ml-2 text-lg">Checked state</label>
+            </div>
+          </div>
         </div>
-        <form className="border w-11/12 my-4">설문조사 설명</form>
-        <input
-          className="border w-11/12 h-36 my-3"
-          type="text"
-          placeholder="설문조사 답변"
-        ></input>
+      </div>
+      <div>
+        <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
+          제출하기
+        </button>
       </div>
     </div>
-    <div>
-      <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
-        제출하기
-      </button>
-    </div>
-  </div>
-);
+  );
+};

frontend/src/profile/Profile.tsx

@@ -3,8 +3,8 @@ import { Link } from "react-router-dom";
 
 export const Profile = () => {
   return (
-    <div className="flex justify-center">
-      <div className="  m-5">나의 설문조사</div>
+    <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"