버튼 크기 조정

frontend/src/commons/ACheckboxForm.tsx

@@ -7,10 +7,10 @@ type Props = {
 
 export const ACheckboxForm = ({ element }: Props) => {
   return (
-    <div className="flex w-full gap-4 justify-around my-3">
+    <div className="flex w-full gap-2 justify-around my-3">
       {element.content.choices.map((choice) => (
         <div>
-          <input className="mr-2" type="checkbox" />
+          <input className="mr-2 w-4 h-4" type="checkbox" />
           <label className="text-lg">{choice.text}</label>
         </div>
       ))}

frontend/src/commons/ADateForm.tsx

+import React from "react";
+
+export const ADateForm = () => {
+  return (
+    <div>
+      <input type="date"></input>
+    </div>
+  );
+};

frontend/src/commons/ADropdownForm.tsx

@@ -7,8 +7,8 @@ type Props = {
 
 export const ADropdownForm = ({ element }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto items-center m-3 py-3">
-      <select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
+    <div className="flex flex-col container w-4/5 h-auto mb-3 py-3">
+      <select className="py-2 w-48 hover:bg-themeColor bg-gray-200 rounded ">
         {element.content.choices.map((choice) => (
           <option>{choice.text}</option>
         ))}

frontend/src/commons/AFileForm.tsx

+import React from "react";
+import { FileType } from "../types";
+
+type Props = {
+  element: FileType;
+};
+
+export const AFileForm = ({ element }: Props) => {
+  return (
+    <div className="flex w-full gap-4 justify-around my-3">
+      {/* {element.content.choices.map((choice) => (
+        <div>
+          <input className="mr-2"></input>
+          <label className="text-lg">{choice.text}</label>
+        </div>
+      ))} */}
+    </div>
+  );
+};

frontend/src/commons/AQuestion.tsx

 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { BasicQuestionType, SurveyType } from "../types";
-import { ACheckboxForm } from "./ACheckbox";
-import { ADropdownForm } from "./ADropdown";
+import { ACheckboxForm } from "./ACheckboxForm";
+import { ADateForm } from "./ADateForm";
+import { ADropdownForm } from "./ADropdownForm";
 import { AEssayForm } from "./AEssayForm";
+import { AFileForm } from "./AFileForm";
+// import { AMatrixForm } from "./AMatrixForm";
 import { ARadioForm } from "./ARadioForm";
+import { ARatingForm } from "./ARatingForm";
 
 type PropsType = {
   question: BasicQuestionType;
 };
+
 export const AQuestion = ({ question }: PropsType) => {
   function getContent(question: BasicQuestionType) {
     switch (question.type) {
@@ -20,16 +25,14 @@ export const AQuestion = ({ question }: PropsType) => {
         return <ACheckboxForm element={question} />;
       case "dropdown":
         return <ADropdownForm element={question} />;
-      // case "file":
-      //   return <AFileForm element={element} currentId={currentId} />;
-      // case "rating":
-      //   return (
-      //     <ARatingForm
-      //       handleQuestion={handleQuestion}
-      //       element={element}
-      //       currentId={currentId}
-      //     />
-      //   );
+      case "file":
+        return <AFileForm element={question} />;
+      case "rating":
+        return <ARatingForm element={question} />;
+      case "date":
+        return <ADateForm />;
+      // case "matrix":
+      //   return <AMatrixForm />;
       default:
         return <></>;
     }
@@ -38,9 +41,9 @@ export const AQuestion = ({ question }: PropsType) => {
   return (
     <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">
-        <div className="text-xl font-bold ml-6 w-1/2">질문</div>
+        <div className="text-xl font-bold ml-6 w-1/2">{question.title}</div>
       </div>
-      <div className="border w-11/12 my-3">내용</div>
+      <div className="w-11/12 my-3">{question.comment}</div>
       {getContent(question)}
     </div>
   );

frontend/src/commons/ARadioForm.tsx

@@ -7,11 +7,11 @@ type Props = {
 
 export const ARadioForm = ({ element }: Props) => {
   return (
-    <div className="flex w-full gap-4 justify-around my-3">
+    <div className="flex w-full gap-2 justify-around my-3">
       {element.content.choices.map((choice) => (
         <div>
-          <input className="mr-2" type="radio"></input>
-          <label className="text-lg">{choice.value}</label>
+          <input className="mr-2 w-4 h-4" type="radio"></input>
+          <label className="text-lg">{choice.text}</label>
         </div>
       ))}
     </div>

frontend/src/commons/ARatingForm.tsx

+import React from "react";
+import { RatingType } from "../types";
+
+type Props = {
+  element: RatingType;
+};
+
+export const ARatingForm = ({ element }: Props) => {
+  return (
+    <div className="flex w-full gap-4 justify-around my-3">
+      {element.content.choices.map((choice) => (
+        <div>
+          <input className="mr-2"></input>
+          <label className="text-lg">{choice.text}</label>
+        </div>
+      ))}
+    </div>
+  );
+};