LoginComponent.js
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, {useState, useCallback} from 'react';
import {Text} from 'react-native';
import {useDispatch} from "react-redux";
import {loginSaga} from "../../reducers/user";
import SquareButtonComponent from "../Base/SquareButtonComponent";
import {BUTTON_COLOR} from "../../constant";
import TextInputComponent from "../Base/TextInputComponent";
const LoginComponent = (props) => {
// 데이터
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// 함수
const dispatch = useDispatch();
const onChangeEmail = useCallback(text => {
setEmail(text);
}, []);
const onChangePassword = useCallback((text) => {
setPassword(text);
}, []);
const login = useCallback(() => {
dispatch({
type: loginSaga,
data: {email, password}
});
}, [email, password]);
// 렌더링
return (
<>
<Text style={{
marginTop: 80,
marginBottom: 20,
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
color: '#373737'
}}>
로그인
</Text>
<TextInputComponent
onChangeText={onChangeEmail}
value={email}
secureTextEntry={false}
placeholder={'이메일을 쓰세요'}
rules={[
v => !!v || '이메일 입력은 필수입니다',
v => (v && (v.trim() !== '')) || '이메일 입력은 필수입니다',
v => (v && (v.length <= 100)) || '이메일의 길이는 100자 이하입니다',
v => (v && (/.+@.+/.test(v))) || '이메일의 형식이 올바르지 않습니다',
]}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 0,
marginBottom: 0,
padding: 15,
}}
style2={{
marginLeft: 35,
marginRight: 35,
}}
/>
<TextInputComponent
onChangeText={onChangePassword}
value={password}
secureTextEntry={true}
placeholder={'비밀번호를 쓰세요'}
rules={[
v => !!v || '비밀번호 입력은 필수입니다',
v => (v && (v.trim() !== '')) || '비밀번호 입력은 필수입니다',
]}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 0,
marginBottom: 0,
padding: 15,
}}
style2={{
marginLeft: 35,
marginRight: 35,
}}
/>
<SquareButtonComponent
onPress={login}
text={'로그인'}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 10,
padding: 15,
borderRadius: 3,
backgroundColor: BUTTON_COLOR
}}
style2={{
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
color: '#ffffff'
}}
/>
</>
)
};
export default LoginComponent;