From ff284f3cfbfa78439c9e70fb2cb0437f15b7d94b Mon Sep 17 00:00:00 2001
From: "Jiwon Yoon@na" <jiwon5393@naver.com>
Date: Mon, 19 Sep 2022 10:47:26 +0900
Subject: [PATCH] =?UTF-8?q?AQuestion=20ui=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/forms/ACheckbox.tsx      |  4 ++--
 frontend/src/forms/ARadio.tsx         |  4 ++--
 frontend/src/surveys/AQuestion.tsx    | 12 +++++++-----
 frontend/src/surveys/AnswerSurvey.tsx |  8 ++++++--
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/forms/ACheckbox.tsx b/frontend/src/forms/ACheckbox.tsx
index ced8ec9..b3020ad 100644
--- a/frontend/src/forms/ACheckbox.tsx
+++ b/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>
diff --git a/frontend/src/forms/ARadio.tsx b/frontend/src/forms/ARadio.tsx
index c2d7f51..7cb1895 100644
--- a/frontend/src/forms/ARadio.tsx
+++ b/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>
diff --git a/frontend/src/surveys/AQuestion.tsx b/frontend/src/surveys/AQuestion.tsx
index 8658606..ab3757d 100644
--- a/frontend/src/surveys/AQuestion.tsx
+++ b/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>
   );
diff --git a/frontend/src/surveys/AnswerSurvey.tsx b/frontend/src/surveys/AnswerSurvey.tsx
index 4b0b7fb..46cdfe3 100644
--- a/frontend/src/surveys/AnswerSurvey.tsx
+++ b/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
-- 
GitLab