Merge branch 'DH7' into develop0725

frontend/src/answers/ACheckboxForm.tsx

@@ -35,7 +35,7 @@ export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
   return (
     <div className="flex w-full gap-2 justify-around my-3">
       {element.content.choices.map((choice) => (
-        <div>
+        <div key={choice.value}>
           <input
             className="mr-2"
             type="checkbox"

frontend/src/answers/ADropdownForm.tsx

@@ -22,11 +22,13 @@ export const ADropdownForm = ({ element, answerQuestion }: Props) => {
   return (
     <div className="flex flex-col container w-11/12 h-auto m-3 py-3">
       <select
-        className="py-2 w-48 hover:bg-gray-200 border border-black rounded"
+        className="place-self-center py-2 w-48 hover:bg-gray-200 border border-black rounded"
         onChange={handleChange}
       >
         {element.content.choices.map((choice) => (
-          <option value={choice.text}>{choice.text}</option>
+          <option key={choice.value} value={choice.text}>
+            {choice.text}
+          </option>
         ))}
       </select>
     </div>

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/answers/ARadioForm.tsx

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

frontend/src/answers/ARatingForm.tsx

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

frontend/src/answers/AnswerSurveyForm.tsx

 import React, { FormEvent, useEffect, useRef, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { surveyApi, answerApi } from "../apis";
 import { catchErrors } from "../helpers";
-import { Question } from "../questions";
 import { AnswerSurveyType, AnswerType, SurveyType } from "../types";
 import { AQuestion } from "./AQuestion";
 

frontend/src/commons/Header.tsx

-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useAuth } from "../auth/auth.context";
+import { UserIcon } from "../icons/UserIcon";
 
 export const Header = () => {
   const { user, logout } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
 
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const handleResize = () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5">
-      <div className="container flex flex-wrap justify-between items-center mx-auto">
+      <div className="container flex flex-wrap place-content-center mx-auto">
         <Link to="/" className="font-bold text-2xl text-themeColor">
           Simple Survey Form
         </Link>
-        <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
-          {user.isLoggedIn ? (
-            <div>
-              <button
-                onClick={() => logout(() => navigate("/"))}
-                className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
-              >
-                로그아웃
-              </button>
-              <Link to="/profile">
-                <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
-                  프로필
-                </button>
-              </Link>
-            </div>
-          ) : (
-            <div>
-              <Link to="/login">
-                <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
-                  로그인
-                </button>
-              </Link>
-              <Link to="/signup">
-                <button className="font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">
-                  회원가입
+        {windowSize.width < 768 ? (
+          <UserIcon className="h-7 w-7 absolute top-4 right-2" onClick="" />
+        ) : (
+          <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
+            {user.isLoggedIn ? (
+              <div className="pt-2">
+                <button
+                  onClick={() => logout(() => navigate("/"))}
+                  className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
+                >
+                  로그아웃
                 </button>
-              </Link>
+                <Link to="/profile">
+                  <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
+                    프로필
+                  </button>
+                </Link>
+              </div>
+            ) : (
+              <div className="pt-2">
+                <Link to="/login">
+                  <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
+                    로그인
+                  </button>
+                </Link>
+                <Link to="/signup">
+                  <button className="font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">
+                    회원가입
+                  </button>
+                </Link>
+              </div>
+            )}
+          </div>
+        )}
+        {/* <div className="flex items-center md:order-2">
+          <button
+            type="button"
+            className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+            id="user-menu-button"
+            aria-expanded="false"
+            data-dropdown-toggle="user-dropdown"
+            data-dropdown-placement="bottom"
+          >
+            <span className="sr-only">Open user menu</span>
+            <img
+              className="w-8 h-8 rounded-full"
+              src="/docs/images/people/profile-picture-3.jpg"
+              alt="user photo"
+            />
+          </button>
+          <div
+            className="hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+            id="user-dropdown"
+          >
+            <div className="py-3 px-4">
+              <span className="block text-sm text-gray-900 dark:text-white">
+                Bonnie Green
+              </span>
+              <span className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">
+                name@flowbite.com
+              </span>
             </div>
-          )}
-        </div>
+            <ul className="py-1" aria-labelledby="user-menu-button">
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Dashboard
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Settings
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Earnings
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Sign out
+                </a>
+              </li>
+            </ul>
+          </div>
+          <button
+            data-collapse-toggle="mobile-menu-2"
+            type="button"
+            className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            aria-controls="mobile-menu-2"
+            aria-expanded="false"
+          >
+            <span className="sr-only">Open main menu</span>
+            <UserIcon className="w-7 h-7 absolute top-4 right-2" />
+            <svg
+              className="w-6 h-6"
+              aria-hidden="true"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div> */}
       </div>
     </div>
   );

frontend/src/home/Home.tsx

@@ -16,7 +16,7 @@ export const Home = () => {
 
   return (
     <div className="flex flex-col place-items-center">
-      <div className="justify-end text-center text-3xl text-black h-16 mt-12">
+      <div className="justify-end text-center text-2xl md:text-3xl text-black h-16 mt-12">
         가장 쉽게 설문지를 만드세요!
       </div>
       <div className="flex flex-col place-items-center container">

frontend/src/icons/UserIcon.tsx

+import React, { FC, ReactNode } from "react";
+
+export const UserIcon = ({ ...props }) => {
+  return (
+    // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+    //   <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
+    // </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <path d="M256 112c-48.6 0-88 39.4-88 88C168 248.6 207.4 288 256 288s88-39.4 88-88C344 151.4 304.6 112 256 112zM256 240c-22.06 0-40-17.95-40-40C216 177.9 233.9 160 256 160s40 17.94 40 40C296 222.1 278.1 240 256 240zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-46.73 0-89.76-15.68-124.5-41.79C148.8 389 182.4 368 220.2 368h71.69c37.75 0 71.31 21.01 88.68 54.21C345.8 448.3 302.7 464 256 464zM416.2 388.5C389.2 346.3 343.2 320 291.8 320H220.2c-51.36 0-97.35 26.25-124.4 68.48C65.96 352.5 48 306.3 48 256c0-114.7 93.31-208 208-208s208 93.31 208 208C464 306.3 446 352.5 416.2 388.5z" />
+    </svg>
+  );
+};

frontend/src/profile/MySurveyCard.tsx

@@ -46,32 +46,28 @@ 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">
+        <p className="font-bold">
+          {data.title ? data.title : "제목없는 설문조사"}
+        </p>
+
+        <div className="h-24 md:h-36 p-3 text-ellipsis overflow-y-scroll">
           <p className="text-gray-700">
             {data.comment ? data.comment : "설명없는 설문조사"}
           </p>
         </div>
-
-        <div className="flex flex-col h-12 place-items-center">
-          <p className="font-bold">
-            {data.title ? data.title : "제목없는 설문조사"}
-          </p>
-
-          <p className="text-gray-500 text-sm">
-            {data.updatedAt?.substring(0, 10)}
-          </p>
-        </div>
+        <p className="text-gray-500 text-sm">
+          {data.updatedAt?.substring(0, 10)}
+        </p>
       </button>
-      <div className="flex justify-end pt-1">
-        <label className="pt-1">링크복사</label>
-        <button className="" onClick={copyLink}>
-          <img src={CopyImg} alt="copy"></img>
+      <div className="flex justify-end pt-1 pr-1">
+        <button className="flex place-self-center" 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/CheckboxForm.tsx

@@ -32,7 +32,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
     <>
       <div id="content" className="mt-4 p-5">
         {choices.map((choice: any, index: number) => (
-          <div className="m-5">
+          <div className="m-5" key={choice.value}>
             <input type="checkbox" disabled></input>
             <input
               id={`${index}`}

frontend/src/questions/DropdownForm.tsx

@@ -30,14 +30,14 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
   }
   return (
     <>
-      <div id="content" className="flex-row mt-4 p-5">
+      <div id="content" className="mt-4 p-5">
         <select className="mr-3">
           {choices.map((choice: any, index: number) => (
-            <option>{choice.text}</option>
+            <option key={choice.value}>{choice.text}</option>
           ))}
         </select>
         {choices.map((choice: any, index: number) => (
-          <div className="my-5">
+          <div key={choice.value} className="my-5">
             <input
               id={`${index}`}
               type="text"

frontend/src/questions/Question.tsx

@@ -156,7 +156,7 @@ export const Question = ({
           onChange={handleSelect}
           disabled={save}
           value={element.type}
-          className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
+          className="w-32 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
         >
           {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
             <option

frontend/src/questions/RadioForm.tsx

@@ -33,7 +33,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
     <>
       <div id="content" className="mt-4 p-5">
         {choices.map((choice: any, index: number) => (
-          <div key={index} className="m-5">
+          <div key={choice.value} className="m-5">
             <input type="radio" disabled></input>
             <input
               id={`${index}`}

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}
@@ -50,6 +50,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
         ></input>
         {choices.map((choice: any, index: number) => (
           <input
+            key={choice.value}
             name="text"
             id={`${index}`}
             type="text"
@@ -64,7 +65,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

@@ -28,7 +28,11 @@ const Accordion = ({ question }: 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">{question.title}</h4>
           {isOpened ? "△" : "▽"}
         </div>

frontend/src/survey/EditResultButton.tsx

@@ -14,32 +14,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 />