AQuestion 모바일 UI수정+Header 아이콘 순서 변경

frontend/src/commons/Header.tsx

@@ -15,17 +15,17 @@ export const Header = () => {
       <div className="hidden md:flex">
         {user.isLoggedIn ? (
           <div>
+            <Link to="/surveys">
+              <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
+                프로필
+              </button>
+            </Link>
             <button
               onClick={() => logout(() => navigate("/"))}
               className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
             >
               로그아웃
             </button>
-            <Link to="/surveys">
-              <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
-                프로필
-              </button>
-            </Link>
           </div>
         ) : (
           <div>
@@ -46,15 +46,12 @@ export const Header = () => {
       <div className="md:hidden">
         {user.isLoggedIn ? (
           <div className="flex px-4">
-            <button
-              onClick={() => logout(() => navigate("/"))}
-              className="mr-3"
-            >
-              <LogoutIcon className="h-7 w-7" />
-            </button>
             <Link to="/surveys">
-              <UserIcon className="h-7 w-7" />
+              <UserIcon className="h-7 w-7 mx-4" />
             </Link>
+            <button onClick={() => logout(() => navigate("/"))}>
+              <LogoutIcon className="h-7 w-7" />
+            </button>
           </div>
         ) : (
           <div className="flex px-4">

frontend/src/forms/ARating.tsx

@@ -19,13 +19,15 @@ export const ARating = ({ element, answer: answerQuestion }: IAnswerProps) => {
     console.log(answerQuestion);
   }
   return (
-    <div className="flex w-full justify-center my-3 overflow-x-auto">
-      <label className="mt-3">{element.content.minRateDescription}</label>
+    <div className="flex w-full justify-center items-center my-3 overflow-x-auto">
+      <label className="shrink-0 mr-1">
+        {element.content.minRateDescription}
+      </label>
       {element.content.choices.map((choice) => (
         <div className="flex gap-4 mx-1" key={choice.value}>
           <button
             type="button"
-            className="border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
+            className="border border-themeColor rounded-full md:w-12 md:h-12 w-9 h-9 text-center hover:bg-slate-300"
             name={choice.text}
             onClick={buttonClick}
             style={{
@@ -37,7 +39,9 @@ export const ARating = ({ element, answer: answerQuestion }: IAnswerProps) => {
           </button>
         </div>
       ))}
-      <label className="mt-3">{element.content.maxRateDescription}</label>
+      <label className="shrink-0 ml-1">
+        {element.content.maxRateDescription}
+      </label>
     </div>
   );
 };

frontend/src/surveys/AQuestion.tsx

@@ -14,7 +14,7 @@ export const AQuestion = ({ question, answer }: Props) => {
         {question.isRequired ? (
           <div className="text-xs text-red-600 justify-end">* 필수질문</div>
         ) : (
-          <></>
+          <div></div>
         )}
         <div className="md:text-xl text-base font-bold">{question.title}</div>
       </div>