UI 수정

frontend/src/answers/AQuestion.tsx

@@ -53,7 +53,7 @@ export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
 
   return (
     <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4">
-      <div className="flex flexgi-row my-1 w-11/12 place-content-between items-center">
+      <div className="flex my-1 w-11/12 place-content-between items-center">
         <div className="text-xl font-bold">{question.title}</div>
         {question.isRequired ? (
           <div className="text-xs text-red-600">* 필수질문</div>

frontend/src/profile/MySurveyCard.tsx

@@ -29,7 +29,7 @@ export const MySurveyCard = ({ data }: Props) => {
   };
 
   const copyLink = () => {
-    navigator.clipboard.writeText(`http://localhost:8080/surveys/${data._id}`);
+    navigator.clipboard.writeText(`http://localhost:8080/survey/${data._id}`);
     alert("설문조사의 링크가 클립보드에 저장되었습니다.");
   };
 
@@ -52,9 +52,9 @@ export const MySurveyCard = ({ data }: Props) => {
   }
 
   return (
-    <div className="w-52 h-60 rounded border-2 hover:border-2 hover:border-themeColor">
+    <div className="w-40 h-48 md:w-52 md:h-60 rounded border-2 hover:border-2 hover:border-themeColor">
       <button className="w-full" onClick={editSurvey}>
-        <div className="h-36 p-5">
+        <div className="h-24 md:h-36 p-3">
           <p className="text-gray-700">
             {data.comment ? data.comment : "설명없는 설문조사"}
           </p>
@@ -70,14 +70,14 @@ export const MySurveyCard = ({ data }: Props) => {
           </p>
         </div>
       </button>
-      <div className="flex justify-end pt-1">
+      <div className="flex justify-end pt-1 pr-1">
         <label className="pt-1">링크복사</label>
         <button className="" onClick={copyLink}>
           <img src={CopyImg} alt="copy"></img>
         </button>
         <button
           type="button"
-          className="bg-themeColor rounded text-white py-1 px-1.5 ml-1"
+          className="bg-themeColor rounded text-white py-1 px-1.5 ml-1 "
           onClick={deleteSurvey}
         >
           삭제

frontend/src/profile/Profile.tsx

@@ -36,12 +36,12 @@ export const Profile = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="mt-10 text-xl font-bold">나의 설문조사</div>
-      <div className="grid grid-cols-1 md:grid-cols-4 sm:grid-cols-2 gap-4 mt-6">
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
         <button
           onClick={createSurvey}
-          className="flex h-60 w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
+          className="flex w-40 h-48 md:h-60 md:w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
         >
-          <div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white">
+          <div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
             CREATE NEW SURVEY!
           </div>
         </button>

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

frontend/src/survey/Accordion.tsx

@@ -16,7 +16,11 @@ const Accordion = ({ title, content }: AccordionProps) => {
   return (
     <div className="p-1">
       <div onClick={HandleOpening}>
-        <div className={"bg-themeColor p-4 flex justify-between text-white"}>
+        <div
+          className={
+            "bg-themeColor rounded-r-lg p-4 flex justify-between text-white"
+          }
+        >
           <h4 className="font-semibold">{title}</h4>
           {isOpened ? "△" : "▽"}
         </div>

frontend/src/survey/EditResultButton.tsx

@@ -21,32 +21,54 @@ export const EditResultButton = () => {
           style={({ isActive }) =>
             isActive
               ? {
+                  width: "140px",
                   color: "white",
                   backgroundColor: "#58ACFA",
+                  borderTopLeftRadius: "25px",
+                  borderBottomLeftRadius: "25px",
+                  textAlign: "center",
+                  fontWeight: "bold",
+                  fontSize: "20px",
                 }
               : {
-                  borderBottomWidth: "1px",
+                  width: "140px",
+                  borderWidth: "1px",
                   borderColor: "#58ACFA",
+                  borderTopLeftRadius: "25px",
+                  borderBottomLeftRadius: "25px",
+                  textAlign: "center",
+                  fontSize: "18px",
                 }
           }
         >
-          <div className="text-xl m-3 ">설문지 수정</div>
+          <div className="m-3 ">설문지 수정</div>
         </NavLink>
         <NavLink
           to={`/surveys/${surveyId}/result`}
           style={({ isActive }) =>
             isActive
               ? {
+                  width: "140px",
                   color: "white",
                   backgroundColor: "#58ACFA",
+                  borderTopRightRadius: "25px",
+                  borderBottomRightRadius: "25px",
+                  textAlign: "center",
+                  fontWeight: "bold",
+                  fontSize: "20px",
                 }
               : {
-                  borderBottomWidth: "1px",
+                  width: "140px",
+                  borderWidth: "1px",
                   borderColor: "#58ACFA",
+                  borderTopRightRadius: "25px",
+                  borderBottomRightRadius: "25px",
+                  textAlign: "center",
+                  fontSize: "18px",
                 }
           }
         >
-          <div className="text-xl m-3">응답결과</div>
+          <div className="m-3">응답결과</div>
         </NavLink>
       </div>
       <Outlet />