SignUp.js 5.01 KB
Newer Older
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
1
import axios from "axios";
Kim, Chaerin's avatar
Kim, Chaerin committed
2
3
4
5
6
7
import { useEffect, useState } from "react";

const INIT_USER = {
  name: "",
  idNumber1: "",
  idNumber2: "",
Kim, Chaerin's avatar
서버    
Kim, Chaerin committed
8
  email: "",
Kim, Chaerin's avatar
Kim, Chaerin committed
9
10
11
12
13
  password: "",
  checkpw: "",
  phone: "",
};

Kim, Chaerin's avatar
Kim, Chaerin committed
14
const Signup = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
15
16
  const [user, setUser] = useState(INIT_USER);
  const [error, setError] = useState("");
Kim, Chaerin's avatar
Kim, Chaerin committed
17
  const [disabled, setDisabled] = useState(false);
Kim, Chaerin's avatar
Kim, Chaerin committed
18
19
20
  const [success, setSuccess] = useState(false);

  useEffect(() => {
Kim, Chaerin's avatar
Kim, Chaerin committed
21
22
23
24
25
    setDisabled(
      !(
        user.name &&
        user.idNumber1 &&
        user.idNumber2 &&
Kim, Chaerin's avatar
서버    
Kim, Chaerin committed
26
        user.email &&
Kim, Chaerin's avatar
Kim, Chaerin committed
27
28
29
        user.password &&
        user.checkpw
      )
Kim, Chaerin's avatar
Kim, Chaerin committed
30
31
32
33
34
35
36
37
38
39
40
    );
  }, [user]);

  function handleChange(event) {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
    console.log(user);
  }

  async function handleSubmit() {
    try {
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
41
      const data = await axios.post("https://localhost:8080/api/room/1/1",user)
Kim, Chaerin's avatar
Kim, Chaerin committed
42
43
44
      // setLoading(true);
      // setError("");
      //   const success = await login(user.email, user.password);
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
45
      console.log(data);
Kim, Chaerin's avatar
Kim, Chaerin committed
46
47
48
49
50
51
52
53
      setSuccess(success);
    } catch (error) {
      // catchErrors(error, setError);
    } finally {
      // setLoading(false);
    }
  }

seoyeon's avatar
0716    
seoyeon committed
54
55
56
57
58
  if (success) {
    alert('회원가입 되었습니다.')
  }


Kim, Chaerin's avatar
Kim, Chaerin committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
  const { name, idNumber1, idNumber2, id, password, checkpw, phone } = user;
  return (
    <div className="modal-content">
      <form onSubmit={handleSubmit}>
        <div className="modal-header">
          <h5 className="modal-title" id="loginModalLabel">
            회원가입
          </h5>
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div className="modal-body">
          <div className="p-2">
            <label className="p-1">이름</label>
            <input
              className="form-control"
              id="name"
              type="text"
              name="name"
              placeholder="이름을 입력하세요"
              value={name}
              onChange={handleChange}
            />
          </div>
          <div className="p-2">
            <label className="p-1">주민등록번호</label>
            <div className="d-flex text-center">
              <div className="col-4">
                <input
92
                  className="mt-2 form-control"
Kim, Chaerin's avatar
Kim, Chaerin committed
93
94
95
96
                  id="idNumber1"
                  type="text"
                  name="idNumber1"
                  placeholder="●●●●●●"
97
                  maxLength='6'
Kim, Chaerin's avatar
Kim, Chaerin committed
98
99
100
101
                  value={idNumber1}
                  onChange={handleChange}
                />
              </div>
102
              <div className="col-1 pt-3 ps-2"></div>
Kim, Chaerin's avatar
Kim, Chaerin committed
103
104
              <div className="col-1">
                <input
105
                  className="mt-2 ms-2 form-control"
Kim, Chaerin's avatar
Kim, Chaerin committed
106
107
                  id="idNumber2"
                  type="text"
108
                  style={{width:'35px'}}
Kim, Chaerin's avatar
Kim, Chaerin committed
109
110
111
112
                  name="idNumber2"
                  placeholder=""
                  value={idNumber2}
                  onChange={handleChange}
113
                  maxLength='1'
Kim, Chaerin's avatar
Kim, Chaerin committed
114
115
                />
              </div>
116
              <div className="pt-3 ps-4">* * * * * *</div>
Kim, Chaerin's avatar
Kim, Chaerin committed
117
118
119
120
121
122
            </div>
          </div>
          <div className="p-2">
            <label className="p-1">아이디</label>
            <input
              className="form-control"
Kim, Chaerin's avatar
서버    
Kim, Chaerin committed
123
              id="text"
Kim, Chaerin's avatar
Kim, Chaerin committed
124
              type="text"
Kim, Chaerin's avatar
서버    
Kim, Chaerin committed
125
              name="email"
Kim, Chaerin's avatar
Kim, Chaerin committed
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
              placeholder="아이디를 입력하세요"
              value={id}
              onChange={handleChange}
            />
          </div>
          <div className="p-2">
            <label className="p-1">비밀번호</label>
            <input
              className="form-control"
              id="password"
              type="password"
              name="password"
              placeholder="비밀번호를 입력하세요"
              value={password}
              onChange={handleChange}
            />
          </div>
          <div className="p-2">
            <label className="p-1">비밀번호확인</label>
            <input
              className="form-control"
              id="checkpw"
              type="password"
              name="checkpw"
              placeholder="비밀번호를 다시 입력하세요"
              value={checkpw}
              onChange={handleChange}
            />
          </div>
          <div className="p-2">
            <label className="p-1">전화번호(선택)</label>
            <input
              className="form-control"
              id="phone"
              type="text"
              name="phone"
162
              placeholder="'-'을 제외하고 입력하세요"
Kim, Chaerin's avatar
Kim, Chaerin committed
163
164
165
166
167
              value={phone}
              onChange={handleChange}
            />
          </div>
        </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
168
        {console.log(disabled)}
Kim, Chaerin's avatar
Kim, Chaerin committed
169
170
171
172
        <div className="modal-footer">
          <button type="submit" className="btn btn-primary" disabled={disabled}>
            회원가입
          </button>
Kim, Chaerin's avatar
Kim, Chaerin committed
173
        </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
174
175
176
      </form>
    </div>
  );
Kim, Chaerin's avatar
Kim, Chaerin committed
177
178
179
};

export default Signup;