SignUp.tsx 3.72 KB
Newer Older
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
1
2
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
Lee SeoYeon's avatar
Lee SeoYeon committed
3
// import axios from "axios";
Jiwon Yoon's avatar
Jiwon Yoon committed
4

5
type SignUpProps = {};
Jiwon Yoon's avatar
Jiwon Yoon committed
6

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
7
8
9
10
export const SignUp = ({}: SignUpProps) => {
  const USER = {
    name: "",
    email: "",
Lee SeoYeon's avatar
Lee SeoYeon committed
11
12
    password: "",
    password2: "",
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
13
  };
Lee SeoYeon's avatar
Lee SeoYeon committed
14
15
16
17
18
19
  // interface USER {
  //   name: "";
  //   email: "";
  //   password: "";
  //   password2: "";
  // }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
20
21

  const [user, setUser] = useState(USER);
Lee SeoYeon's avatar
Lee SeoYeon committed
22
23
24
25
  // const [user, setUser] = useState<USER>();
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
26
27
28
  const navigate = useNavigate();

  useEffect(() => {
Lee SeoYeon's avatar
Lee SeoYeon committed
29
30
    setDisabled(!(user.name && user.email && user.password && user.password2));
  }, [user]);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
31
32

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
Lee SeoYeon's avatar
Lee SeoYeon committed
33
34
    const { id, value } = event.target;
    setUser({ ...user, [id]: value });
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
35
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
36

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
37
38
39
  async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
    try {
Lee SeoYeon's avatar
Lee SeoYeon committed
40
      console.log("checkPassword:", passwordmatch());
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
41
      if (passwordmatch()) {
Lee SeoYeon's avatar
Lee SeoYeon committed
42
43
44
45
46
        // const res = await axios.post("/api/signup", user);
        // console.log("서버연결됬나요", res);
        console.log("회원가입");
        setSuccess(true);
        setError("");
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
47
48
      }
    } catch (error) {
Lee SeoYeon's avatar
Lee SeoYeon committed
49
      console.log("에러발생");
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
50
51
52
53
54
      // catchErrors(error, setError)
    } finally {
      // setLoading(false);
    }
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
55

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
56
57
58
59
60
61
62
63
64
65
  function passwordmatch() {
    if (user.password !== user.password2) {
      alert("비밀번호가 일치하지않습니다");
      console.log("password fail");
      return false;
    } else {
      console.log("password match");
      return true;
    }
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
66

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
67
  if (success) {
Lee SeoYeon's avatar
Lee SeoYeon committed
68
69
    alert("회원가입 되었습니다");
    navigate(`../`);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
70
71
  }

Lee SeoYeon's avatar
Lee SeoYeon committed
72
  // const { name, email, password, password2 } = user;
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
  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"
Lee SeoYeon's avatar
Lee SeoYeon committed
122
            type="submit"
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
123
            onClick={handleSubmit}
Lee SeoYeon's avatar
Lee SeoYeon committed
124
            disabled={disabled}
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
125
126
127
128
          >
            회원가입
          </button>
        </div>
Lee SeoYeon's avatar
Lee SeoYeon committed
129
      </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
130
    </div>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
131
132
  );
};