From dbc1e2229a2e43d6b6ae613f3431bc848b06da7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=B3=91=EC=B0=AC?= <70642609+byungchanKo99@users.noreply.github.com> Date: Mon, 18 Nov 2024 19:42:53 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[SZ-519]feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/index.jsx | 5 ++- components/categoryView/Category.tsx | 44 -------------------- components/categoryView/CategoryButton.jsx | 15 ++++--- components/categoryView/CategoryMainItem.jsx | 12 +++--- 4 files changed, 18 insertions(+), 58 deletions(-) delete mode 100644 components/categoryView/Category.tsx diff --git a/app/(tabs)/index.jsx b/app/(tabs)/index.jsx index 1faa44a..71e301b 100644 --- a/app/(tabs)/index.jsx +++ b/app/(tabs)/index.jsx @@ -11,11 +11,11 @@ import useTodoStore from '@/contexts/TodoStore'; import useCategoriesQuery from '@/hooks/api/useCategoriesQuery'; import useTodosQuery from '@/hooks/api/useTodoQuery'; import { handleLogEvent, TODAYVIEW_VIEW_EVENT } from '@/utils/logEvent'; -import { widthPercentage } from '@/utils/responsiveSize'; import { default as React, Suspense, useContext } from 'react'; import { useTranslation } from 'react-i18next'; import { SafeAreaView, StyleSheet, View } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; +import { scale, verticalScale } from 'react-native-size-matters'; const TodayView = () => { const { i18n } = useTranslation(); @@ -75,7 +75,8 @@ const styles = StyleSheet.create({ backgroundColor: 'white', }, bottomContainer: { - paddingHorizontal: widthPercentage(20), + paddingHorizontal: scale(20), + paddingTop: verticalScale(20), }, suspenseBox: { flex: 1, diff --git a/components/categoryView/Category.tsx b/components/categoryView/Category.tsx deleted file mode 100644 index a66dad6..0000000 --- a/components/categoryView/Category.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// import colors from '@/theme/theme.json'; -// import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; -// import { Icon } from '@ui-kitten/components'; -// import React from 'react'; -// import { Pressable, StyleSheet, View } from 'react-native'; -// import DailyTodos from '../todayView/dailyTodos/DailyTodos'; -// import CategoryButton from './CategoryButton'; - -// interface CategoryProps { -// categoryId: number; -// categoryName: string; -// } - -// const Category: React.FC = ({ categoryId, categoryName }) => { -// return ( -// -// -// -// -// -// -// -// -// -// ); -// }; - -// const styles = StyleSheet.create({ -// headerContainer: { -// flexDirection: 'row', -// justifyContent: 'space-between', -// }, -// icon: { -// width: widthPercentage(16), -// height: heightPercentage(16), -// }, -// plusIconContainer: { -// backgroundColor: colors.Gray02, -// padding: widthPercentage(8), -// borderRadius: widthPercentage(4), -// }, -// }); - -// export default Category; diff --git a/components/categoryView/CategoryButton.jsx b/components/categoryView/CategoryButton.jsx index 5a43370..76d4694 100644 --- a/components/categoryView/CategoryButton.jsx +++ b/components/categoryView/CategoryButton.jsx @@ -1,6 +1,7 @@ import StarIcon from '@/components/icons/StarIcon'; import colors from '@/theme/theme.json'; import { StyleSheet, Text, View } from 'react-native'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; const CategoryButton = ({ title }) => { return ( @@ -13,10 +14,10 @@ const CategoryButton = ({ title }) => { const styles = StyleSheet.create({ buttonContainer: { - paddingTop: 8, - paddingLeft: 10, - paddingRight: 12, - paddingBottom: 8, + paddingTop: verticalScale(8), + paddingLeft: scale(10), + paddingRight: scale(12), + paddingBottom: verticalScale(8), backgroundColor: colors.Gray02, flexDirection: 'row', width: 'auto', @@ -26,11 +27,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, icon: { - marginRight: 4, + marginRight: scale(4), + width: scale(12), + height: verticalScale(12), }, text: { fontWeight: 'bold', - fontSize: 13, + fontSize: moderateScale(14), }, }); diff --git a/components/categoryView/CategoryMainItem.jsx b/components/categoryView/CategoryMainItem.jsx index 9182641..ecdd8c4 100644 --- a/components/categoryView/CategoryMainItem.jsx +++ b/components/categoryView/CategoryMainItem.jsx @@ -1,10 +1,10 @@ import { TextInputContext } from '@/contexts/textInputContext'; import colors from '@/theme/theme.json'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon } from '@ui-kitten/components'; import { useContext } from 'react'; import { Pressable, StyleSheet, View } from 'react-native'; import CategoryButton from './CategoryButton'; +import { scale, verticalScale } from 'react-native-size-matters'; const CategoryMainItem = ({ item }) => { const { setTextInputOpen, setActivatedCategoryId } = @@ -31,16 +31,16 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginBottom: widthPercentage(5), + marginBottom: verticalScale(5), }, iconContainer: { backgroundColor: colors.Gray02, - padding: widthPercentage(8), - borderRadius: widthPercentage(4), + padding: scale(8), + borderRadius: scale(4), }, icon: { - width: widthPercentage(16), - height: heightPercentage(16), + width: scale(16), + height: verticalScale(16), }, }); From 62f83a3a724b5e59d53943c7a63147eddee88e18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=B3=91=EC=B0=AC?= <70642609+byungchanKo99@users.noreply.github.com> Date: Mon, 18 Nov 2024 23:48:47 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[SZ-519]feat:=20=EB=A9=94=EC=9D=B8=ED=88=AC?= =?UTF-8?q?=EB=91=90=20=ED=99=94=EB=A9=B4=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WeeklyCalendar.jsx | 68 ++++--- .../common/molecules/EditableTextField.tsx | 24 ++- .../todayView/dailyTodos/DailyTodos.tsx | 22 ++- .../dailyTodo/subTodoInfo/SubTodoInfo.tsx | 17 +- .../dailyTodo/subTodoList/DailySubTodo.jsx | 174 +++++++----------- .../dailyTodo/subTodoList/SubTodoList.tsx | 14 +- .../subTodoMoreMenu/SubTodoMoreMenu.tsx | 2 +- .../dailyTodo/todoListItem/TodoListItem.tsx | 95 ++-------- 8 files changed, 162 insertions(+), 254 deletions(-) diff --git a/components/WeeklyCalendar.jsx b/components/WeeklyCalendar.jsx index e4ac851..bdc386a 100644 --- a/components/WeeklyCalendar.jsx +++ b/components/WeeklyCalendar.jsx @@ -18,7 +18,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { TouchableOpacity } from 'react-native'; import fontStyles from '../theme/fontStyles'; -import { widthPercentage, heightPercentage } from '../utils/responsiveSize'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; const WeeklyCalendar = () => { const { selectedDate, setSelectedDate } = useContext(DateContext); @@ -222,81 +222,79 @@ const WeeklyCalendar = () => { const styles = StyleSheet.create({ background: { display: 'flex', - paddingVertical: 16, - gap: 20, - height: heightPercentage(140), - width: widthPercentage(360), + paddingVertical: verticalScale(16), + gap: scale(20), + height: verticalScale(140), + width: '100%', alignItems: 'center', }, week: { flexDirection: 'row', alignItems: 'center', - paddingHorizontal: 20, - height: heightPercentage(26), - width: widthPercentage(360), + paddingHorizontal: scale(20), + height: verticalScale(26), + width: '100%', backgroundColor: 'transparent', justifyContent: 'space-between', }, arrowMonth: { - gap: 16, - height: heightPercentage(26), - width: widthPercentage(109), + gap: scale(16), + height: verticalScale(26), + width: scale(109), flexDirection: 'row', alignItems: 'center', }, arrowBox: { flexDirection: 'row', gap: 12, - width: widthPercentage(60), - height: heightPercentage(24), + width: scale(60), + height: verticalScale(24), alignItems: 'center', }, arrow: { - width: widthPercentage(24), - height: heightPercentage(24), + width: scale(24), + height: verticalScale(24), }, calendarType: { - height: heightPercentage(26), - width: widthPercentage(33), + height: verticalScale(26), + width: scale(33), alignItems: 'center', justifyContent: 'center', borderRadius: 8, }, calendarBox: { - height: heightPercentage(68), + height: verticalScale(68), flexDirection: 'row', - gap: 6, + gap: scale(6), justifyContent: 'space-between', - width: widthPercentage(320), + width: '100%', + paddingHorizontal: scale(20), }, dayBox: { - height: heightPercentage(52), - width: widthPercentage(36), + height: verticalScale(52), + width: scale(36), alignItems: 'center', justifyContent: 'center', - padding: 6, - gap: 4, + padding: moderateScale(6), + gap: moderateScale(4), flexDirection: 'column', }, touchBox: { alignItems: 'center', - width: widthPercentage(36), - height: heightPercentage(52), + width: scale(36), + height: verticalScale(52), justifyContent: 'center', alignContent: 'center', - padding: 6, - borderRadius: 8, - gap: 4, + padding: scale(6), + borderRadius: scale(8), + gap: scale(4), }, todoCountBox: { - width: widthPercentage(24), - height: heightPercentage(24), - borderRadius: 6, + width: scale(24), + height: verticalScale(24), + borderRadius: scale(6), justifyContent: 'center', alignItems: 'center', - gap: 10, - paddingVertical: 8, - paddingHorizontal: 4, }, }); diff --git a/components/common/molecules/EditableTextField.tsx b/components/common/molecules/EditableTextField.tsx index fd78714..3d6aa46 100644 --- a/components/common/molecules/EditableTextField.tsx +++ b/components/common/molecules/EditableTextField.tsx @@ -1,22 +1,23 @@ import { Text } from '@ui-kitten/components'; import React, { useState } from 'react'; -import { StyleProp, TextInput, TextStyle } from 'react-native'; +import { StyleProp, StyleSheet, TextInput, TextStyle } from 'react-native'; import { Todo } from '../../../types/todo'; +import { moderateScale, scale } from 'react-native-size-matters'; interface EditableListItemTitleProps { isEditing: boolean; handleSubmitEditing: (content) => void; item: Todo; - inputStyles: StyleProp | null; - textStyles: StyleProp | null; + inputStyles?: StyleProp | null; + textStyles?: StyleProp | null; } const EditableTextField = ({ isEditing, handleSubmitEditing, item, - inputStyles = null, - textStyles = null, + inputStyles = styles.input, + textStyles = styles.text, }: EditableListItemTitleProps) => { const [content, setContent] = useState(item.content); return isEditing ? ( @@ -33,3 +34,16 @@ const EditableTextField = ({ }; export default EditableTextField; + +const styles = StyleSheet.create({ + text: { + paddingLeft: scale(8), + fontSize: moderateScale(14), + }, + input: { + justifyContent: 'center', + alignItems: 'center', + paddingLeft: scale(8), + fontSize: moderateScale(14), + }, +}); diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index aab8e0c..eb3da85 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -17,7 +17,6 @@ import { TODAYVIEW_SCROLL_EVENT, TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, } from '@/utils/logEvent'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon } from '@ui-kitten/components'; import React, { Fragment, useContext } from 'react'; import { useTranslation } from 'react-i18next'; @@ -31,6 +30,7 @@ import DraggableFlatList from 'react-native-draggable-flatlist'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; import DailyTodo from './dailyTodo/DailyTodo'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; interface DailyTodosProps { todosData: number; @@ -57,6 +57,7 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext); const handleDragEnd = useHandleDrag(); + const { setTextInputOpen } = useContext(TextInputContext); const handleInputSubmit = () => { handleLogEvent(TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, { @@ -64,6 +65,7 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { userId: userId, }); handleSubmit(); + setTextInputOpen(false); }; const renderTodo = ({ item, drag, isActive }) => { @@ -105,6 +107,7 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { onChangeText={setInput} onSubmitEditing={handleInputSubmit} style={styles.textInput} + autoFocus={true} /> @@ -121,20 +124,27 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, checkIcon: { - width: widthPercentage(20), - height: heightPercentage(20), + width: scale(24), + height: verticalScale(24), }, inputContainer: { flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + paddingLeft: scale(7), }, textInput: { backgroundColor: colors.Gray02, flex: 1, - borderRadius: widthPercentage(4), - marginLeft: widthPercentage(2), - paddingHorizontal: widthPercentage(4), + borderRadius: moderateScale(4), + marginLeft: scale(4), + paddingHorizontal: scale(8), + height: scale(24), + fontSize: moderateScale(14), }, keyboardInputContainer: { + borderTopWidth: 0, + justifyContent: 'center', backgroundColor: 'white', }, }); diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoInfo/SubTodoInfo.tsx b/components/todayView/dailyTodos/dailyTodo/subTodoInfo/SubTodoInfo.tsx index e11bbca..c3c3e62 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoInfo/SubTodoInfo.tsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoInfo/SubTodoInfo.tsx @@ -1,9 +1,9 @@ import LongLineIcon from '@/components/icons/LongLineIcon'; import i18n from '@/locales'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon } from '@ui-kitten/components'; import React from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; interface SubTodoInfoProps { itemNumber: number; @@ -52,24 +52,25 @@ const styles = StyleSheet.create({ bottomContainer: { flexDirection: 'row', justifyContent: 'space-between', - marginTop: heightPercentage(4), + marginTop: verticalScale(4), }, leftContainer: { flexDirection: 'row', }, leftIcon: { - height: heightPercentage(20), - width: widthPercentage(20), - marginRight: widthPercentage(4), + height: verticalScale(24), + width: scale(24), + marginRight: scale(4), }, rightIcon: { - height: heightPercentage(20), - width: widthPercentage(20), + height: verticalScale(24), + width: scale(24), }, text: { - marginLeft: widthPercentage(4), + marginLeft: scale(4), marginBottom: 'auto', marginTop: 'auto', + fontSize: moderateScale(13), }, }); diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx index 10bbab8..40f250d 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx @@ -6,20 +6,26 @@ import { DAILYTODO_SUBTODOCOMPLETE_CLICK_EVENT, handleLogEvent, } from '@/utils/logEvent'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; -import { Icon, Text, useTheme } from '@ui-kitten/components'; +import { Icon } from '@ui-kitten/components'; import { useContext, useState } from 'react'; -import { Pressable, StyleSheet, TextInput, View } from 'react-native'; +import { Pressable, StyleSheet } from 'react-native'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; +import SubTodoMoreMenu from './subTodoMoreMenu/SubTodoMoreMenu'; +import EditableTextField from '@/components/common/molecules/EditableTextField'; +import { ListItem } from '@ui-kitten/components'; const DailySubTodo = ({ item }) => { const [completed, setCompleted] = useState(item.isCompleted); const [isEditing, setIsEditing] = useState(false); - const [content, setContent] = useState(item.content); - const theme = useTheme(); const { mutate: updateSubTodo } = useSubTodoUpdateMutation(); const { userId } = useContext(LoginContext); const { setTextInputOpen } = useContext(TextInputContext); + const handleEdit = () => { + setIsEditing(true); + setTextInputOpen(false); + }; + const handleCheck = () => { setCompleted(!completed); const updatedData = { @@ -29,25 +35,29 @@ const DailySubTodo = ({ item }) => { updateSubTodo(updatedData); }; - const handleSubTodoUpdate = () => { + const handleSubTodoUpdate = content => { const updatedData = { subtodoId: item.id, content: content, }; updateSubTodo(updatedData); + setIsEditing(false); + }; + + const handleCheckIconPress = () => { + handleLogEvent(DAILYTODO_SUBTODOCOMPLETE_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + subtodoId: item.id, + }); + handleCheck(); }; - const checkIcon = props => { + const accessoryLeft = props => { return ( { - handleLogEvent(DAILYTODO_SUBTODOCOMPLETE_CLICK_EVENT, { - time: new Date().toISOString(), - userId: userId, - subtodoId: item.id, - }); - handleCheck(); - }} + onPress={() => handleCheckIconPress()} + style={styles.touchableCheck} > { ); }; - // const settingIcon = () => { - // return ( - // // <<<<<<< HEAD - // // setModalVisible(true)}> - // // - // // - // // ======= - // { - // setIsEditing(true); - // }} - // /> - // // >>>>>>> 70a1703a79f232558c00f81dad0f789f863ae1c5 - // ); - // }; + const accessoryRight = () => { + return ; + }; + + const title = () => ( + <> + + {/* {item.dueTime && ( + + {item.dueTime.split(':').slice(0, 2).join(':')} + + )} */} + + ); return ( <> - - - {checkIcon()} - {isEditing ? ( - setContent(value)} - onSubmitEditing={() => { - handleSubTodoUpdate(); - setIsEditing(false); - setTextInputOpen(true); - }} - autoFocus={true} - /> - ) : ( - // <<<<<<< HEAD - // setModalVisible(true)} - // > - // {item.content} - // - // )} - // - // {settingIcon()} - // - // - {item.content} - {item.dueTime && ( - - {item.dueTime} - - )} - - )} - - + ); }; const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - marginLeft: widthPercentage(20), - marginVertical: heightPercentage(4), - justifyContent: 'space-between', - }, - leftContainer: { - flexDirection: 'row', - flex: 1, - }, - textContainer: { - justifyContent: 'flex-start', - flex: 1, - }, - text: { - marginTop: 'auto', - marginBottom: 'auto', - paddingLeft: widthPercentage(4), - textAlign: 'left', - }, checkIcon: { marginTop: 'auto', marginBottom: 'auto', - width: widthPercentage(20), - height: heightPercentage(20), + width: scale(24), + height: verticalScale(24), }, - settingIcon: { - marginTop: 'auto', - marginBottom: 'auto', - width: widthPercentage(20), - height: heightPercentage(20), + text: { + paddingLeft: scale(8), + fontSize: moderateScale(13), + }, + input: { + justifyContent: 'center', + alignItems: 'center', + paddingLeft: scale(8), + fontSize: moderateScale(13), }, }); diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/SubTodoList.tsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/SubTodoList.tsx index 676f7ee..22962d0 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/SubTodoList.tsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/SubTodoList.tsx @@ -1,5 +1,4 @@ import colors from '@/theme/theme.json'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon, List } from '@ui-kitten/components'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,6 +6,7 @@ import { StyleSheet, TextInput, View } from 'react-native'; import { Todo } from '../../../../../types/todo'; import DailySubTodo from './DailySubTodo'; import useSubTodoList from './useSubTodoList'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; interface SubTodoListProps { item: Todo; @@ -64,18 +64,18 @@ const styles = StyleSheet.create({ backgroundColor: 'white', }, inputContainer: { - marginLeft: widthPercentage(20), + marginLeft: scale(28), flexDirection: 'row', }, icon: { - width: widthPercentage(20), - height: heightPercentage(20), - marginRight: widthPercentage(4), + width: scale(24), + height: verticalScale(24), + marginRight: scale(4), }, textInput: { backgroundColor: colors.Gray02, - borderRadius: widthPercentage(4), - paddingLeft: widthPercentage(4), + borderRadius: moderateScale(4), + paddingLeft: scale(8), textAlign: 'left', flex: 1, }, diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx index ef4c228..af3930f 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx @@ -89,7 +89,7 @@ const styles = StyleSheet.create({ container: { borderRadius: 8, padding: 16, - width: scale(172), + width: scale(100), }, topMenuItem: { paddingBottom: moderateScale(6), diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx index be3c597..02fcb2c 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx @@ -1,5 +1,4 @@ import getIconFillColor from '@/utils/getIconFillColor'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon, ListItem, Text } from '@ui-kitten/components'; import React from 'react'; import { Pressable, StyleSheet } from 'react-native'; @@ -8,6 +7,7 @@ import { Todo } from '../../../../../types/todo'; import EditableTextField from '../../../../common/molecules/EditableTextField'; import TodoMoreMenu from './todoMoreMenu/TodoMoreMenu'; import useTodoListItem from './useTodoListItem'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; interface TodoListItemProps extends RenderItemParams { isEditing: boolean; @@ -64,29 +64,6 @@ const TodoListItem: React.FC = ({ const accessoryRight = () => { return ( - // <<<<<<< HEAD - // - // {item.children.length === 0 && !item.isCompleted && ( - // - // - // - // )} - // - // - // - // - // ======= = ({ }; const title = () => ( - // <<<<<<< HEAD - // - // ); - - // return ( - // - // - // {accessoryLeft()} - // - // {title} - // - // - // {accessoryRight()} - // - // ======= <> {item.dueTime && ( - + {item.dueTime.split(':').slice(0, 2).join(':')} )} @@ -150,56 +105,28 @@ const TodoListItem: React.FC = ({ title={title} /> - // >>>>>>> 70a1703a79f232558c00f81dad0f789f863ae1c5 ); }; const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingBottom: heightPercentage(8), - paddingTop: heightPercentage(8), - marginRight: 0, - paddingRight: 0, - }, - leftContainer: { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - flex: 1, - }, checkIcon: { - width: widthPercentage(20), - height: heightPercentage(20), + width: scale(24), + height: verticalScale(24), }, settingIcon: { - width: widthPercentage(20), - height: heightPercentage(20), - marginRight: widthPercentage(4), + width: scale(24), + height: verticalScale(24), }, touchableCheck: { paddingTop: 0, justifyContent: 'center', }, - text: { - paddingTop: 0, - paddingLeft: widthPercentage(4), - }, - input: { - paddingTop: 0, - }, rightIconContainer: { flexDirection: 'row', }, pressableContainer: { flex: 1, }, - icon: { - width: 24, - height: 24, - tintColor: '#000', - }, }); export default TodoListItem; From 8cfb87c474d928e94de259fc83581f0f2e262f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=B3=91=EC=B0=AC?= <70642609+byungchanKo99@users.noreply.github.com> Date: Tue, 19 Nov 2024 00:03:11 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[SZ-519]feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94?= =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EB=82=A8=EC=9D=80=20=ED=88=AC=EB=91=90=20=EC=88=98=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WeeklyCalendar.jsx | 8 ++++---- utils/dateUtils.js | 18 +++--------------- 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/components/WeeklyCalendar.jsx b/components/WeeklyCalendar.jsx index bdc386a..da98a56 100644 --- a/components/WeeklyCalendar.jsx +++ b/components/WeeklyCalendar.jsx @@ -1,6 +1,5 @@ import { DateContext } from '@/contexts/DateContext'; import { LoginContext } from '@/contexts/LoginContext'; -import useTodoStore from '@/contexts/TodoStore'; import '@/locales/index'; import { convertGmtToKst } from '@/utils/convertTimezone'; import { isTodoIncludedInTodayView } from '@/utils/dateUtils'; @@ -19,13 +18,15 @@ import { useTranslation } from 'react-i18next'; import { TouchableOpacity } from 'react-native'; import fontStyles from '../theme/fontStyles'; import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; +import useTodosQuery from '@/hooks/api/useTodoQuery'; const WeeklyCalendar = () => { const { selectedDate, setSelectedDate } = useContext(DateContext); const [currentDate, setcurrentDate] = useState(moment()); const theme = useTheme(); const { userId } = useContext(LoginContext); - const todos = useTodoStore(state => state.todos); + const todos = useTodosQuery().data; + // const [todos, setTodos] = useState(fedchedTodos.data); const getWeekDates = date => { const start = date.clone().startOf('ISOWeek'); const r = Array.from({ length: 7 }, (_, i) => @@ -192,8 +193,7 @@ const WeeklyCalendar = () => { todos.filter( todo => isTodoIncludedInTodayView( - todo.startDate, - todo.endDate, + todo.date, date.format('YYYY-MM-DD'), ) && !todo.isCompleted, ).length diff --git a/utils/dateUtils.js b/utils/dateUtils.js index cb35f86..59dae43 100644 --- a/utils/dateUtils.js +++ b/utils/dateUtils.js @@ -1,18 +1,6 @@ -export const isTodoIncludedInTodayView = (startDate, endDate, currentDate) => { - if (startDate && endDate) { - if (currentDate >= startDate && currentDate <= endDate) { - return true; - } else { - return false; - } - } else if (startDate) { - if (currentDate >= startDate) { - return true; - } else { - return false; - } - } else if (endDate) { - if (currentDate <= endDate) { +export const isTodoIncludedInTodayView = (date, currentDate) => { + if (date) { + if (currentDate === date) { return true; } else { return false; From 1b855f9a2382dda2ac78c3fc100934fed60c78ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=B3=91=EC=B0=AC?= <70642609+byungchanKo99@users.noreply.github.com> Date: Tue, 19 Nov 2024 01:52:43 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[SZ-519]=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todayView/dailyTodos/DailyTodos.tsx | 77 +++++++++---------- .../CalendarBottomSheet.tsx | 73 +++++++++++++++++- .../dailyTodo/todoListItem/useTodoListItem.ts | 2 +- contexts/CalendarBottomSheetProvider.js | 2 +- 4 files changed, 106 insertions(+), 48 deletions(-) diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index eb3da85..057d332 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -1,5 +1,3 @@ -import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider'; -import { CategoryContext } from '@/contexts/CategoryContext'; import { DateContext } from '@/contexts/DateContext'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; @@ -39,9 +37,6 @@ interface DailyTodosProps { const DailyTodos: React.FC = ({ todosData, categoryId }) => { const { userId } = useContext(LoginContext); - const { setSelectedCategory } = useContext(CategoryContext); - setSelectedCategory(categoryId); - setSelectedCategory(categoryId); const { selectedDate } = useContext(DateContext); // const { data: todosData } = useTodosQuery(userId); const { t } = useTranslation(); @@ -75,44 +70,42 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { return ( - - + item.id.toString()} + onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} + scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} + /> + + {isTextInputOpen && categoryId === activatedCategoryId ? ( + - item.id.toString()} - onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} - scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} - /> - - {isTextInputOpen && categoryId === activatedCategoryId ? ( - - - - - - - ) : null} - + + + + + + ) : null} ); diff --git a/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx b/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx index 242312a..781387a 100644 --- a/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx +++ b/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx @@ -1,13 +1,20 @@ import { View, Text } from 'react-native'; -import React, { useContext } from 'react'; +import React, { useContext, useMemo } from 'react'; import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; import { DateContext } from '@/contexts/DateContext'; import { CalendarBottomSheetContext } from '@/contexts/CalendarBottomSheetProvider'; -import { Button, Calendar } from '@ui-kitten/components'; +import { + Button, + Calendar, + I18nConfig, + NativeDateService, +} from '@ui-kitten/components'; import { convertGmtToKst } from '@/utils/convertTimezone'; import { useTodoUpdateMutation } from '@/hooks/api/useTodoMutations'; import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations'; import { t } from 'i18next'; +import { useTranslation } from 'react-i18next'; +import { scale, verticalScale } from 'react-native-size-matters'; const CalendarBottomSheet = ({ isTodo, item }) => { const { selectedDate } = useContext(DateContext); @@ -15,6 +22,8 @@ const CalendarBottomSheet = ({ isTodo, item }) => { const { bottomSheetRef } = useContext(CalendarBottomSheetContext); const { mutate: updateTodoDate } = useTodoUpdateMutation(); const { mutate: updateSubTodoDate } = useSubTodoUpdateMutation(); + const snapPoints = useMemo(() => ['70%'], []); + const { i18n } = useTranslation(); const handleDateUpdate = date => { const kstDate = convertGmtToKst(date).toISOString().split('T')[0]; @@ -33,11 +42,61 @@ const CalendarBottomSheet = ({ isTodo, item }) => { } }; + const i18nCalendar: I18nConfig = { + dayNames: { + short: ['일', '월', '화', '수', '목', '금', '토'], + long: [ + '일요일', + '월요일', + '화요일', + '수요일', + '목요일', + '금요일', + '토요일', + ], + }, + monthNames: { + short: [ + '1월', + '2월', + '3월', + '4월', + '5월', + '6월', + '7월', + '8월', + '9월', + '10월', + '11월', + '12월', + ], + long: [ + '1월', + '2월', + '3월', + '4월', + '5월', + '6월', + '7월', + '8월', + '9월', + '10월', + '11월', + '12월', + ], + }, + }; + + const localeDateService = new NativeDateService('ko', { + i18n: i18nCalendar, + startDayOfWeek: 1, + }); + return ( { }} > { setCalendarDate(nextDate); }} - style={{ width: '100%' }} + style={{ + width: '100%', + borderWidth: 0, + paddingBottom: verticalScale(32), + }} />