Merge branch 'yeon' into develope

frontend/package.json

@@ -32,6 +32,7 @@
     "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "bcryptjs": "^2.4.3",
     "cookie-parser": "^1.4.6",
     "react": "^18.2.0",

frontend/src/auth/Login.tsx

-import React from "react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 // type LoginProps = {
 
 // };
 
-export const Login = () => (
-  <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-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 Login = () => {
+  // interface IUSER {
+  //   email: string;
+  //   password: string;
+  // }
+
+  // const [error, setError] = useState("");
+  // const [disabled, setDisabled] = useState(false);
+  // const [success, setSuccess] = useState(false);
+  // const navigate = useNavigate();
+
+  // function handleChange(event: type) {}
+
+  // function handleSubmit(params: type) {}
+
+  // 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-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>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

frontend/src/auth/SignUp.tsx

 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
 
 type SignUpProps = {};
 
 export const SignUp = ({}: SignUpProps) => {
-  const USER = {
-    name: "",
-    email: "",
-    password: "2345",
+  interface IUSER {
+    name: string;
+    email: string;
+    password: string;
+    password2: string;
+  }
+
+  const [user, setUser] = useState<IUSER>({
+    name: "user",
+    email: "user1234@naver.com",
+    password: "1234",
     password2: "1234",
-  };
+  });
 
-  const [user, setUser] = useState(USER);
-  const [error, setError] = useState('')
-  const [disabled, setDisabled] = useState(false)
-  const [success, setSuccess] = useState(false)
+  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])
+    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})
+    const { id, value } = event.target;
+    setUser({ ...user, [id]: value });
   }
-  
+
   async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
     try {
-      // console.log('checkPassword:',checkPassword())
-      // const passwordMatch = checkPassword()
+      console.log("checkPassword:", passwordmatch());
       if (passwordmatch()) {
-        // const res = await userApi.signup(user)
-        // console.log('서버연결됬나요', res)
-        console.log('회원가입')
-        setSuccess(true)
-        setError('')
+        const res = await axios.post("/api/auth/signup", user);
+        console.log("서버연결됬나요", res);
+        console.log("회원가입");
+        setSuccess(true);
+        setError("");
       }
     } catch (error) {
-      console.log('에러발생')
+      console.log("에러발생");
       // catchErrors(error, setError)
     } finally {
       // setLoading(false);
     }
   }
-  
+
   function passwordmatch() {
     if (user.password !== user.password2) {
       alert("비밀번호가 일치하지않습니다");
@@ -56,10 +62,10 @@ export const SignUp = ({}: SignUpProps) => {
       return true;
     }
   }
-  
+
   if (success) {
-    alert('회원가입 되었습니다')
-    navigate(`../`)
+    alert("회원가입 되었습니다");
+    navigate(`../`);
   }
 
   return (
@@ -111,7 +117,9 @@ export const SignUp = ({}: SignUpProps) => {
         <div className="text-center mt-3">
           <button
             className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
+            type="submit"
             onClick={handleSubmit}
+            disabled={disabled}
           >
             회원가입
           </button>