SZ-519

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,

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',

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,
   },
 });
 

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),
   },
 });
 

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),
   },
 });
 

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<TextStyle> | null;
-  textStyles: StyleProp<TextStyle> | null;
+  inputStyles?: StyleProp<TextStyle> | null;
+  textStyles?: StyleProp<TextStyle> | null;
 }
 
 const EditableTextField = ({
   isEditing,
   handleSubmitEditing,
   item,
-  inputStyles = null,
-  textStyles = null,
+  inputStyles = styles.input,
+  textStyles = styles.text,
 }: EditableListItemTitleProps) => {
   const [content, setContent] = useState<string>(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),
+  },
+});

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', // 기본 아이콘 색상
   },
 });