westargram-react 후기

Copy 
1constructor() {
2    super();
3    this.state = {
4      isChecked: false,
5      id: '',
6      password: '',
7    };
8  }
9
10  goToMain = () => {
11    const { isChecked, id, password } = this.state;
12
13    isChecked &&
14      fetch('http://3.34.133.239:8000/account/signin', {
15        method: 'POST',
16        body: JSON.stringify({
17          email: id,
18          password: password,
19        }),
20      })
21        .then((response) => response.json())
22        .then((result) => {
23          if (result.Authorization) {
24            localStorage.setItem('token', result.Authorization);
25            this.props.history.push('/main-wontae');
26          } else if (result.message === 'UNAUTHORIZED') {
27            alert('이메일 / 비밀번호를 확인해주세요');
28          }
29        });
30  };
31
32  saveData = (e) => {
33    const { name, value } = e.target;
34    this.setState(
35      {
36        [name]: value,
37      },
38      this.checkValidation
39    );
40
41    if (e.key === 'Enter') {
42      this.goToMain();
43    }
44  };
45
46  checkValidation = () => {
47    const { id, password } = this.state;
48    const isChecked = id.includes('@') && password.length >= 5;
49    this.setState({
50      isChecked,
51    });
52  };
53
54  render() {
55    retrun (
56      ...
57          <div onKeyUp={this.saveData} className="form">
58            <input
59              name="id"
60              type="text"
61              placeholder="전화번호, 사용자 이름 또는 이메일"
62            />
63            <input name="password" type="password" placeholder="비밀번호" />
64            <button
65              type="submit"
66              className={isChecked ? 'isActive' : null}
67              onClick={this.goToMain}
68            >
69              로그인
70            </button>
71          </div>
72      ...
73    )
74  }