Merge branch 'seo_yeon' into develop0714

frontend/src/commons/ACheckbox.tsx

+import React from "react";
+
+export const ACheckboxForm = () => {
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <form className="text-xl font-bold ml-6 w-1/2">checkbox</form>
+      </div>
+      <form className="border w-11/12 my-4">설문조사 설명</form>
+      <div className="flex flex-row items-center m-3">
+        <div className="mb-4 mx-3">
+          <input
+            id="default-checkbox"
+            type="checkbox"
+            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <input className="ml-2 text-lg font-medium">First checkbox</input>
+        </div>
+        <div className="mb-4 mx-3">
+          <input
+            id="default-checkbox"
+            type="checkbox"
+            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg font-medium">Second checkbox</label>
+        </div>
+        <div className="mb-4 mx-3">
+          <input
+            id="default-checkbox"
+            type="checkbox"
+            value=""
+            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg font-medium">Third checkbox</label>
+        </div>
+        <div className="mb-4 mx-4">
+          <input
+            id="default-checkbox"
+            type="checkbox"
+            value=""
+            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg font-medium">Fourth checkbox</label>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/commons/ADropdown.tsx

+import React from "react";
+
+export const ADropdownForm = () => {
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+      <div className="flex flexgi-row h-16 w-full items-center">
+        <form className="text-xl font-bold ml-6 w-1/2">dropdown</form>
+      </div>
+      <form className="border w-11/12 my-3">설문조사 설명</form>
+      <select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
+        <option selected>choose answer</option>
+        <option>first</option>
+        <option>second</option>
+      </select>
+    </div>
+  );
+};

frontend/src/commons/AEssayForm.tsx

+import React from "react";
+
+export const AEssayForm = () => {
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <form className="text-xl font-bold ml-6 w-1/2">input</form>
+      </div>
+      <form className="border w-11/12 my-3">설문조사 설명</form>
+      <input className="border w-11/12 h-36 my-3" type="text"></input>
+    </div>
+  );
+};

frontend/src/commons/ARadioForm.tsx

