diff --git a/android/gradlew b/android/gradlew old mode 100644 new mode 100755 diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 0d7cd67..2017450 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -355,6 +355,8 @@ PODS: - React-perflogger (= 0.68.2) - RNCMaskedView (0.1.11): - React + - RNDateTimePicker (6.1.3): + - React-Core - RNGestureHandler (2.4.2): - React-Core - RNReanimated (2.8.0): @@ -451,6 +453,7 @@ DEPENDENCIES: - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" + - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNReanimated (from `../node_modules/react-native-reanimated`) - RNScreens (from `../node_modules/react-native-screens`) @@ -540,6 +543,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" RNCMaskedView: :path: "../node_modules/@react-native-community/masked-view" + RNDateTimePicker: + :path: "../node_modules/@react-native-community/datetimepicker" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" RNReanimated: @@ -597,6 +602,7 @@ SPEC CHECKSUMS: React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23 ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2 RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489 + RNDateTimePicker: 04b805a3cb4d386e5e6aff54b47ace7bad706fda RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393 RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19 diff --git a/package-lock.json b/package-lock.json index cdba915..364229c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "bob_frontend", "version": "0.0.1", "dependencies": { + "@react-native-community/datetimepicker": "^6.1.3", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", @@ -22,11 +23,13 @@ "react-native-gesture-handler": "^2.4.2", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-nmap": "^0.0.66", + "react-native-modal-datetime-picker": "^13.1.2", "react-native-paper": "^4.12.1", "react-native-reanimated": "^2.8.0", "react-native-safe-area-context": "^4.2.5", "react-native-screens": "^3.13.1", - "react-native-vector-icons": "^9.1.0" + "react-native-vector-icons": "^9.1.0", + "recoil": "^0.7.3" }, "devDependencies": { "@babel/core": "^7.12.9", @@ -3439,6 +3442,14 @@ "which": "bin/which" } }, + "node_modules/@react-native-community/datetimepicker": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.1.3.tgz", + "integrity": "sha512-3e20BPQy8QiQeIGJL4zoJaRsGWB31hl9i7oTZECWxnK6nVUeqGt/G+JRJlJinmqL6z4WePHC6RSUMgpC64OOwg==", + "dependencies": { + "invariant": "^2.2.4" + } + }, "node_modules/@react-native-community/eslint-config": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz", @@ -7537,6 +7548,11 @@ "dev": true, "optional": true }, + "node_modules/hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -12540,6 +12556,18 @@ "react-native": "0.60.5" } }, + "node_modules/react-native-modal-datetime-picker": { + "version": "13.1.2", + "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-13.1.2.tgz", + "integrity": "sha512-PZDkuY7HayRX1KE2X2dm29CvCLzwj/vn6B6QdPbjZea/GEKvHBMOLGdhFCcA9+gD64Y41+VqfytUh2fdvUvQ1g==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@react-native-community/datetimepicker": ">=3.0.0", + "react-native": ">=0.65.0" + } + }, "node_modules/react-native-paper": { "version": "4.12.1", "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.12.1.tgz", @@ -12842,6 +12870,25 @@ "node": ">= 4" } }, + "node_modules/recoil": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.3.tgz", + "integrity": "sha512-WaPppk3Hz5/V9nOVmu1X/o3cJyf/rLXw/YsEENvMzEDk+LKqMiGfFgZ3Gg51TKWccpCZCyrSBXn2O4L1E2WDPQ==", + "dependencies": { + "hamt_plus": "1.0.2" + }, + "peerDependencies": { + "react": ">=16.13.1" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -17777,6 +17824,14 @@ "ora": "^3.4.0" } }, + "@react-native-community/datetimepicker": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.1.3.tgz", + "integrity": "sha512-3e20BPQy8QiQeIGJL4zoJaRsGWB31hl9i7oTZECWxnK6nVUeqGt/G+JRJlJinmqL6z4WePHC6RSUMgpC64OOwg==", + "requires": { + "invariant": "^2.2.4" + } + }, "@react-native-community/eslint-config": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz", @@ -20839,6 +20894,11 @@ "dev": true, "optional": true }, + "hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -24642,6 +24702,14 @@ "resolved": "https://registry.npmjs.org/react-native-nmap/-/react-native-nmap-0.0.66.tgz", "integrity": "sha512-+XMJOqn4zZ6PWO0UH478yj0b9PjYGHQcLUd0W5gJQ3DqGeJEb3vvWVDMbkzcuHsh59hkhGPsE9Q6pZkXxKsYtQ==" }, + "react-native-modal-datetime-picker": { + "version": "13.1.2", + "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-13.1.2.tgz", + "integrity": "sha512-PZDkuY7HayRX1KE2X2dm29CvCLzwj/vn6B6QdPbjZea/GEKvHBMOLGdhFCcA9+gD64Y41+VqfytUh2fdvUvQ1g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-native-paper": { "version": "4.12.1", "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.12.1.tgz", @@ -24863,6 +24931,14 @@ "tslib": "^2.0.1" } }, + "recoil": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.3.tgz", + "integrity": "sha512-WaPppk3Hz5/V9nOVmu1X/o3cJyf/rLXw/YsEENvMzEDk+LKqMiGfFgZ3Gg51TKWccpCZCyrSBXn2O4L1E2WDPQ==", + "requires": { + "hamt_plus": "1.0.2" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index e6b857c..6392888 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { + "@react-native-community/datetimepicker": "^6.1.3", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", @@ -24,11 +25,13 @@ "react-native-gesture-handler": "^2.4.2", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-nmap": "^0.0.66", + "react-native-modal-datetime-picker": "^13.1.2", "react-native-paper": "^4.12.1", "react-native-reanimated": "^2.8.0", "react-native-safe-area-context": "^4.2.5", "react-native-screens": "^3.13.1", - "react-native-vector-icons": "^9.1.0" + "react-native-vector-icons": "^9.1.0", + "recoil": "^0.7.3" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/components/CategoryItem.tsx b/src/components/CategoryItem.tsx new file mode 100644 index 0000000..0e9b1a2 --- /dev/null +++ b/src/components/CategoryItem.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import type {FC} from 'react'; +import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import {Colors} from 'react-native-paper'; + +export type CategoryItemProps = { + onPress: () => void; + title: string; + isSelected: boolean; +}; + +export const CategoryItem: FC = ({onPress, title, isSelected}) => { + return ( + + + {title} + + + ); +}; + +const styles = StyleSheet.create({ + categoryItems: { + width: 105, + height: 56, + borderWidth: 1, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 10, + }, + selected: {borderColor: '#6C69FF', backgroundColor: '#F6F6FE'}, + selectedText: {color: '#6C69FF'}, + categoryText: {fontSize: 16}, + notSelected: {borderColor: '#DFDFDF'}, +}); diff --git a/src/components/index.ts b/src/components/index.ts index a70929c..4877182 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,3 +4,4 @@ export * from './CircleBar'; export * from './RegisterNextButton'; export * from './RegisterHeader'; export * from './CheckBox'; +export * from './CategoryItem'; diff --git a/src/data/RegisterInterface.ts b/src/data/RegisterInterface.ts index 05c2bca..a056de3 100644 --- a/src/data/RegisterInterface.ts +++ b/src/data/RegisterInterface.ts @@ -16,5 +16,5 @@ export type RegisterInterface = { gender: gender; birthDate: Date | null; address: string; - category: number[]; + category: {}; }; diff --git a/src/screens/RegisterCategory.tsx b/src/screens/RegisterCategory.tsx index 31f9962..f43b025 100644 --- a/src/screens/RegisterCategory.tsx +++ b/src/screens/RegisterCategory.tsx @@ -1,9 +1,10 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'; import React, {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 Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import {RegisterHeader, RegisterNextButton} from '../components'; +import {RegisterHeader, RegisterNextButton, CategoryItem} from '../components'; import {RegisterInterface} from '../data'; import {AuthStackParamList} from '../nav'; @@ -11,13 +12,30 @@ type Props = NativeStackScreenProps; const RegisterCategory = ({navigation, route}: Props) => { const [registerData, setRegisterData] = useState(route.params.registerData); - const title = 'RegisterCategory'; + const [category, setCategory] = useState({ + 0: false, + 1: false, + 2: false, + 3: false, + 4: false, + 5: false, + 6: false, + 7: false, + 8: false, + 9: false, + 10: false, + 11: false, + }); const goNext = () => { navigation.reset({routes: [{name: 'MainNavigator'}]}); }; const goBack = () => { navigation.navigate('RegisterForm', {registerData}); }; + const getCategoryArray = () => { + return Object.keys(category).filter((key) => category[key as unknown as keyof typeof category]); + }; + return ( @@ -27,10 +45,112 @@ const RegisterCategory = ({navigation, route}: Props) => { 선호하는 음식 종류를 선택해주세요! 중복선택 가능해요! - - - - + + + { + setCategory({...category, 0: !category[0]}); + setRegisterData({...registerData, category: category}); + }} + title="한식" + isSelected={category[0]} + /> + { + setCategory({...category, 1: !category[1]}); + setRegisterData({...registerData, category: category}); + }} + title="일식" + isSelected={category[1]} + /> + { + setCategory({...category, 2: !category[2]}); + setRegisterData({...registerData, category: category}); + }} + title="중식" + isSelected={category[2]} + /> + + + { + setCategory({...category, 3: !category[3]}); + setRegisterData({...registerData, category: category}); + }} + title="양식" + isSelected={category[3]} + /> + { + setCategory({...category, 4: !category[4]}); + setRegisterData({...registerData, category: category}); + }} + title="치킨" + isSelected={category[4]} + /> + { + setCategory({...category, 5: !category[5]}); + setRegisterData({...registerData, category: category}); + }} + title="분식" + isSelected={category[5]} + /> + + + { + setCategory({...category, 6: !category[6]}); + setRegisterData({...registerData, category: category}); + }} + title="고기/구이" + isSelected={category[6]} + /> + { + setCategory({...category, 7: !category[7]}); + setRegisterData({...registerData, category: category}); + }} + title="도시락" + isSelected={category[7]} + /> + { + setCategory({...category, 8: !category[8]}); + setRegisterData({...registerData, category: category}); + }} + title="야식" + isSelected={category[8]} + /> + + + { + setCategory({...category, 9: !category[9]}); + setRegisterData({...registerData, category: category}); + }} + title="패스트 푸드" + isSelected={category[9]} + /> + { + setCategory({...category, 10: !category[10]}); + setRegisterData({...registerData, category: category}); + }} + title="디저트" + isSelected={category[10]} + /> + { + setCategory({...category, 11: !category[11]}); + setRegisterData({...registerData, category: category}); + }} + title="아시안푸드" + isSelected={category[11]} + /> + + @@ -52,6 +172,7 @@ const styles = StyleSheet.create({ }, categoryHead: { width: 205, + marginBottom: 56, }, categoryHeadText: { fontSize: 24, @@ -65,6 +186,11 @@ const styles = StyleSheet.create({ marginTop: 8, color: '#616161', }, + categoryRow: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 16, + }, }); export default RegisterCategory; diff --git a/src/screens/RegisterForm.tsx b/src/screens/RegisterForm.tsx index 6011a49..5a01a70 100644 --- a/src/screens/RegisterForm.tsx +++ b/src/screens/RegisterForm.tsx @@ -1,11 +1,12 @@ import React, {useEffect, useState} from 'react'; -import {View, StyleSheet, Text, TextInput} from 'react-native'; +import {View, StyleSheet, Text, TextInput, TouchableOpacity} 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'; +import DateTimePickerModal from 'react-native-modal-datetime-picker'; type Props = NativeStackScreenProps; @@ -15,6 +16,7 @@ const RegisterForm = ({navigation, route}: Props) => { const [gender, setGender] = useState(3); const [birthDate, setBirthDate] = useState(new Date()); const [address, setAddress] = useState(''); + const [dateModal, setDateModal] = useState(false); useEffect(() => { setRegisterData(route.params.registerData); @@ -26,6 +28,16 @@ const RegisterForm = ({navigation, route}: Props) => { const goBack = () => { navigation.navigate('Register', {registerData}); }; + const onChange = (event, selectedDate) => { + const currentDate = selectedDate; + setDateModal(false); + setBirthDate(currentDate); + }; + const handleConfirm = (date: Date) => { + console.warn('A date has been picked: ', date); + setBirthDate(date); + setDateModal(false); + }; return ( @@ -55,11 +67,18 @@ const RegisterForm = ({navigation, route}: Props) => { 생년월일 - setDateModal(true)}> + + 생년월일 입력 + + + + setDateModal(false)} /> diff --git a/yarn.lock b/yarn.lock index ae9c578..d086964 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1255,6 +1255,13 @@ "sudo-prompt" "^9.0.0" "wcwidth" "^1.0.1" +"@react-native-community/datetimepicker@^6.1.3", "@react-native-community/datetimepicker@>=3.0.0": + "integrity" "sha512-3e20BPQy8QiQeIGJL4zoJaRsGWB31hl9i7oTZECWxnK6nVUeqGt/G+JRJlJinmqL6z4WePHC6RSUMgpC64OOwg==" + "resolved" "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.1.3.tgz" + "version" "6.1.3" + dependencies: + "invariant" "^2.2.4" + "@react-native-community/eslint-config@^2.0.0": "integrity" "sha512-vHaMMfvMp9BWCQQ0lNIXibOJTcXIbYUQ8dSUsMOsrXgVkeVQJj88OwrKS00rQyqwMaC4/a6HuDiFzYUkGKOpVg==" "resolved" "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz" @@ -3597,6 +3604,11 @@ "resolved" "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz" "version" "1.3.0" +"hamt_plus@1.0.2": + "integrity" "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + "resolved" "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz" + "version" "1.0.2" + "has-bigints@^1.0.1", "has-bigints@^1.0.2": "integrity" "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==" "resolved" "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz" @@ -6023,6 +6035,12 @@ "integrity" "sha512-+XMJOqn4zZ6PWO0UH478yj0b9PjYGHQcLUd0W5gJQ3DqGeJEb3vvWVDMbkzcuHsh59hkhGPsE9Q6pZkXxKsYtQ==" "resolved" "https://registry.npmjs.org/react-native-nmap/-/react-native-nmap-0.0.66.tgz" "version" "0.0.66" +"react-native-modal-datetime-picker@^13.1.2": + "integrity" "sha512-PZDkuY7HayRX1KE2X2dm29CvCLzwj/vn6B6QdPbjZea/GEKvHBMOLGdhFCcA9+gD64Y41+VqfytUh2fdvUvQ1g==" + "resolved" "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-13.1.2.tgz" + "version" "13.1.2" + dependencies: + "prop-types" "^15.7.2" "react-native-paper@^4.12.1": "integrity" "sha512-xvAkwtRatsDcB/eSBUwoThBAT5Yy32SgKwrfHRUXi/9s5lR2SEuPZwmsZyAaq+bsxtAH1CaIT4CDeVLSaArzyg==" @@ -6067,7 +6085,8 @@ "prop-types" "^15.7.2" "yargs" "^16.1.1" -"react-native@0.68.2": + +"react-native@*", "react-native@>=0.42.0", "react-native@>=0.48.4", "react-native@>=0.57", "react-native@>=0.65.0", "react-native@0.68.2": "integrity" "sha512-qNMz+mdIirCEmlrhapAtAG+SWVx6MAiSfCbFNhfHqiqu1xw1OKXdzIrjaBEPihRC2pcORCoCHduHGQe/Pz9Yuw==" "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.68.2.tgz" "version" "0.68.2" @@ -6128,7 +6147,8 @@ "react-shallow-renderer" "^16.13.1" "scheduler" "^0.20.2" -"react@17.0.2": + +"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^17.0.0", "react@>=16.0", "react@>=16.13.1", "react@>=16.3.0", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2" @@ -6192,6 +6212,13 @@ "source-map" "~0.6.1" "tslib" "^2.0.1" +"recoil@^0.7.3": + "integrity" "sha512-WaPppk3Hz5/V9nOVmu1X/o3cJyf/rLXw/YsEENvMzEDk+LKqMiGfFgZ3Gg51TKWccpCZCyrSBXn2O4L1E2WDPQ==" + "resolved" "https://registry.npmjs.org/recoil/-/recoil-0.7.3.tgz" + "version" "0.7.3" + dependencies: + "hamt_plus" "1.0.2" + "regenerate-unicode-properties@^10.0.1": "integrity" "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==" "resolved" "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz"