객관식 질문들 ui 변경

frontend/src/answers/ACheckboxForm.tsx

@@ -33,9 +33,9 @@ export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
     console.log(answerQuestion);
   };
   return (
-    <div className="flex w-full gap-2 justify-around my-3">
+    <div className="flex w-full gap-2 justify-center my-3">
       {element.content.choices.map((choice) => (
-        <div key={choice.value}>
+        <div key={choice.value} className="mx-2">
           <input
             className="mr-2 w-4 h-4"
             type="checkbox"

frontend/src/answers/ARadioForm.tsx

@@ -20,9 +20,9 @@ export const ARadioForm = ({ element, answerQuestion }: Props) => {
     console.log(answerQuestion);
   };
   return (
-    <div className="flex w-full gap-2 justify-around my-3">
+    <div className="flex w-full gap-2 justify-center my-3">
       {element.content.choices.map((choice) => (
-        <div key={choice.value}>
+        <div key={choice.value} className="mx-2">
           <input
             className="mr-2"
             type="radio"

frontend/src/answers/ARatingForm.tsx

@@ -23,7 +23,7 @@ export const ARatingForm = ({ element, answerQuestion }: Props) => {
     console.log(answerQuestion);
   }
   return (
-    <div className="flex w-full justify-items-center my-3 overflow-x-scroll">
+    <div className="flex w-full justify-center my-3 overflow-x-auto">
       <label className="mt-3">{element.content.minRateDescription}</label>
       {element.content.choices.map((choice) => (
         <div className="flex gap-4 mx-1" key={choice.value}>

frontend/src/home/Home.tsx

@@ -32,7 +32,7 @@ export const Home = () => {
         </div>
         <p className="text-center text-xl text-black mt-3">Create now!</p>
       </div>
-      <div className="flex justify-center">
+      <div className="flex justify-center mt-3">
         <img src={SurveyImg} className="object-scale-down justify-center" />
       </div>
     </div>

frontend/src/questions/RatingForm.tsx

@@ -38,11 +38,11 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
 
   return (
     <>
-      <div className="flex place-content-between items-center w-full p-5 overflow-x-scroll">
+      <div className="flex place-content-center items-center w-full p-5 overflow-x-auto">
         <input
           name="minRateDescription"
           className="border-b-2 text-center"
-          size={3}
+          size={5}
           placeholder="비동의"
           value={element.content.minRateDescription}
           onChange={handleContent}
@@ -65,7 +65,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
         <input
           name="maxRateDescription"
           className="border-b-2 text-center"
-          size={3}
+          size={5}
           placeholder="동의"
           value={element.content.maxRateDescription}
           onChange={handleContent}