diff --git a/App.tsx b/App.tsx index f472c0b..a5b2466 100644 --- a/App.tsx +++ b/App.tsx @@ -1,11 +1,15 @@ import React, {useEffect, useState} from 'react'; import {StyleSheet, SafeAreaView} from 'react-native'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; import {createStackNavigator} from '@react-navigation/stack'; import Splash from './src/screens/Splash'; import {NavigationContainer} from '@react-navigation/native'; import {MainNavigator} from './src/nav'; import {AuthNavigator} from './src/nav'; +import 'react-native-gesture-handler'; +import {enableScreens} from 'react-native-screens'; +enableScreens(); export default function App() { const Stack = createStackNavigator(); @@ -21,7 +25,7 @@ export default function App() { }, []); return ( - + {loading ? ( @@ -33,7 +37,7 @@ export default function App() { )} - + ); } diff --git a/package-lock.json b/package-lock.json index cc36897..6a27c4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.6.2", "@react-navigation/stack": "^6.2.1", + "@types/react": "^18.0.10", "moment": "^2.29.3", "moment-with-locales-es6": "^1.0.1", "react": "17.0.2", @@ -29,7 +31,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "@types/jest": "^26.0.23", - "@types/react-native": "^0.67.3", + "@types/react-native": "^0.67.7", "@types/react-native-vector-icons": "^6.4.10", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.17.0", @@ -4215,6 +4217,22 @@ "react-native": "*" } }, + "node_modules/@react-navigation/native-stack": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz", + "integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==", + "dependencies": { + "@react-navigation/elements": "^1.3.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/native/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -4419,14 +4437,12 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", - "dev": true, + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz", + "integrity": "sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -4461,11 +4477,21 @@ "@types/react": "^17" } }, + "node_modules/@types/react-test-renderer/node_modules/@types/react": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", + "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "node_modules/@types/stack-utils": { "version": "2.0.1", @@ -6231,8 +6257,7 @@ "node_modules/csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", - "dev": true + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "node_modules/data-urls": { "version": "2.0.0", @@ -18793,6 +18818,15 @@ } } }, + "@react-navigation/native-stack": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz", + "integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==", + "requires": { + "@react-navigation/elements": "^1.3.3", + "warn-once": "^0.1.0" + } + }, "@react-navigation/routers": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz", @@ -18975,14 +19009,12 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", - "dev": true, + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz", + "integrity": "sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -19015,13 +19047,25 @@ "dev": true, "requires": { "@types/react": "^17" + }, + "dependencies": { + "@types/react": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", + "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + } } }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/stack-utils": { "version": "2.0.1", @@ -20325,8 +20369,7 @@ "csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", - "dev": true + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "data-urls": { "version": "2.0.0", diff --git a/package.json b/package.json index 08872dd..d1010fb 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.6.2", "@react-navigation/stack": "^6.2.1", + "@types/react": "^18.0.10", "moment": "^2.29.3", "moment-with-locales-es6": "^1.0.1", "react": "17.0.2", @@ -31,7 +33,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "@types/jest": "^26.0.23", - "@types/react-native": "^0.67.3", + "@types/react-native": "^0.67.7", "@types/react-native-vector-icons": "^6.4.10", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.17.0", diff --git a/src/assets/images/appleIcon.png b/src/assets/images/appleIcon.png new file mode 100755 index 0000000..03ed743 Binary files /dev/null and b/src/assets/images/appleIcon.png differ diff --git a/src/assets/images/kakaoIcon.png b/src/assets/images/kakaoIcon.png new file mode 100644 index 0000000..c11cd5b Binary files /dev/null and b/src/assets/images/kakaoIcon.png differ diff --git a/src/assets/images/naverIcon.png b/src/assets/images/naverIcon.png new file mode 100644 index 0000000..e3c3242 Binary files /dev/null and b/src/assets/images/naverIcon.png differ diff --git a/src/components/AnimatedHeader.tsx b/src/components/AnimatedHeader.tsx index 6af88ba..6c1f707 100644 --- a/src/components/AnimatedHeader.tsx +++ b/src/components/AnimatedHeader.tsx @@ -8,13 +8,14 @@ import {CircleBar} from './CircleBar'; const HEADER_HEIGHT = 250; type AnimatedHeaderProps = { animatedValue: Animated.Value; + paddingTop: number; }; -export const AnimatedHeader: FC = ({animatedValue}) => { +export const AnimatedHeader: FC = ({animatedValue, paddingTop}) => { const heightAnimStyle = useStyle({ height: animatedValue.interpolate({ inputRange: [0, HEADER_HEIGHT], - outputRange: [HEADER_HEIGHT, 120], + outputRange: [HEADER_HEIGHT, 120 + paddingTop], extrapolate: 'clamp', }), }); @@ -46,6 +47,7 @@ export const AnimatedHeader: FC = ({animatedValue}) => { const styles = StyleSheet.create({ headerWrap: { + paddingTop, position: 'absolute', top: 0, left: 0, diff --git a/src/components/CheckBox.tsx b/src/components/CheckBox.tsx new file mode 100644 index 0000000..2eb32e6 --- /dev/null +++ b/src/components/CheckBox.tsx @@ -0,0 +1,60 @@ +import {Pressable, StyleSheet, Text, View} from 'react-native'; +import React from 'react'; +import type {FC} from 'react'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; + +type CheckBoxProps = { + onPress: () => void; + title: string; + isChecked: boolean; + isCheckAll?: boolean; +}; +let scale = 1; + +export const CheckBox: FC = ({onPress, title, isChecked, isCheckAll}) => { + isCheckAll ? (scale = 1.2) : (scale = 1); + return ( + + + + + + + {title} + + ); +}; + +const styles = StyleSheet.create({ + container: { + justifyContent: 'flex-start', + alignItems: 'center', + flexDirection: 'row', + width: '100%', + marginTop: 24, + }, + title: { + fontSize: 16 * scale, + color: '#000', + marginLeft: 16, + }, + markedCircle: { + backgroundColor: '#6C69FF', + borderRadius: 18, + borderColor: '#DFDFDF', + borderWidth: 2, + }, + unmarkedCircle: { + backgroundColor: 'transparent', + borderRadius: 18, + borderColor: '#DFDFDF', + borderWidth: 2, + }, + markedCheck: {opacity: 1}, + unmarkedCheck: {opacity: 0}, +}); diff --git a/src/components/RegisterHeader.tsx b/src/components/RegisterHeader.tsx new file mode 100644 index 0000000..821d4ae --- /dev/null +++ b/src/components/RegisterHeader.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import type {FC} from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; + +export type RegisterHeaderProps = { + goBack: () => void; + pageNum: number; +}; + +export const RegisterHeader: FC = ({goBack, pageNum}) => { + return ( + + + + + + + {pageNum === 0 && } + {pageNum === 1 && ( + + 1/2 + + )} + {pageNum === 2 && ( + + 2/2 + + )} + + + + + ); +}; + +const styles = StyleSheet.create({ + headerWrap: {flexDirection: 'row', justifyContent: 'space-between', margin: 12}, + backButton: { + zIndex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + disable: {opacity: 0}, + progressText: { + color: '#949494', + fontSize: 16, + }, +}); diff --git a/src/components/RegisterNextButton.tsx b/src/components/RegisterNextButton.tsx new file mode 100644 index 0000000..8db9c06 --- /dev/null +++ b/src/components/RegisterNextButton.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import type {FC} from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {Colors} from 'react-native-paper'; + +export type RegisterNextButtonProps = { + goNext: () => void; + disabled?: boolean; + buttonState: number; +}; + +export const RegisterNextButton: FC = ({ + goNext, + disabled, + buttonState, +}) => { + return ( + + + + {buttonState === 2 ? '밥파서블 시작하기' : '다음'} + + + + ); +}; + +const styles = StyleSheet.create({ + buttonWrap: {justifyContent: 'center', alignItems: 'center', marginLeft: 20, marginRight: 20}, + buttonStyle: { + width: '100%', + height: 60, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 10, + }, + stateDisabledButton: { + backgroundColor: Colors.grey300, + }, + stateNextButton: {backgroundColor: '#2A2A2A'}, + stateFinishButton: {backgroundColor: '#615EFF'}, + buttonText: { + fontSize: 18, + fontWeight: 'bold', + }, + stateDisabledText: { + color: Colors.grey500, + }, + stateNextText: { + color: '#FFFFFF', + }, +}); diff --git a/src/components/index.ts b/src/components/index.ts index 64323da..a70929c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,6 @@ export * from './AnimatedHeader'; export * from './HomeMission'; export * from './CircleBar'; +export * from './RegisterNextButton'; +export * from './RegisterHeader'; +export * from './CheckBox'; diff --git a/src/data/index.ts b/src/data/index.ts new file mode 100644 index 0000000..5326167 --- /dev/null +++ b/src/data/index.ts @@ -0,0 +1,2 @@ +export * from './RegisterInterface'; +export * from './createRegister'; diff --git a/src/global.d.ts b/src/global.d.ts index 4c69266..ba74fa4 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,9 +1,8 @@ -ideclare namespace ReactNavigation { - interface RootParamList { - CustomerLogin: undefined - OwnerLogin: undefined - MainNavigator: undefined - Register: undefined - - } -} \ No newline at end of file +declare namespace ReactNavigation { + interface RootParamList { + CustomerLogin: undefined; + OwnerLogin: undefined; + MainNavigator: undefined; + Register: undefined; + } +} diff --git a/src/nav/AuthNavigator.tsx b/src/nav/AuthNavigator.tsx index 795ef7a..e5362fe 100644 --- a/src/nav/AuthNavigator.tsx +++ b/src/nav/AuthNavigator.tsx @@ -6,13 +6,23 @@ import {MainNavigator} from './MainNavigator'; import Register from '../screens/Register'; import RegisterForm from '../screens/RegisterForm'; import RegisterCategory from '../screens/RegisterCategory'; -const Stack = createStackNavigator(); +import {RegisterInterface} from '../data'; + +export type AuthStackParamList = { + Login: undefined; + Register: {registerData: RegisterInterface}; + RegisterForm: {registerData: RegisterInterface}; + RegisterCategory: {registerData: RegisterInterface}; + MainNavigator: undefined; +}; + +const Stack = createStackNavigator(); export const AuthNavigator = () => { return ( diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx index 5b839d5..1243e5c 100644 --- a/src/screens/Login.tsx +++ b/src/screens/Login.tsx @@ -1,34 +1,67 @@ import React, {useCallback} from 'react'; -import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; -import {Colors} from 'react-native-paper'; +import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native'; import {useNavigation} from '@react-navigation/native'; +import {SafeAreaView} from 'react-native-safe-area-context'; const Login = () => { const navigation = useNavigation(); - const title = 'Login'; const goMain = useCallback(() => navigation.navigate('MainNavigator'), []); const goRegister = useCallback(() => navigation.navigate('Register'), []); return ( - - {title} - - - 로그인 했다치고 등록된 아이디라 홈 화면으로 넘어가기 - - + + + + + 홈 + + + + + 가입 + + + - - - 로그인 했는데 가입 안되어있어서 가입화면 가기 - - - + + 로고 + 미션밥파서블 + + + + + + + + + + + + + ); }; const styles = StyleSheet.create({ flex: {flex: 1}, + loginMain: { + justifyContent: 'center', + alignItems: 'center', + flex: 1, + height: '100%', + }, + logoWrap: { + marginBottom: 92, + marginLeft: 64, + marginRight: 64, + flexDirection: 'row', + justifyContent: 'space-between', + }, + iconButton: { + width: 50, + height: 50, + borderRadius: 50, + }, }); export default Login; diff --git a/src/screens/Main.tsx b/src/screens/Main.tsx index c4ee3aa..a2baba8 100644 --- a/src/screens/Main.tsx +++ b/src/screens/Main.tsx @@ -1,5 +1,7 @@ import React, {useRef} from 'react'; import {View, StyleSheet, Text, Animated} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {HomeMission} from '../components'; import {AnimatedHeader} from '../components'; @@ -50,12 +52,16 @@ const dummyMission = [ const Main = () => { const offset = useRef(new Animated.Value(0)).current; - + const insets = useSafeAreaInsets(); + const styles = StyleSheet.create({ + mainView: {flex: 1}, + }); + console.log(insets); return ( - - + + ( @@ -77,12 +83,8 @@ const Main = () => { }} ItemSeparatorComponent={() => } /> - + ); }; -const styles = StyleSheet.create({ - mainView: {flex: 1}, -}); - export default Main; diff --git a/src/screens/Register.tsx b/src/screens/Register.tsx index 7d9d9fd..634c1ca 100644 --- a/src/screens/Register.tsx +++ b/src/screens/Register.tsx @@ -1,30 +1,150 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {View, StyleSheet, Text} from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {RegisterNextButton} from '../components'; +import {createRegister} from '../data/createRegister'; +import {RegisterInterface} from '../data/RegisterInterface'; +import type {NativeStackScreenProps} from '@react-navigation/native-stack'; +import {AuthStackParamList} from '../nav'; +import {RegisterHeader, CheckBox} from '../components'; -const Register = ({navigation}) => { - const title = 'Register'; +type Props = NativeStackScreenProps; + +const Register = ({navigation, route}: Props) => { + const [registerData, setRegisterData] = useState(createRegister); + const [checkAll, setCheckAll] = useState(false); + const [check14, setCheck14] = useState(false); + const [checkService, setCheckService] = useState(false); + const [checkPrivacy, setCheckPrivacy] = useState(false); + const [checkLocation, setCheckLocation] = useState(false); + const [checkMarketing, setCheckMarketing] = useState(false); + const [buttonDisabled, setButtonDisabled] = useState(false); + + //initialize registerData if navigated back from registerForm + useEffect(() => { + if (route.params !== undefined) { + setRegisterData(route.params.registerData); + } + }, []); + + //Check disable Button and Check ALL status + useEffect(() => { + if (checkPrivacy && checkService && check14) { + setButtonDisabled(false); + } else { + setButtonDisabled(true); + } + if (checkPrivacy && checkService && check14 && checkLocation && checkMarketing) { + setCheckAll(true); + } else { + setCheckAll(false); + } + }, [checkPrivacy, checkService, check14, checkLocation, checkMarketing]); const goNext = () => { - navigation.navigate('RegisterCategory'); + navigation.navigate('RegisterForm', {registerData}); + }; + const goBack = () => { + navigation.goBack(); }; return ( - - - {title} - - - - 다음 + + + + + 서비스 이용 동의 + + + { + setCheckAll(!checkAll); + setCheck14(!checkAll); + setCheckService(!checkAll); + setCheckPrivacy(!checkAll); + setCheckLocation(!checkAll); + setCheckMarketing(!checkAll); + setRegisterData({ + ...registerData, + overAge14: !checkAll, + serviceContract: !checkAll, + privacyContract: !checkAll, + locationContract: !checkAll, + marketingContract: !checkAll, + }); + }} + title="약관 전체 동의" + isChecked={checkAll} + isCheckAll={true} + /> - - + + + { + setCheck14(!check14); + setRegisterData({...registerData, overAge14: !check14}); + }} + title="만 14세 이상입니다" + isChecked={check14} + /> + + + { + setCheckService(!checkService); + setRegisterData({...registerData, serviceContract: !checkService}); + }} + title="(필수)서비스 이용약관" + isChecked={checkService} + /> + + + { + setCheckPrivacy(!checkPrivacy); + setRegisterData({...registerData, privacyContract: !checkPrivacy}); + }} + title="(필수)개인 정보 처리 방침" + isChecked={checkPrivacy} + /> + + + { + setCheckLocation(!checkLocation); + setRegisterData({...registerData, locationContract: !checkLocation}); + }} + title="(선택) 위치정보 제공" + isChecked={checkLocation} + /> + + + { + setCheckMarketing(!checkMarketing); + setRegisterData({...registerData, marketingContract: !checkMarketing}); + }} + title="(선택) 마케팅 수신 동의" + isChecked={checkMarketing} + /> + + + + ); }; const styles = StyleSheet.create({ flex: {flex: 1}, + CheckBoxWrap: {margin: 16}, + seperateLine: {borderColor: '#E8E8E8', borderWidth: 1, marginTop: 16}, + RegisterHeadText: {fontSize: 24, fontWeight: '800'}, + RegisterHeadWrap: {paddingBottom: 8}, }); export default Register; diff --git a/src/screens/RegisterCategory.tsx b/src/screens/RegisterCategory.tsx index 5bfbe0a..31f9962 100644 --- a/src/screens/RegisterCategory.tsx +++ b/src/screens/RegisterCategory.tsx @@ -1,17 +1,70 @@ -import React from 'react'; +import {NativeStackScreenProps} from '@react-navigation/native-stack'; +import React, {useState} from 'react'; import {View, StyleSheet, Text} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {RegisterHeader, RegisterNextButton} from '../components'; +import {RegisterInterface} from '../data'; +import {AuthStackParamList} from '../nav'; -const RegisterCategory = () => { +type Props = NativeStackScreenProps; + +const RegisterCategory = ({navigation, route}: Props) => { + const [registerData, setRegisterData] = useState(route.params.registerData); const title = 'RegisterCategory'; + const goNext = () => { + navigation.reset({routes: [{name: 'MainNavigator'}]}); + }; + const goBack = () => { + navigation.navigate('RegisterForm', {registerData}); + }; return ( - - {title} - + + + + + + 선호하는 음식 종류를 선택해주세요! + 중복선택 가능해요! + + + + + + + + + ); }; const styles = StyleSheet.create({ flex: {flex: 1}, + backButton: { + position: 'absolute', + width: 24, + height: 24, + left: 12, + top: 44, + }, + categoryWrap: { + margin: 16, + }, + categoryHead: { + width: 205, + }, + categoryHeadText: { + fontSize: 24, + fontWeight: '600', + lineHeight: 34, + }, + categorySubHeadText: { + fontSize: 14, + fontWeight: '300', + lineHeight: 22, + marginTop: 8, + color: '#616161', + }, }); export default RegisterCategory; diff --git a/src/screens/RegisterForm.tsx b/src/screens/RegisterForm.tsx index 4609f4f..6011a49 100644 --- a/src/screens/RegisterForm.tsx +++ b/src/screens/RegisterForm.tsx @@ -1,17 +1,135 @@ -import React from 'react'; -import {View, StyleSheet, Text} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {View, StyleSheet, Text, TextInput} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {RegisterNextButton} from '../components'; +import {gender, RegisterInterface} from '../data'; +import type {NativeStackScreenProps} from '@react-navigation/native-stack'; +import {AuthStackParamList} from '../nav'; +import {RegisterHeader} from '../components'; -const RegisterForm = () => { - const title = 'RegisterForm'; +type Props = NativeStackScreenProps; + +const RegisterForm = ({navigation, route}: Props) => { + const [registerData, setRegisterData] = useState(route.params.registerData); + const [name, setName] = useState(''); + const [gender, setGender] = useState(3); + const [birthDate, setBirthDate] = useState(new Date()); + const [address, setAddress] = useState(''); + + useEffect(() => { + setRegisterData(route.params.registerData); + }, []); + + const goNext = () => { + navigation.navigate('RegisterCategory', {registerData}); + }; + const goBack = () => { + navigation.navigate('Register', {registerData}); + }; return ( - - {title} - + + + + + 이름 + + + + 성별 + + + 남자 + + + 여자 + + + 선택 안함 + + + + + 생년월일 + + + + 주소 + + + + + + + ); }; const styles = StyleSheet.create({ flex: {flex: 1}, + formWrap: {margin: 16, justifyContent: 'space-between'}, + backButton: { + zIndex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + formHeadText: { + fontSize: 18, + fontWeight: '600', + marginBottom: 10, + }, + nameInput: { + width: '100%', + height: 44, + borderWidth: 1, + borderColor: '#DFDFDF', + borderRadius: 10, + paddingLeft: 8, + paddingTop: 10, + paddingBottom: 10, + }, + genderWrap: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + genderChecked: { + width: 105, + height: 56, + justifyContent: 'center', + alignItems: 'center', + borderWidth: 1, + borderColor: '#6C69FF', + borderRadius: 10, + backgroundColor: '#F6F6FE', + }, + genderUnchecked: { + justifyContent: 'center', + alignItems: 'center', + width: 105, + height: 56, + borderWidth: 1, + borderColor: '#DFDFDF', + borderRadius: 10, + }, }); export default RegisterForm; diff --git a/yarn.lock b/yarn.lock index 3be21af..616870d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1623,6 +1623,14 @@ "resolved" "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz" "version" "1.3.3" +"@react-navigation/native-stack@^6.6.2": + "integrity" "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==" + "resolved" "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz" + "version" "6.6.2" + dependencies: + "@react-navigation/elements" "^1.3.3" + "warn-once" "^0.1.0" + "@react-navigation/native@^6.0.0", "@react-navigation/native@^6.0.10": "integrity" "sha512-H6QhLeiieGxNcAJismIDXIPZgf1myr7Og8v116tezIGmincJTOcWavTd7lPHGnMMXaZg94LlVtbaBRIx9cexqw==" "resolved" "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.10.tgz" @@ -1800,7 +1808,7 @@ "@types/react" "*" "@types/react-native" "*" -"@types/react-native@*", "@types/react-native@^0.67.3": +"@types/react-native@*", "@types/react-native@^0.67.7": "integrity" "sha512-G7vi9vE226diNNXVNbIa8HH/wPxMWHTHkn9iQtQSezaWzO5WNsKZZW2/TOzCehtBDVx4MZieTs6GsdtpBBttMA==" "resolved" "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.7.tgz" "version" "0.67.7" @@ -1814,7 +1822,16 @@ dependencies: "@types/react" "^17" -"@types/react@*", "@types/react@^17": +"@types/react@*", "@types/react@^18.0.10": + "integrity" "sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==" + "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz" + "version" "18.0.10" + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + "csstype" "^3.0.2" + +"@types/react@^17": "integrity" "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==" "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz" "version" "17.0.45" @@ -3745,6 +3762,11 @@ "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" "version" "1.0.0" +"fsevents@^2.1.2", "fsevents@^2.3.2": + "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==" + "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" + "version" "2.3.2" + "function-bind@^1.1.1": "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"