Merge branch 'jiwon0727' into develop0727

frontend/src/App.tsx

 import React from "react";
 import { Outlet } from "react-router-dom";
 import { AuthProvider } from "./auth/auth.context";
-import { Header } from "./commons";
+import { Footer, Header } from "./commons";
 
 const App = () => (
   <AuthProvider>
     <Header />
+    <div style={{ minHeight: "80vh" }}>
       <Outlet />
+    </div>
+    <Footer />
   </AuthProvider>
 );
 

frontend/src/answers/ACheckboxForm.tsx

@@ -33,9 +33,9 @@ export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
     console.log(answerQuestion);
   };
   return (
-    <div className="flex w-full gap-2 justify-around my-3">
+    <div className="flex w-full gap-2 justify-center my-3">
       {element.content.choices.map((choice) => (
-        <div key={choice.value}>
+        <div key={choice.value} className="mx-2">
           <input
             className="mr-2 w-4 h-4"
             type="checkbox"

frontend/src/answers/ARadioForm.tsx

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

frontend/src/answers/ARatingForm.tsx

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

frontend/src/answers/AnswerSurveyForm.tsx

@@ -89,7 +89,7 @@ export const AnswerSurveyForm = () => {
         const newAnswer: AnswerType = await answerApi.saveAnswers(formData);
         console.log(newAnswer);
         sessionStorage.setItem(`survey_${surveyId}`, surveyId ?? "");
-        navigate("/survey/complete");
+        navigate("/survey/complete", { replace: false });
 
         setSuccess(true);
         setError("");

frontend/src/auth/Login.tsx

@@ -36,7 +36,7 @@ export const Login = () => {
   }
 
   return (
-    <div className="flex flex-col items-center mt-5">
+    <div className="flex flex-col items-center">
       <div className="text-2xl mt-20">로그인</div>
       <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
         <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
@@ -65,11 +65,11 @@ export const Login = () => {
           value={loginData.password}
         />
         {error && (
-          <div className="text-red-500 text-sm mb-6">
+          <div className="text-red-500 text-sm mt-3">
             <p>{error}</p>
           </div>
         )}
-        <div className="text-center">
+        <div className="text-center mt-3">
           <button
             type="submit"
             disabled={loading ? true : false}

frontend/src/auth/SignUp.tsx

@@ -67,8 +67,8 @@ export const SignUp = () => {
   }
 
   return (
-    <div className="flex flex-col items-center mt-5">
-      <div className="text-2xl mt-20">회원가입</div>
+    <div className="flex flex-col items-center">
+      <div className="text-2xl mt-10">회원가입</div>
       <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
         <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
           이름
@@ -125,7 +125,7 @@ export const SignUp = () => {
           onChange={handleChange}
         />
         {error && (
-          <div className="text-red-500 text-sm">
+          <div className="text-red-500 text-sm mt-3">
             <p>{error}</p>
           </div>
         )}

frontend/src/commons/Footer.tsx

+import React from "react";
+export const Footer = () => {
+  return (
+    <div className="flex justify-center mt-5 py-1 bg-gray-100">
+      <p className="text-gray-500 text-sm">
+        Copyright © 2022 Simple Survey Form. All rights reserved.
+      </p>
+    </div>
+  );
+};

frontend/src/commons/index.tsx

 export { Header } from "./Header";
+export { Footer } from "./Footer";
 export { QUESTION_TYPES } from "./constants";

frontend/src/home/Home.tsx

@@ -32,7 +32,7 @@ export const Home = () => {
         </div>
         <p className="text-center text-xl text-black mt-3">Create now!</p>
       </div>
-      <div className="flex justify-center">
+      <div className="flex justify-center mt-3">
         <img src={SurveyImg} className="object-scale-down justify-center" />
       </div>
     </div>

frontend/src/profile/MySurveyCard.tsx

@@ -28,11 +28,13 @@ export const MySurveyCard = ({ data }: Props) => {
   };
 
   async function deleteSurvey() {
+    if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
       try {
         if (data._id) {
           const survey = await surveyApi.deleteSurvey(data._id);
           setSuccess(true);
           setError("");
+          alert("삭제되었습니다.");
           location.reload();
         } else {
           setLoading(true);
@@ -43,17 +45,20 @@ export const MySurveyCard = ({ data }: Props) => {
       } finally {
         setLoading(false);
       }
+    } else {
+      alert("삭제를 취소합니다.");
+    }
   }
 
   return (
     <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}>
+      <button className="w-full mt-2" onClick={editSurvey}>
         <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">
+        <div className="h-24 md:h-36 p-3 overflow-y-hidden hover:overflow-y-auto">
+          <p className="text-gray-700 text-justify">
             {data.comment ? data.comment : "설명없는 설문조사"}
           </p>
         </div>

frontend/src/questions/Question.tsx

@@ -54,12 +54,8 @@ Props) => {
       selectedType === "dropdown" ||
       selectedType === "checkbox"
     ) {
-      content = {
-        choices: [
-          { text: "", value: 0 },
-          { text: "", value: 1 },
-          { text: "", value: 2 },
-        ],
+      element.content = {
+        choices: [{ text: "", value: 0 }],
       };
     } else if (selectedType === "essay") {
       content = { choices: [] };
@@ -67,11 +63,7 @@ Props) => {
       content = {
         minRateDescription: "",
         maxRateDescription: "",
-        choices: [
-          { text: "", value: 0 },
-          { text: "", value: 1 },
-          { text: "", value: 2 },
-        ],
+        choices: [{ text: "", value: 0 }],
       };
     }
     // question.type = selectedType;
@@ -151,7 +143,12 @@ Props) => {
   };
 
   const handleDelete = () => {
-    deleteQuestion(question._id);
+    if (window.confirm("질문을 삭제하시겠습니까?")) {
+      deleteQuestion(element._id);
+      alert("삭제되었습니다.");
+    } else {
+      alert("질문 삭제를 취소합니다.");
+    }
   };
 
   const handleEditClick = () => {

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