AQuestion ui수정중

frontend/src/forms/ACheckbox.tsx

@@ -49,7 +49,7 @@ export const ACheckbox = ({
   // console.log("content:", content);
 
   return (
-    <div className="flex w-full gap-2 justify-center my-3">
+    <div className="md:flex gap-2 justify-center my-3">
       {element.content.choices.map((choice) => (
         <div key={choice.value} className="mx-2">
           <input
@@ -58,7 +58,7 @@ export const ACheckbox = ({
             value={choice.text}
             onChange={handleChange}
           />
-          <label className="text-lg">{choice.text}</label>
+          <label className="md:text-lg text-base">{choice.text}</label>
         </div>
       ))}
     </div>

frontend/src/forms/ARadio.tsx

@@ -16,7 +16,7 @@ export const ARadio = ({ element, answer: answerQuestion }: IAnswerProps) => {
     console.log(answerQuestion);
   };
   return (
-    <div className="flex w-full gap-2 justify-center my-3">
+    <div className="md:flex gap-2 justify-center my-3">
       {element.content.choices.map((choice) => (
         <div key={choice.value} className="mx-2">
           <input
@@ -27,7 +27,7 @@ export const ARadio = ({ element, answer: answerQuestion }: IAnswerProps) => {
             onChange={handleChange}
             value={choice.text}
           ></input>
-          <label className="text-lg" id={choice.text}>
+          <label className="md:text-lg text-base" id={choice.text}>
             {choice.text}
           </label>
         </div>

frontend/src/surveys/AQuestion.tsx

@@ -9,16 +9,18 @@ type Props = {
 
 export const AQuestion = ({ question, answer }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4 rounded-lg">
-      <div className="flex my-1 w-11/12 place-content-between items-center">
-        <div className="text-xl font-bold">{question.title}</div>
+    <div className="w-4/5 border-2 border-themeColor m-3 p-4 rounded-lg">
+      <div className="md:flex w-full flex-row-reverse my-1 justify-between">
         {question.isRequired ? (
-          <div className="text-xs text-red-600">* 필수질문</div>
+          <div className="text-xs text-red-600 justify-end">* 필수질문</div>
         ) : (
           <></>
         )}
+        <div className="md:text-xl text-base font-bold">{question.title}</div>
+      </div>
+      <div className="md:text-base text-sm w-11/12 text-slate-500">
+        {question.comment}
       </div>
-      <div className="w-11/12 text-slate-500">{question.comment}</div>
       {getAnswerElementByType(question, answer)}
     </div>
   );

frontend/src/surveys/AnswerSurvey.tsx

@@ -114,8 +114,12 @@ export const AnswerSurvey = () => {
     <form onSubmit={handleSubmit}>
       <div className="flex flex-col place-items-center">
         <div className="flex flex-col container place-items-center mt-4">
-          <p className="font-bold text-4xl text-center m-2">{survey.title}</p>
-          <p className="font-bold text-1xl text-center m-2">{survey.comment}</p>
+          <p className="font-bold md:text-4xl text-2xl text-center m-2">
+            {survey.title}
+          </p>
+          <p className="font-bold md:text-1xl text-center m-2">
+            {survey.comment}
+          </p>
           {answers.map((answer) => {
             return (
               <AQuestion