diff --git a/package-lock.json b/package-lock.json index 5661966..f28a8b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@react-navigation/stack": "^6.3.16", + "@rneui/themed": "^4.0.0-rc.7", "@types/react": "~18.0.27", "date-fns": "^2.30.0", "expo": "~48.0.18", @@ -27,6 +28,7 @@ "react-native-navigation": "^7.33.4", "react-native-reanimated": "^2.14.4", "react-native-svg": "^13.9.0", + "react-native-switch-selector": "^2.3.0", "react-native-web": "~0.18.10", "typescript": "^4.9.4" }, @@ -5257,6 +5259,59 @@ "react-native-screens": ">= 3.0.0" } }, + "node_modules/@rneui/base": { + "version": "4.0.0-rc.7", + "resolved": "https://registry.npmjs.org/@rneui/base/-/base-4.0.0-rc.7.tgz", + "integrity": "sha512-dffzoYek3Qp+7wJzC42QjI/Fu1HOUNxFIR88t1laDrBV5QZQB55f+Vu5zLbC80/bh1b8fYtl63HTIWpORuA3Eg==", + "peer": true, + "dependencies": { + "@types/react-native-vector-icons": "^6.4.10", + "color": "^3.2.1", + "deepmerge": "^4.2.2", + "hoist-non-react-statics": "^3.3.2", + "react-native-ratings": "^8.1.0", + "react-native-size-matters": "^0.4.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/react-native-elements" + }, + "peerDependencies": { + "react-native-safe-area-context": "^3.1.9 || ^4.0.0", + "react-native-vector-icons": ">7.0.0" + } + }, + "node_modules/@rneui/base/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "peer": true, + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/@rneui/base/node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@rneui/themed": { + "version": "4.0.0-rc.7", + "resolved": "https://registry.npmjs.org/@rneui/themed/-/themed-4.0.0-rc.7.tgz", + "integrity": "sha512-nRF95gFTv/8JEx01L8q9p9VWKE5M/luPWPKYsWHKUQ5PHqwveQId/V5+ba9yiXsYIl9VbJJ1nLlqfHVP00u/3Q==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/react-native-elements" + }, + "peerDependencies": { + "@rneui/base": "4.0.0-rc.7" + } + }, "node_modules/@segment/loosely-validate-event": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", @@ -5499,6 +5554,25 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-native": { + "version": "0.70.14", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.14.tgz", + "integrity": "sha512-Kwc+BYBrnDqvacNxKp1UtcZJnJJnTih2NYmi/ieAKlHdxEPN6sYMwmIwgHdoLHggvml6bf3DYRaH2jt+gzaLjw==", + "peer": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-native-vector-icons": { + "version": "6.4.13", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz", + "integrity": "sha512-1PqFoKuXTSzMHwGMAr+REdYJBQAbe9xrww3ecZR0FsHcD1K+vGS/rxuAriL4rsI6+p69sZQjDzpEVAbDQcjSwA==", + "peer": true, + "dependencies": { + "@types/react": "*", + "@types/react-native": "^0.70" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -15932,6 +16006,19 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" }, + "node_modules/react-native-ratings": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.1.0.tgz", + "integrity": "sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==", + "peer": true, + "dependencies": { + "lodash": "^4.17.15" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-reanimated": { "version": "2.14.4", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz", @@ -15975,6 +16062,15 @@ "react-native": "*" } }, + "node_modules/react-native-size-matters": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.0.tgz", + "integrity": "sha512-8/C0htHrFWeUm9N8JegmadovUfgTWkGBkDPZ1N3YkXtDWb+98Ya2gThiKcu445r8c7YhcrBfnHz/mYsXIusaOQ==", + "peer": true, + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-svg": { "version": "13.9.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.9.0.tgz", @@ -16059,6 +16155,87 @@ "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz", "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==" }, + "node_modules/react-native-switch-selector": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-native-switch-selector/-/react-native-switch-selector-2.3.0.tgz", + "integrity": "sha512-BnhbC7vRu5HIanANszNS5rbrXqYwDggJGg/Xik2NXDA1FSzId/WrxU5hicmmZzTrQSh9N5TS76YsnG1swNzBpA==", + "dependencies": { + "prop-types": "^15.7.2" + } + }, + "node_modules/react-native-vector-icons": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz", + "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==", + "peer": true, + "dependencies": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa5-upgrade": "bin/fa5-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "peer": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "peer": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "peer": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "peer": true, + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "peer": true, + "engines": { + "node": ">=10" + } + }, "node_modules/react-native-web": { "version": "0.18.12", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz", diff --git a/package.json b/package.json index 3cde670..5223309 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@react-navigation/stack": "^6.3.16", + "@rneui/themed": "^4.0.0-rc.7", "@types/react": "~18.0.27", "date-fns": "^2.30.0", "expo": "~48.0.18", @@ -28,6 +29,7 @@ "react-native-navigation": "^7.33.4", "react-native-reanimated": "^2.14.4", "react-native-svg": "^13.9.0", + "react-native-switch-selector": "^2.3.0", "react-native-web": "~0.18.10", "typescript": "^4.9.4" }, diff --git a/src/App.js b/src/App.js index 22873d6..ae7b68e 100644 --- a/src/App.js +++ b/src/App.js @@ -27,4 +27,4 @@ const styles = StyleSheet.create({ // justifyContent: 'center', width: '100%', }, -}); +}); \ No newline at end of file diff --git a/src/components/CheckBox2.js b/src/components/CheckBox2.js new file mode 100644 index 0000000..a577ad1 --- /dev/null +++ b/src/components/CheckBox2.js @@ -0,0 +1,37 @@ +import { Pressable, StyleSheet, Text, View } from "react-native"; +import React from "react"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; + +const CheckBox2 = (props) => { + const iconName = props.isChecked ? + "checkbox-marked" : "checkbox-blank-outline"; + + return ( + + + + + + ); +}; + +export default CheckBox2; + +const styles = StyleSheet.create({ + container: { + // justifyContent: "flex-start", + // alignItems: "center", + flexDirection: "row", + width: 20, + marginTop: 28, + marginHorizontal: 5, + }, + title: { + fontSize: 18, + color: "#000", + marginLeft: 5, + fontWeight: "500", + + }, +}); \ No newline at end of file diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 652de27..235c8b3 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -25,7 +25,7 @@ const styles = StyleSheet.create({ // alignItems: "center", flexDirection: "row", width: 250, - marginTop: 20, + marginTop: 30, marginHorizontal: 5, }, title: { diff --git a/src/components/input2.js b/src/components/input2.js index ae3b61d..77f810b 100644 --- a/src/components/input2.js +++ b/src/components/input2.js @@ -40,26 +40,31 @@ Input2.displayName = "Input2"; const defaultStyles = StyleSheet.create({ container: { width: "50%", - marginRight: 10, - // justifyContent: 'center' + // marginRight: 100, + marginRight: 20, + justifyContent: 'flex-start', + marginLeft: 3, + }, title: { - marginBottom: 4, - fontWeight: "100", + marginBottom: 17, + fontWeight: "700", + fontSize: 16, + width:'150%', + }, input: { // flexDirection: "row", - borderBottomWidth: 2, - borderRadius: 1, - height: 15, + // borderRadius: 1, + // height: 15, // justifyContent: 'center' // paddingHorizontal: 10, }, icon: { - paddingHorizontal:100, + paddingHorizontal:300, // position: "absolute", // left: 8, // height: "100%", diff --git a/src/screens/Calendar/BottomSheet.js b/src/screens/Calendar/BottomSheet.js index dea12c5..e8ac382 100644 --- a/src/screens/Calendar/BottomSheet.js +++ b/src/screens/Calendar/BottomSheet.js @@ -15,11 +15,9 @@ import Button2 from '../../components/Button2'; import { BLACK, GRAY, PRIMARY, WHITE, GHOSTWHITE, LIGHTGRAY, ALICEBLUE } from '../../colors'; import Calendar from 'react-calendar'; import ToDo from './ToDo'; -import Logo from '../../components/Logo'; import { AuthRoutes } from '../../navigations/routes'; import { useNavigation } from '@react-navigation/native'; - - +import Logo from '../../components/Logo'; @@ -207,6 +205,8 @@ const BottomSheet = (props) => { title="📅날짜 바꾸기" // onPress={pressButton} > + + {/* */} diff --git a/src/screens/Calendar/CalendarView.js b/src/screens/Calendar/CalendarView.js index e77c996..80a07c2 100644 --- a/src/screens/Calendar/CalendarView.js +++ b/src/screens/Calendar/CalendarView.js @@ -1,101 +1,284 @@ -import React, { useContext, useState ,Pressable} from "react"; -import { format } from "date-fns"; -import { Calendar } from "react-native-calendars"; -import { StyleSheet,View, Text } from "react-native"; -import BouncyCheckbox from "react-native-bouncy-checkbox"; -import { useNavigation } from '@react-navigation/native'; -import { Navigation } from "react-calendar"; -// import Button from "../../components/button"; -import { AuthRoutes } from "../../navigations/routes"; -import Day from "react-native-calendars/src/calendar/day"; -import Logo from "../../components/Logo"; -import Gear from "../../components/Gear"; +// import React, { useContext, useState ,Pressable} from "react"; +// import { format } from "date-fns"; +// import { Calendar } from "react-native-calendars"; +// import { StyleSheet,View, Text } from "react-native"; +// import BouncyCheckbox from "react-native-bouncy-checkbox"; +// import { useNavigation } from '@react-navigation/native'; +// import { Navigation } from "react-calendar"; +// // import Button from "../../components/button"; +// import { AuthRoutes } from "../../navigations/routes"; +// import Day from "react-native-calendars/src/calendar/day"; +// import Logo from "../../components/Logo"; +// import Gear from "../../components/Gear"; +// import SwitchSelector from "react-native-switch-selector"; +// import { Colors } from "react-native/Libraries/NewAppScreen"; -function CalanderView() { +// function CalanderView() { - const [ modalVisible, setModalVisible ] = useState(false); - const pressButton = () => { - setModalVisible(true); - } +// const [ modalVisible, setModalVisible ] = useState(false); +// const pressButton = () => { +// setModalVisible(true); +// } + +// + + +// + +// const navigation = useNavigation(); + +// const posts = [ +// { +// date: "2023-06-19", +// }, +// { +// date: "2023-06-27", +// } +// ]; +// const markedDates = posts.reduce((acc, current) => { +// const formattedDate = format(new Date(current.date), 'yyyy-MM-dd'); +// aa +// acc[formattedDate] = {marked: true}; +// return acc; +// }, {}); + +// const [selectedDate, setSelectedDate] = useState( +// format(new Date(), "yyyy-MM-dd"), +// ); +// const markedSelectedDates = { +// ...markedDates, +// [selectedDate]: { +// selected: true, +// marked: markedDates[selectedDate]?.marked, + +// } + +// } + +// const options = [ +// { label: "할일", value: "todo", selectedBackgroundColor: "#0097e6",}, +// { label: "일기", value: "diary" }, + + +// ]; + + +// return ( +// + + + + +// +// + +// navigation.navigate(AuthRoutes.Setting)}> +// +// +// +// +// +// +// + +// +// }} +// onDayPress ={(day) => navigation.navigate(AuthRoutes.ToDo)} +// /> + +// +// +// +// +// + + +// console.log(`Call onPress with value: ${value}`)} +// /> + + + + + + +// + +// + +// + +// ); +// } + +// const styles2 = StyleSheet.create({ +// container: { +// flex: 1, +// justifyContent: 'center', +// alignItems: 'center' +// }, +// checkbox: { +// margin: 10 +// } +// }) + +// const styles = StyleSheet.create({ +// calendar: { +// borderBottomWidth: 1, +// borderBottomColor: '#e0e0e0', +// } +// }); + +// const styles3 = StyleSheet.create({ +// container: { +// flex: 1, +// justifyContent: 'center', +// alignItems: 'center', +// // height: 42, + +// }, +// title:{ +// fontFamily: 'Cochin', +// fontSize:50, +// fontWeight: 'bold', +// justifyContent: 'center', +// alignItems: 'center', + +// }, +// size: { +// fontSize:20, +// fontWeight: 'bold', + +// }, +// round:{ +// borderWidth: 6, +// borderColor: '#cdcdcd', +// borderRadius: 20 +// }, +// orange:{ +// color:'orange', +// }, +// blue:{ +// color: '#1090FF', +// }, +// cc: { +// alignItems: 'flex-end', +// }, +// a: { +// alignItems: 'center', + +// }, +// v:{ +// color: `#6495ed` , +// marginBottom: 20, +// } + +// }); - + +// export default CalanderView; + +import React, { useContext, useState } from 'react'; +import { format } from 'date-fns'; +import { Calendar } from 'react-native-calendars'; +import { StyleSheet, View, Text, Pressable } from 'react-native'; +import BouncyCheckbox from 'react-native-bouncy-checkbox'; +import { useNavigation } from '@react-navigation/native'; +import { Navigation } from 'react-calendar'; +// import Button from "../../components/button"; +import { AuthRoutes } from '../../navigations/routes'; +import Day from 'react-native-calendars/src/calendar/day'; +import Logo from '../../components/Logo'; +import Gear from '../../components/Gear'; + +function CalanderView() { + const [modalVisible, setModalVisible] = useState(false); + const pressButton = () => { + setModalVisible(true); + }; + + ; const navigation = useNavigation(); const posts = [ { - date: "2023-06-19", + date: '2023-06-19', + }, + { + date: '2023-06-27', }, - { - date: "2023-06-27", - } ]; const markedDates = posts.reduce((acc, current) => { const formattedDate = format(new Date(current.date), 'yyyy-MM-dd'); - aa - acc[formattedDate] = {marked: true}; + aa; + acc[formattedDate] = { marked: true }; return acc; }, {}); const [selectedDate, setSelectedDate] = useState( - format(new Date(), "yyyy-MM-dd"), + format(new Date(), 'yyyy-MM-dd') ); const markedSelectedDates = { ...markedDates, [selectedDate]: { selected: true, marked: markedDates[selectedDate]?.marked, - - } - - } - + }, + }; return ( - - - - + + + navigation.navigate(AuthRoutes.Setting)}> + + + - - - - {/* - - */} - - - - + + - navigation.navigate(AuthRoutes.ToDo)} + navigation.navigate(AuthRoutes.ToDo)} /> - - - - + - - - ); } @@ -103,62 +286,57 @@ const styles2 = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', }, checkbox: { - margin: 10 - } -}) + margin: 10, + }, +}); const styles = StyleSheet.create({ calendar: { borderBottomWidth: 1, borderBottomColor: '#e0e0e0', - } + }, }); const styles3 = StyleSheet.create({ container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - // height: 42, - + flex: 1, + justifyContent: 'center', + alignItems: 'center', + // height: 42, }, - title:{ - fontFamily: 'Cochin', - fontSize:50, - fontWeight: 'bold', - justifyContent: 'center', - alignItems: 'center', - + title: { + fontFamily: 'Cochin', + fontSize: 50, + fontWeight: 'bold', + justifyContent: 'center', + alignItems: 'center', }, size: { - fontSize:20, - fontWeight: 'bold', - + fontSize: 20, + fontWeight: 'bold', }, - round:{ - borderWidth: 6, - borderColor: '#cdcdcd', - borderRadius: 20 + round: { + borderWidth: 6, + borderColor: '#cdcdcd', + borderRadius: 20, }, - orange:{ - color:'orange', + orange: { + color: 'orange', }, - blue:{ - color: '#1090FF', + blue: { + color: '#1090FF', }, cc: { + marginRight: 15, + height: 60, alignItems: 'flex-end', }, a: { alignItems: 'center', - - } - + }, }); - - -export default CalanderView; +export default CalanderView; \ No newline at end of file diff --git a/src/screens/Calendar/ToDo.js b/src/screens/Calendar/ToDo.js index 8bdef19..68bd940 100644 --- a/src/screens/Calendar/ToDo.js +++ b/src/screens/Calendar/ToDo.js @@ -24,23 +24,26 @@ import { import React from 'react'; import BottomSheet from './BottomSheet'; import Button2 from '../../components/Button2'; + import CheckBox2 from '../../components/CheckBox2'; const ToDo = (props) => { - const [email, setEmail] = useState(''); + // const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [disabled, setDisabled] = useState(true); const navigation = useNavigation(); + const [todo, setTodo] = useState(''); useEffect(() => { - setDisabled(!(email.trim() && password.trim())); - }, [email, password]); + setDisabled(!(todo.trim() && password.trim())); + }, [todo, password]); + + const onSubmit = () => { Keyboard.dismiss(); - console.log(email, password); }; @@ -130,21 +133,26 @@ import { - + setBlank(!isBlank)} isChecked={isBlank} + /> + + setEmail(email.trim())} + value={todo} + onChangeText = {(todo) => setTodo(todo.trim())} /> + - +