File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import {
StyleSheet,
ScrollView,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import React from 'react';
import RadioButton from '../component/RadioButton';
import {agreementAPI} from '../utils/loginUtils';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {RootStackParam} from '../utils/RootStackParam';
export default function AgreementScreen() {
const navigation = useNavigation<NativeStackNavigationProp<RootStackParam>>();
const [agreementData, setAgreement] = React.useState({
id: '',
password: '',
email: '',
sex: null,
phone: '',
});
const radio_props = [
{label: '여성', value: '여성'},
{label: '남성', value: '남성'},
];
const handleInputChange = (field: string, value: string | number | null) => {
setAgreement(prevAgreement => ({
...prevAgreement,
[field]: value,
}));
};
const handleSubmit = async () => {
console.log(agreementData); //
try {
const response = await agreementAPI(agreementData);
console.log('Response from server:', response);
// if (response.Authorization) {
// navigation.navigate('LoginScreen');
// }
navigation.navigate('LoginScreen');
} catch (error) {
console.error('Error submitting agreement:', error);
}
};
// 전화번호 포맷팅
const formatPhoneNumber = (text: string) => {
const cleaned = text.replace(/\D/g, ''); // Remove all non-numeric characters
if (cleaned.length === 11) {
const match = cleaned.match(/^(\d{3})(\d{4})(\d{4})$/);
if (match) {
return `${match[1]}-${match[2]}-${match[3]}`;
}
}
return text;
};
const handlePhoneChange = (text: string) => {
const formatted = formatPhoneNumber(text);
handleInputChange('phone', formatted);
};
return (
<View style={styles.container}>
<Text style={styles.logoPoint}>회원 가입</Text>
<ScrollView>
<Text style={styles.inputText}> 아이디</Text>
<TextInput
style={styles.input}
placeholder="아이디를 입력하세요"
placeholderTextColor={'#cccccc'}
onChangeText={text => handleInputChange('id', text)}
/>
<Text style={styles.inputText}> 비밀번호 </Text>
<TextInput
style={styles.input}
placeholder="비밀번호를 입력하세요"
secureTextEntry={true}
placeholderTextColor={'#cccccc'}
onChangeText={text => handleInputChange('password', text)}
/>
<Text style={styles.inputText}> 이메일 </Text>
<TextInput
style={styles.input}
placeholder="이메일을 입력하세요"
placeholderTextColor={'#cccccc'}
onChangeText={text => handleInputChange('email', text)}
/>
<Text style={styles.inputText}> 성별 </Text>
<View style={styles.radioForm}>
{radio_props.map((radio, index) => (
<RadioButton
key={index}
isSelected={agreementData.sex === radio.value}
onPress={() => handleInputChange('sex', radio.value)}
buttonColor={'#2196f3'}
selectedButtonColor={'#2196f3'}
labelColor={'#000'}
style={styles.radioButton}>
{radio.label}
</RadioButton>
))}
</View>
<Text style={styles.inputText}> 전화번호 </Text>
<TextInput
style={styles.input}
placeholder="전화번호를 입력하세요"
placeholderTextColor={'#cccccc'}
onChangeText={handlePhoneChange}
value={agreementData.phone}
keyboardType="phone-pad"
/>
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
<Text style={styles.buttonText}> 등록하기 </Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 16,
paddingVertical: 50,
justifyContent: 'center',
backgroundColor: '#ffffff',
},
logoPoint: {
fontSize: 25,
color: '#3872ef',
fontWeight: 'bold',
textAlign: 'center',
marginTop: 20,
marginBottom: 30,
},
inputText: {
color: '#959595',
marginVertical: 10,
},
input: {
borderColor: '#959595',
borderRadius: 10,
borderWidth: 1,
marginBottom: 10,
padding: 10,
backgroundColor: '#ffffff',
},
radioForm: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 16,
marginLeft: 10,
marginTop: 12,
},
radioButton: {
marginRight: 20,
},
button: {
backgroundColor: '#3872ef',
padding: 10,
borderRadius: 10,
marginTop: 30,
marginBottom: 10,
alignItems: 'center',
},
buttonText: {
color: '#fff',
},
});