File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, {useEffect, useState} from 'react';
import Button from '../component/Button';
import Input from '../component/Input';
import {Picker} from '@react-native-picker/picker';
import {View, StyleSheet, Text, ScrollView, Alert} from 'react-native';
import {HelperText} from 'react-native-paper';
import {
container,
ItemFlex,
ItemFlex2,
direction,
pageTitleBox,
pageTitle,
textColor,
marginRight,
} from '../resoureces/styles/GlobalStyles';
import {url} from '../url';
import {PRIMARY, WHITE} from '../color';
export default function JoinMembers({navigation}) {
/* 퉥스트 입력 */
const [userId, setUserId] = useState('');
const [userPassword, setUserPassword] = useState();
const [userPasswordCked, setUserPasswordCked] = useState();
const [name, setName] = useState();
const [year, setYear] = useState();
const [month, setMonth] = useState();
const [day, setDay] = useState();
const [phone, setPhone] = useState();
const [email, setEmail] = useState();
const [selectedLanguage, setSelectedLanguage] = useState();
const [userSex, setUserSex] = useState();
const [idchecked, setIdChecked] = useState(false);
const [pwChecked, setPwChecked] = useState(false);
const joinFetchData = () => {
fetch(`${url}/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: userId,
password: userPassword,
email: email,
user_sex: userSex,
phone: phone,
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
if (data.Authorization === userId) {
Alert.alert('회원가입이 완료되었습니다.');
navigation.navigate('Login');
} else {
Alert.alert('입력 정보를 확인해주세요.');
}
})
.catch(err => {
console.error(err);
});
};
const validation = () => {
fetch(`${url}/auth/id`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: userId,
}),
})
.then(data => {
if (data.ok) {
setIdChecked(true);
} else {
setIdChecked(false);
}
})
.catch(err => {
console.error(err);
});
};
return (
<View style={{flex: 1}}>
<View style={pageTitleBox}>
<Text style={pageTitle}>회원가입</Text>
</View>
<View style={container}>
<ScrollView>
<View style={styles.marginBottom}>
<Text style={textColor}>아이디</Text>
<View style={direction}>
<View style={[ItemFlex2, marginRight]}>
<Input
placeholder={'아이디'}
onChangeText={userId => {
setUserId(userId);
}}
// onBlur={validation()}
/>
</View>
<View style={ItemFlex}>
<Button
title={'중복확인'}
backgroundColor={PRIMARY.DEFAULT}
padding={18}
borderRadius={50}
color={WHITE}
textAlign={'center'}
fontSize={10}
onPress={() => validation()}
/>
</View>
</View>
{userId === '' ? (
''
) : idchecked ? (
<HelperText type="info">사용 가능한 아이디 입니다.</HelperText>
) : (
<HelperText type="error">이미 사용중인 아이디 입니다.</HelperText>
)}
</View>
<View style={styles.marginBottom}>
<View style={styles.marginBottom}>
<Text style={textColor}>비밀번호</Text>
<Input
placeholder={'비밀번호'}
onChangeText={userPassword => {
setUserPassword(userPassword);
}}
secureTextEntry={true}
/>
</View>
<View>
<Text style={textColor}>비밀번호 확인</Text>
<Input
placeholder={'비밀번호 확인'}
onChangeText={userPasswordCked => {
setUserPasswordCked(userPasswordCked);
}}
secureTextEntry={true}
/>
{userPasswordCked === '' || userPasswordCked === userPassword ? (
''
) : (
<HelperText type="error">
비밀번호를 다시 확인해주세요.
</HelperText>
)}
</View>
</View>
<View style={styles.marginBottom}>
<View style={styles.marginBottom}>
<Text style={textColor}>이름</Text>
<Input
placeholder={'이름'}
onChangeText={name => {
setName(name);
}}
/>
</View>
<View>
<Text style={textColor}>생년월일</Text>
<View style={direction}>
<View style={[ItemFlex, marginRight]}>
<Input
placeholder={'년(4자)'}
onChangeText={year => {
setYear(year);
}}
/>
</View>
<View style={[ItemFlex, marginRight]}>
<Input
placeholder={'월'}
onChangeText={month => {
setMonth(month);
}}
/>
</View>
<View style={ItemFlex}>
<Input
placeholder={'일'}
onChangeText={day => {
setDay(day);
}}
/>
</View>
</View>
</View>
</View>
<View style={styles.marginBottom}>
<Text style={textColor}>성별</Text>
<View style={styles.picker}>
<Picker
selectedValue={userSex}
onValueChange={itemValue => setUserSex(itemValue)}>
<Picker.Item label="남자" value="Man" />
<Picker.Item label="여자" value="Woman" />
</Picker>
</View>
</View>
<View style={styles.picker}>
<Picker
selectedValue={selectedLanguage}
onValueChange={(itemValue, itemIndex) =>
setSelectedLanguage(itemValue)
}>
<Picker.Item label="대한민국 +82" value="Korea" />
<Picker.Item label="미국 +1" value="USA" />
<Picker.Item label="일본 +81" value="Japan" />
<Picker.Item label="베트남 +84" value="Vietnam" />
<Picker.Item label="홍콩 +852" value="Hongkong" />
</Picker>
</View>
<View>
<Text style={textColor}>전화번호</Text>
<View style={direction}>
<View style={[ItemFlex2, marginRight]}>
<Input
placeholder={'전화번호 입력'}
onChangeText={phone => {
setPhone(phone);
}}
/>
</View>
<View style={ItemFlex}>
<Button
title={'인증번호받기'}
backgroundColor={PRIMARY.DEFAULT}
padding={18}
color={WHITE}
borderRadius={50}
textAlign={'center'}
fontSize={10}
onPress={() => navigation.navigate('JoinMembers')}
/>
</View>
</View>
<View>
<Input placeholder={'인증번호 입력'} />
</View>
</View>
<View>
<Text style={textColor}>이메일</Text>
<View>
<View>
<Input
placeholder={'이메일 입력'}
onChangeText={email => {
setEmail(email);
}}
/>
</View>
</View>
</View>
<Button
title={'가입하기'}
backgroundColor={PRIMARY.DEFAULT}
padding={15}
color={WHITE}
borderRadius={50}
textAlign={'center'}
onPress={joinFetchData}
/>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
padding: {
padding: 10,
},
marginBottom: {
marginBottom: 10,
},
picker: {
borderWidth: 1,
borderColor: '#dddddd',
marginBottom: 10,
backgroundColor: '#ffffff',
},
picker: {
// borderWidth: 1,
borderRadius: 50,
// borderColor: '#5F4BC6',
marginBottom: 10,
backgroundColor: '#F4F3F9',
},
});