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, {useState, useEffect} from 'react';
import {View, StyleSheet, ScrollView, Text, Alert} from 'react-native';
import Button from '../component/Button';
import Checkbox from '../component/Checkbox';
import {
container,
pageTitleBox,
pageTitle,
} from '../resoureces/styles/GlobalStyles';
import {PERSONAL_INFORMATION, LOCATION, NAVIGATION} from '../../Global';
import {ScrollView as GestureHandlerScrollView} from 'react-native-gesture-handler';
import {PRIMARY, WHITE} from '../color';
export default function Agreement({navigation}) {
const [allCheck, setAllCheck] = useState(false);
const [naviCheck, setNaviCheck] = useState(false);
const [useCheck, setUseCheck] = useState(false);
const [infoCheck, setInfoCheck] = useState(false);
const allBtnEvent = () => {
if (allCheck === false) {
setAllCheck(true);
setNaviCheck(true);
setUseCheck(true);
setInfoCheck(true);
} else {
setAllCheck(false);
setNaviCheck(false);
setUseCheck(false);
setInfoCheck(false);
}
};
const naviBtnEvent = () => {
if (naviCheck === false) {
setNaviCheck(true);
} else {
setNaviCheck(false);
}
};
const useBtnEvent = () => {
if (useCheck === false) {
setUseCheck(true);
} else {
setUseCheck(false);
}
};
const infoBtnEvent = () => {
if (infoCheck === false) {
setInfoCheck(true);
} else {
setInfoCheck(false);
}
};
const allCheckList = () => {
if (allCheck) {
navigation.navigate('JoinMembers');
} else {
Alert.alert(
'약관에 동의해주세요.',
`네비게이션 이용약관, 개인정보 수집 및 이용동의, 위치정보 이용약관에 모두 동의해주세요`,
);
}
};
useEffect(() => {
if (naviCheck === true && useCheck === true && infoCheck === true) {
setAllCheck(true);
} else {
setAllCheck(false);
}
}, [naviCheck, useCheck, infoCheck]);
return (
<View style={{flex: 1}}>
<View style={pageTitleBox}>
<Text style={pageTitle}>이용 약관</Text>
</View>
<View style={styles.container}>
<ScrollView>
<View>
<View style={styles.direction}>
<Checkbox
disabled={false}
value={allCheck}
onValueChange={allBtnEvent}
text={`네비게이션 이용, 개인정보 수집 및 이용, 위치기반서비스 이용약관에 모두 동의합니다`}
/>
</View>
</View>
<View>
<View style={styles.direction}>
<Checkbox
disabled={false}
value={naviCheck}
onValueChange={naviBtnEvent}
text={'네비게이션 이용 동의'}
/>
</View>
<GestureHandlerScrollView style={[styles.border, styles.padding]}>
<Text>{NAVIGATION}</Text>
</GestureHandlerScrollView>
</View>
<View>
<View style={styles.direction}>
<Checkbox
disabled={false}
value={useCheck}
onValueChange={useBtnEvent}
text={'개인정보 수집 및 이용 동의'}
/>
</View>
<GestureHandlerScrollView style={[styles.border, styles.padding]}>
<Text>{PERSONAL_INFORMATION}</Text>
</GestureHandlerScrollView>
</View>
<View>
<View style={styles.direction}>
<Checkbox
disabled={false}
value={infoCheck}
onValueChange={infoBtnEvent}
text={'위치정보 이용 약관 동의'}
/>
</View>
<GestureHandlerScrollView style={[styles.border, styles.padding]}>
<Text>{LOCATION}</Text>
</GestureHandlerScrollView>
</View>
<View style={styles.direction}>
<View style={[styles.buttonFlex, styles.margin]}>
<Button
title={'취소'}
backgroundColor={'#bbbbbb'}
padding={10}
borderRadius={50}
color={'#ffffff'}
textAlign={'center'}
onPress={() => {
navigation.navigate('Login');
}}
/>
</View>
<View style={[styles.buttonFlex]}>
<Button
title={'확인'}
backgroundColor={PRIMARY.DEFAULT}
padding={10}
borderRadius={50}
color={WHITE}
textAlign={'center'}
onPress={allCheckList}
/>
</View>
</View>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: WHITE,
padding: 20,
},
padding: {
padding: 20,
height: 200,
},
direction: {
flexDirection: 'row',
justifyContent: 'space-between',
},
border: {
borderWidth: 1,
borderRadius: 5,
borderColor: '#dddddd',
marginBottom: 10,
},
buttonFlex: {
flex: 1,
marginVertical: 10,
},
margin: {
marginRight: 10,
},
});