Merge branch 'yeon' into develope

frontend/package.json

@@ -12,9 +12,12 @@
   "author": "Daeki Yoon",
   "license": "ISC",
   "devDependencies": {
+    "@types/bcryptjs": "^2.4.2",
+    "@types/cookie-parser": "^1.4.3",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.3",
+    "@types/validator": "^13.7.3",
     "autoprefixer": "^10.4.7",
     "css-loader": "^6.7.1",
     "html-webpack-plugin": "^5.5.0",
@@ -29,8 +32,11 @@
     "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "cookie-parser": "^1.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "validator": "^13.7.0"
   }
 }

frontend/src/SurveyRouter.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App";
 import { Login, SignUp } from "./auth";
-import { CreateSurveyForm } from "./commons";
+import { CreateSurveyForm, SurveyForm } from "./commons";
 import { Home } from "./home";
 
 export const SurveyRouter = () => {
@@ -14,6 +14,7 @@ export const SurveyRouter = () => {
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<SignUp />} />
           <Route path="create" element={<CreateSurveyForm />} />
+          <Route path="survey" element={<SurveyForm />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/auth/SignUp.tsx

-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 type SignUpProps = {};
 
-export const SignUp = ({}: SignUpProps) => (
-  <div className="flex justify-center mt-3">
-    <div className="text-slate-300 text-xl font-bold">
-      <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
-        이름
-      </label>
-      <input
-        className="shadow appearance-none border rounded  py-2 px-3 text-gray-60"
-        id="name"
-        type="name"
-        placeholder="이름을 입력하세요"
-      />
-      <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
-        이메일
-      </label>
-      <input
-        className="shadow appearance-none border rounded  py-2 px-3 text-gray-70"
-        id="email"
-        type="email"
-        placeholder="이메일을 입력하세요"
-      />
-
-      <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
-        비밀번호
-      </label>
-      <input
-        className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
-        id="username"
-        type="password"
-        placeholder="비밀번호를 입력하세요"
-      />
-      <div className="text-center">
-        <button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3">
-          회원가입
-        </button>
+export const SignUp = ({}: SignUpProps) => {
+  const USER = {
+    name: "",
+    email: "",
+    password: "2345",
+    password2: "1234",
+  };
+
+  const [user, setUser] = useState(USER);
+  const [error, setError] = useState('')
+  const [disabled, setDisabled] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setDisabled(!(user.name && user.email && user.password && user.password2))
+  }, [user])
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const { name, value } = event.target
+    setUser({...user, [name]: value})
+  }
+  
+  async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    try {
+      // console.log('checkPassword:',checkPassword())
+      // const passwordMatch = checkPassword()
+      if (passwordmatch()) {
+        // const res = await userApi.signup(user)
+        // console.log('서버연결됬나요', res)
+        console.log('회원가입')
+        setSuccess(true)
+        setError('')
+      }
+    } catch (error) {
+      console.log('에러발생')
+      // catchErrors(error, setError)
+    } finally {
+      // setLoading(false);
+    }
+  }
+  
+  function passwordmatch() {
+    if (user.password !== user.password2) {
+      alert("비밀번호가 일치하지않습니다");
+      console.log("password fail");
+      return false;
+    } else {
+      console.log("password match");
+      return true;
+    }
+  }
+  
+  if (success) {
+    alert('회원가입 되었습니다')
+    navigate(`../`)
+  }
+
+  return (
+    <div className="flex justify-center mt-3">
+      <div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
+        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
+          이름
+        </label>
+        <input
+          className="shadow appearance-none border rounded  py-2 px-3 text-gray-60"
+          id="name"
+          type="text"
+          placeholder="이름을 입력하세요"
+          onChange={handleChange}
+        />
+        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
+          이메일
+        </label>
+        <input
+          className="shadow appearance-none border rounded  py-2 px-3 text-gray-70"
+          id="email"
+          type="text"
+          placeholder="이메일을 입력하세요"
+          onChange={handleChange}
+        />
+
+        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
+          비밀번호
+        </label>
+        <input
+          className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
+          id="password"
+          type="password"
+          placeholder="비밀번호를 입력하세요"
+          onChange={handleChange}
+        />
+
+        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
+          비밀번호 확인
+        </label>
+        <input
+          className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
+          id="password2"
+          type="password"
+          placeholder="비밀번호를 다시 입력하세요"
+          onChange={handleChange}
+        />
+
+        <div className="text-center mt-3">
+          <button
+            className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
+            onClick={handleSubmit}
+          >
+            회원가입
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

frontend/src/commons/SurveyForm.tsx

+import React from 'react'
+
+export const SurveyForm = () => (
+  <div className='flex justify-center'>
+    <div className="flex flex-col space-y-4 mt-5">
+      설문조사 이름
+      <div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
+        <form>
+          <label>첫번째 질문</label>
+        </form>
+      </div>
+      <div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
+        <form>
+          <label>두번째 질문</label>
+        </form>
+      </div>
+      <div className="box-content h-52 w-96 py-4 px-5 border-2 mt-5">
+        <form>
+          <label>세번째 질문</label>
+        </form>
+      </div>
+      <div className="text-center t-5">
+        <button className="bg-themeColor text-white border rounded py-2 px-6">
+          제출
+        </button>
+      </div>
+    </div>
+  </div>
+)

frontend/src/commons/index.tsx

 export { CreateSurveyForm } from "./CreateSurveyForm";
 export { Header } from "./Header";
+export { SurveyForm } from "./SurveyForm";
\ No newline at end of file