Signup 로직 추가하고 스타일 변경

frontend/src/apis/auth.api.ts

 import axios from "axios";
+import { SignupUser } from "../types";
 import baseUrl from "./baseUrl";
 
 export const login = async (email: string, password: string) => {
@@ -13,3 +14,8 @@ export const logout = async () => {
   const { data } = await axios.get(`${baseUrl}/auth/logout`);
   return data;
 };
+
+export const signup = async (user: SignupUser) => {
+  const { data } = await axios.post(`${baseUrl}/auth/signup`, user);
+  return data;
+};

frontend/src/auth/signup.tsx

-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React, { FormEvent, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { authApi } from "../apis";
+import { catchErrors } from "../helpers";
+import { SignupUser } from "../types";
 
 export default function Signup() {
+  const [user, setUser] = useState<SignupUser & { password2: string }>({
+    name: "",
+    email: "",
+    password: "",
+    password2: "",
+  });
+
+  const [loading, setLoading] = 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]);
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const { name, value } = event.currentTarget;
+    console.log(`name: ${name}, value: ${value}`);
+    setUser({ ...user, [name]: value });
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    try {
+      console.log("checkPassword:", passwordMatch());
+      console.log("user data", user);
+      if (passwordMatch()) {
+        const { password2, ...sUser } = user;
+        const res = await authApi.signup(sUser);
+        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("/login", { replace: true });
+  }
+
   return (
-    <div className="flex flex-col ">
-      <div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
+    <div className="flex flex-col items-center">
+      <div className="p-12 md:w-40 mt-8 bg-red-400 rounded-2xl">
         <Link to="/">Travel Report</Link>
       </div>
-      <form className="py-3 border-b border-white ">
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col items-center mt-16 gap-y-4"
+      >
+        <input
+          className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
+          placeholder="이름"
+          type="text"
+          name="name"
+          onChange={handleChange}
+        />
+
+        <input
+          className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
+          placeholder="이메일"
+          type="email"
+          name="email"
+          onChange={handleChange}
+        />
+
         <input
           className="placeholder:text-slate-300
           bg-white border border-slate-500 rounded-2xl
           py-2 pl-9 pr-3
           focus:border-black"
           placeholder="비밀번호"
-          type="text"
+          type="password"
           name="password"
           // value={password}
-          // onChange={(e) => setPassword(e.target.value)}
+          onChange={handleChange}
         />
 
         <input
@@ -25,18 +107,18 @@ export default function Signup() {
           bg-white border border-slate-500 rounded-2xl
           py-2 pl-9 pr-3
           focus:border-black"
-          placeholder="비밀번호"
-          type="text"
-          name="password"
+          placeholder="비밀번호 확인"
+          type="password"
+          name="password2"
           // value={password}
-          // onChange={(e) => setPassword(e.target.value)}
-        />
-        <input
-          className="placeholder:text-slate-300 bg-white border border-slate-500 rounded-2xl py-2 pl-9 pr-3 focus:border-black"
-          placeholder="email"
-          type="text"
-          name="Id"
+          onChange={handleChange}
         />
+        <button
+          disabled={disabled}
+          className="place-self-center py-3 border-b border-white"
+        >
+          회원가입
+        </button>
       </form>
     </div>
   );

frontend/src/types/index.tsx

@@ -7,3 +7,9 @@ export interface PostType {
   theme?: string;
   city?: string;
 }
+
+export interface SignupUser {
+  email: string;
+  name: string;
+  password: string;
+}