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/app/funnelView/stepFourView.tsx b/app/funnelView/stepFourView.tsx index a489cc8..02c7070 100644 --- a/app/funnelView/stepFourView.tsx +++ b/app/funnelView/stepFourView.tsx @@ -286,6 +286,8 @@ const themedStyles = StyleService.create({ bottomSheetContainer: { flex: 1, backgroundColor: 'background-basic-color-1', + borderTopLeftRadius: scale(20), + borderTopRightRadius: scale(20), }, bottomSheetHeader: { flexDirection: 'row', diff --git a/components/WeeklyCalendar.jsx b/components/WeeklyCalendar.jsx index e4ac851..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'; @@ -18,14 +17,16 @@ 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'; +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 @@ -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/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), }, }); 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/common/molecules/IconButton.tsx b/components/common/molecules/IconButton.tsx index d278fec..b620e2f 100644 --- a/components/common/molecules/IconButton.tsx +++ b/components/common/molecules/IconButton.tsx @@ -1,6 +1,7 @@ import theme from '@/theme/theme.json'; import { Icon } from '@ui-kitten/components'; import { StyleSheet, TouchableOpacity, View } from 'react-native'; +import { scale, verticalScale } from 'react-native-size-matters'; // IconButton 컴포넌트 export const IconButton = ({ onPress, @@ -53,8 +54,8 @@ const styles = StyleSheet.create({ padding: 8, }, icon: { - width: 24, - height: 24, + width: scale(20), + height: verticalScale(20), tintColor: '#000', // 기본 아이콘 색상 }, }); diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index bf10571..84a82e7 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'; @@ -17,7 +15,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 +28,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 { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -40,8 +38,6 @@ interface DailyTodosProps { const DailyTodos: React.FC = ({ todosData, categoryId }) => { const { userId } = useContext(LoginContext); - const { setSelectedCategory } = useContext(CategoryContext); - setSelectedCategory(categoryId); const { selectedDate } = useContext(DateContext); // const { data: todosData } = useTodosQuery(userId); const { t } = useTranslation(); @@ -57,6 +53,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 +61,7 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { userId: userId, }); handleSubmit(); + setTextInputOpen(false); }; const renderTodo = ({ item, drag, isActive }) => { @@ -73,43 +71,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} ); @@ -121,20 +118,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/calendarBottomSheet/CalendarBottomSheet.tsx b/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx index 242312a..dd1c6ec 100644 --- a/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx +++ b/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx @@ -1,13 +1,23 @@ import { View, Text } from 'react-native'; -import React, { useContext } from 'react'; -import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; +import React, { useCallback, useContext, useMemo } from 'react'; +import BottomSheet, { + BottomSheetBackdrop, + 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 +25,8 @@ const CalendarBottomSheet = ({ isTodo, item }) => { const { bottomSheetRef } = useContext(CalendarBottomSheetContext); const { mutate: updateTodoDate } = useTodoUpdateMutation(); const { mutate: updateSubTodoDate } = useSubTodoUpdateMutation(); + const snapPoints = useMemo(() => ['75%'], []); + const { i18n } = useTranslation(); const handleDateUpdate = date => { const kstDate = convertGmtToKst(date).toISOString().split('T')[0]; @@ -33,15 +45,84 @@ 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, + }); + + const renderBackdrop = useCallback( + props => ( + + ), + [], + ); + return ( { }} > { setCalendarDate(nextDate); }} - style={{ width: '100%' }} + style={{ + width: '100%', + borderWidth: 0, + paddingBottom: verticalScale(32), + }} />