import { StyleSheet, ScrollView, View, Text, TextInput, TouchableOpacity, Alert, } from 'react-native'; import React, { useState } from 'react'; import RadioButton from '../component/RadioButton'; import Api from '../api/ApiUtils'; import { useNavigation } from '@react-navigation/native'; export default function AgreementScreen() { const navigation = useNavigation(); const [agreementData, setAgreement] = useState({ id: '', password: '', email: '', sex: null, phone: '', }); const radio_props = [ { label: '여성', value: '여성' }, { label: '남성', value: '남성' }, ]; const handleInputChange = (field, value) => { setAgreement(prevAgreement => ({ ...prevAgreement, [field]: value, })); }; const handleSubmit = async () => { try { const response = await Api.register(agreementData); console.log(response); navigation.navigate('Login'); } catch (error) { Alert.alert('가입 실패', error.message); } }; // 전화번호 포맷팅 const formatPhoneNumber = (text) => { 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) => { const formatted = formatPhoneNumber(text); handleInputChange('phone', formatted); }; return ( 회원 가입 아이디 handleInputChange('id', text)} /> 비밀번호 handleInputChange('password', text)} /> 이메일 handleInputChange('email', text)} /> 성별 {radio_props.map((radio, index) => ( handleInputChange('sex', radio.value)} buttonColor={'#B0C4DE'} selectedButtonColor={'#007AFF'} labelColor={'#333'} style={styles.radioButton}> {radio.label} ))} 전화번호 등록하기 ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f8f8', }, scrollContainer: { padding: 16, alignItems: 'center', }, logoPoint: { fontSize: 28, color: '#007AFF', fontWeight: 'bold', marginVertical: 20, }, formGroup: { width: '100%', marginBottom: 20, }, inputLabel: { color: '#666', marginBottom: 8, fontSize: 16, }, input: { borderColor: '#ddd', borderRadius: 8, borderWidth: 1, padding: 12, backgroundColor: '#fff', fontSize: 16, }, radioForm: { flexDirection: 'row', justifyContent: 'flex-start', marginVertical: 12, }, radioButton: { marginRight: 20, }, button: { backgroundColor: '#007AFF', padding: 15, borderRadius: 8, width: '100%', alignItems: 'center', }, buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, });