Merge remote-tracking branch 'origin/develope' into yeon

frontend/src/commons/CreateSurveyForm.tsx

 import React from "react";
 
 export const CreateSurveyForm = () => (
-  <div>설문조사를 직접 만들 수 있는 페이지</div>
-);
+<div className="flex flex-col place-items-center">
+        <div className="flex flex-col container h-1/2 place-items-center">
+
+            <p className="font-bold text-4xl w-2/3">
+                Survey Title
+            </p>
+
+
+            <p className="text-3xl w-2/3">
+                Comment
+            </p>
+        </div>
+
+        <div className="flex flex-col container w-4/5 h-auto border-2 border-black items-center">
+            <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+                <p className="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
+                    질문
+                </p>
+                <button className="text-center flex border-2 border-black mr-6 place-content-end">
+                    질문종류▽
+                </button>
+
+            </div>
+            <div className="flex border-2 border-black h-96 w-4/5 mt-4">
+                설문내용 뜨는창
+            </div>
+            <div className="flex w-full flex-row justify-end">
+                <button className="w-1/12">필수</button>
+                <button className="w-1/12">삭제</button>
+            </div>
+        </div>
+
+        <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
+            질문 추가 +
+        </div>
+
+    </div>);

frontend/src/home/Home.tsx

 import React from "react";
+import { Link } from "react-router-dom";
 
 type HomeProps = {
   title?: string;
 };
 
 export const Home = ({ title = "Simple Survey Form" }: HomeProps) => (
-  <div>
-    <div className="text-center text-3xl text-black my-5">
+  
+    <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 container justify-center my-6">
-      <div className="flex justify-center text-2xl font-bold h-14 w-28 border-blue-500 rounded-lg bg-gray-300">
-        <div className="flex">
-          <button className="text-black">+</button>
+      <div className="flex flex-col place-items-center container">
+        <div>
+          <Link to="/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">+</div>
+          </Link>
         </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 className="text-center text-xl text-black">Create now</div>
     </div>
+  
 );