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} from 'react-native';
import {HelperText} from 'react-native-paper';
import {
container,
ItemFlex,
ItemFlex2,
direction,
pageTitleBox,
pageTitle,
textColor,
} from '../resoureces/styles/GlobalStyles';
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('http://192.168.0.138:80/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('회원가입이 완료되었습니다.');
navigation.navigate('Login');
} else {
alert('입력 정보를 확인해주세요.');
}
})
.catch(err => {
console.error(err);
});
};
const validation = () => {
fetch('http://192.168.0.138:80/auth/id', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: userId,
}),
})
.then(response => response.json())
.then(data => {
if (data.message === 'Success') {
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>
<Input
placeholder={'사용하실 아이디'}
onChangeText={userId => {
setUserId(userId);
}}
onBlur={validation()}
/>
{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, styles.marginRight]}>
<Input
placeholder={'년(4자)'}
onChangeText={year => {
setYear(year);
}}
/>
</View>
<View style={[ItemFlex, styles.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, itemIndex) => setUserSex(itemValue)}>
<Picker.Item label="남자" value="Man" />
<Picker.Item label="여자" value="Woman" />
</Picker>
</View>
</View>
<View>
<Text style={textColor}>휴대전화</Text>
<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 style={direction}>
<View style={[ItemFlex2, styles.marginRight]}>
<Input
placeholder={'전화번호 입력'}
onChangeText={phone => {
setPhone(phone);
}}
/>
</View>
<View style={ItemFlex}>
<Button
title={'인증번호받기'}
backgroundColor={'#000000'}
padding={15}
borderRadius={50}
color={'#ffffff'}
textAlign={'center'}
fontSize={10}
onPress={() => navigation.navigate('JoinMembers')}
/>
</View>
</View>
<View>
<Input placeholder={'인증번호 입력'} />
</View>
<View>
<Text style={textColor}>이메일</Text>
<Input
placeholder={'이메일'}
onChangeText={email => {
setEmail(email);
}}
/>
</View>
</View>
<Button
title={'가입하기'}
backgroundColor={'#000000'}
padding={15}
borderRadius={50}
color={'#ffffff'}
textAlign={'center'}
onPress={joinFetchData}
/>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
padding: {
padding: 10,
},
marginRight: {
marginRight: 10,
},
marginBottom: {
marginBottom: 10,
},
picker: {
borderWidth: 1,
borderRadius: 50,
borderColor: '#dddddd',
marginBottom: 10,
backgroundColor: '#ffffff',
},
});