+import React from "react";
+import { RadioType } from "../types";
+
+// type Props = {
+//   element: RadioType;
+// };
+
+export const ARadioForm = () => {
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <form className="text-xl font-bold ml-6 w-1/2">radio</form>
+      </div>
+      <form className="border w-11/12 my-4">설문조사 설명</form>
+      <div className="flex flex-row items-center m-3">
+        <div className="flex items-center mb-4 mx-4">
+          <input
+            id="default-radio-1"
+            type="radio"
+            value=""
+            name="default-radio"
+            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg">First radio</label>
+        </div>
+        <div className="flex items-center mb-4 mx-4">
+          <input
+            id="default-radio-1"
+            type="radio"
+            value=""
+            name="default-radio"
+            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg">Second radio</label>
+        </div>
+        <div className="flex items-center mb-4 mx-4">
+          <input
+            checked
+            id="default-radio-2"
+            type="radio"
+            value=""
+            name="default-radio"
+            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+          />
+          <label className="ml-2 text-lg">Checked state</label>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/commons/SurveyForm.tsx

 import React, { InputHTMLAttributes } from "react";
+import { ACheckboxForm } from "./ACheckbox";
+import { ADropdownForm } from "./ADropdown";
+import { AEssayForm } from "./AEssayForm";
+import { ARadioForm } from "./ARadioForm";
 
 export const SurveyForm = () => {
   return (
@@ -11,113 +15,15 @@ export const SurveyForm = () => {
           rows={2}
           cols={60}
         ></textarea>
-        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-            <form className="text-xl font-bold ml-6 w-1/2">
-              Q1. 첫번째 질문
-            </form>
-          </div>
-          <form className="border w-11/12 my-3">설문조사 설명</form>
-          <input
-            className="border w-11/12 h-36 my-3"
-            type="text"
-            placeholder="설문조사 답변"
-          ></input>
+        {/* <ACheckboxForm></ACheckboxForm> */}
+        <ADropdownForm></ADropdownForm>
+        <AEssayForm></AEssayForm>
+        <ARadioForm></ARadioForm>
+        <div>
+          <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
+            제출하기
+          </button>
         </div>
-        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-            <form className="text-xl font-bold ml-6 w-1/2">
-              Q2. 두번째 질문
-            </form>
-          </div>
-          <form className="border w-11/12 my-4">설문조사 설명</form>
-          <div className="flex flex-row items-center m-3">
-            <div className="mb-4 mx-3">
-              <input
-                id="default-checkbox"
-                type="checkbox"
-                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg font-medium">First checkbox</label>
-            </div>
-            <div className="mb-4 mx-3">
-              <input
-                id="default-checkbox"
-                type="checkbox"
-                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg font-medium">
-                Second checkbox
-              </label>
-            </div>
-            <div className="mb-4 mx-3">
-              <input
-                id="default-checkbox"
-                type="checkbox"
-                value=""
-                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg font-medium">Third checkbox</label>
-            </div>
-            <div className="mb-4 mx-4">
-              <input
-                id="default-checkbox"
-                type="checkbox"
-                value=""
-                className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg font-medium">
-                Fourth checkbox
-              </label>
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-          <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-            <form className="text-xl font-bold ml-6 w-1/2">
-              Q3. 세번째 질문
-            </form>
-          </div>
-          <form className="border w-11/12 my-4">설문조사 설명</form>
-          <div className="flex flex-row items-center m-3">
-            <div className="flex items-center mb-4 mx-4">
-              <input
-                id="default-radio-1"
-                type="radio"
-                value=""
-                name="default-radio"
-                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg">First radio</label>
-            </div>
-            <div className="flex items-center mb-4 mx-4">
-              <input
-                id="default-radio-1"
-                type="radio"
-                value=""
-                name="default-radio"
-                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg">Second radio</label>
-            </div>
-            <div className="flex items-center mb-4 mx-4">
-              <input
-                checked
-                id="default-radio-2"
-                type="radio"
-                value=""
-                name="default-radio"
-                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-              />
-              <label className="ml-2 text-lg">Checked state</label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
-          제출하기
-        </button>
       </div>
     </div>
   );

frontend/src/home/Home.tsx

-import React from "react";
-import { Link } from "react-router-dom";
+import React, { FormEvent } from "react";
+import { useAuth } from "../auth/auth.context";
 
-export const Home = () => (
-  <div className="flex flex-col place-items-center">
-    <div className="justify-end text-center text-3xl text-black h-16 mt-12">
-      가장 쉽게 설문지를 만드세요!
-    </div>
-    <div className="flex flex-col place-items-center container">
-      <div>
-        <Link
-          to="/surveys/create"
-          className="flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg "
-        >
-          <div className="text-center w-28 font-bold text-black place-items-center">
+export const Home = () => {
+  const { user } = useAuth();
+
+  function clickHome(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    if (!user.isLoggedIn) {
+      console.log("버튼");
+      location.href = "/login";
+    } else {
+      location.href = "/profile";
+    }
+  }
+
+  return (
+    <div className="flex flex-col place-items-center">
+      <div className="justify-end text-center text-3xl text-black h-16 mt-12">
+        가장 쉽게 설문지를 만드세요!
+      </div>
+      <div className="flex flex-col place-items-center container">
+        <div className="flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg ">
+          <button
+            type="button"
+            className="text-center h-full w-28 font-bold text-black place-items-center"
+            onClick={clickHome}
+          >
             +
-          </div>
-        </Link>
+          </button>
+        </div>
+        <p className="text-center text-xl text-black mt-3">Create now!</p>
+      </div>
+      <div className="flex justify-center">
+        <img
+          src="https://3hbgf23vu0wr11wkpae5igwe-wpengine.netdna-ssl.com/wp-content/uploads/2021/04/SurveyExample_v3.jpg"
+          className="object-scale-down justify-center"
+        />
       </div>
-      <p className="text-center text-xl text-black">Create now!</p>
-    </div>
-    <div className="flex justify-center">
-      <img
-        src="https://3hbgf23vu0wr11wkpae5igwe-wpengine.netdna-ssl.com/wp-content/uploads/2021/04/SurveyExample_v3.jpg"
-        className="object-scale-down justify-center"
-      />
     </div>
-  </div>
-);
+  );
+};

frontend/src/questions/index.tsx

-export { Question } from "./Question";
+//export { Question } from "./Question";