SZ-511

.env

@@ -0,0 +1,2 @@
+SIZE_MATTERS_BASE_WIDTH=360
+SIZE_MATTERS_BASE_HEIGHT=666

app.config.js

@@ -59,7 +59,7 @@ const expoConfig = {
     userInterfaceStyle: 'light',
     splash: {
       image: './assets/splash.png',
-      resizeMode: 'contain',
+      resizeMode: 'cover',
       backgroundColor: '#ffffff',
     },
     ios: {

app/_layout.jsx

@@ -15,7 +15,7 @@ import { Stack } from 'expo-router';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
+import { default as mapping } from '../theme/mapping.json';
 const SENTRY_MODE = env.SENTRY_MODE;
 
 Sentry.init({
@@ -48,7 +48,11 @@ const RootLayout = () => {
       <QueryClientProvider client={queryClient}>
         <LoginProvider>
           <IconRegistry icons={[EvaIconsPack, AntDesignIconsPack]} />
-          <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
+          <ApplicationProvider
+            {...eva}
+            theme={{ ...eva.light, ...theme }}
+            customMapping={mapping}
+          >
             <GestureHandlerRootView>
               <Stack screenOptions={{ headerShadowVisible: false }}>
                 <Stack.Screen name="index" options={{ headerShown: false }} />

babel.config.js

@@ -5,7 +5,6 @@ module.exports = function (api) {
     plugins: [
       '@babel/plugin-transform-class-static-block',
       ['@babel/plugin-proposal-decorators', { legacy: true }],
-      // ['react-native-reanimated/plugin'],
       [
         'module-resolver',
         {
@@ -16,6 +15,17 @@ module.exports = function (api) {
         },
       ],
       'react-native-reanimated/plugin',
+      [
+        'module:react-native-dotenv',
+        {
+          moduleName: '@env',
+          path: '.env',
+          blacklist: null,
+          whitelist: null,
+          safe: false,
+          allowUndefined: true,
+        },
+      ],
     ],
   };
 };

components/common/molecules/CustomIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '@ui-kitten/components';
+import { moderateScale } from 'react-native-size-matters/extend';
+import theme from '@/theme/theme.json';
+
+const CustomIcon = ({ props, size, name, fill = theme.Black02 }) => {
+  return (
+    <Icon
+      pack="eva"
+      name={name}
+      {...props}
+      style={{ width: moderateScale(size), height: moderateScale(size) }}
+      fill={fill}
+    />
+  );
+};
+
+export default CustomIcon;

components/common/molecules/IconButton.tsx

@@ -1,10 +1,20 @@
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { Icon } from '@ui-kitten/components';
-
+import theme from '@/theme/theme.json';
 // IconButton 컴포넌트
-export const IconButton = ({ onPress, iconName, fill, ...props }) => {
+export const IconButton = ({
+  onPress,
+  iconName,
+  fill = theme.Black02,
+  testID = `${iconName || 'default'}`,
+  ...props
+}) => {
   return (
-    <TouchableOpacity onPress={() => onPress()} style={[styles.button]}>
+    <TouchableOpacity
+      testID={testID}
+      onPress={() => onPress()}
+      style={[styles.button]}
+    >
       <Icon
         {...props}
         pack="eva"

components/icons/AddIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const AddIcon = props => {
+  return <CustomIcon props={props} name="plus-outline" size={16} />;
+};
+
+export default AddIcon;

components/icons/ChangeDateIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const ChangeDateIcon = props => {
+  return <CustomIcon props={props} name="calendar-outline" size={16} />;
+};
+
+export default ChangeDateIcon;

components/icons/DeleteIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const DeleteIcon = props => {
+  return <CustomIcon props={props} name="trash-2-outline" size={16} />;
+};
+
+export default DeleteIcon;

components/icons/EditIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const EditIcon = props => {
+  return <CustomIcon props={props} name="edit-outline" size={16} />;
+};
+
+export default EditIcon;

components/icons/FolderIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const FolderIcon = props => {
+  return <CustomIcon props={props} name="folder-outline" size={16} />;
+};
+
+export default FolderIcon;

components/icons/GenerateSubtodoIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CustomIcon from '../common/molecules/CustomIcon';
+
+const GenerateSubtodoIcon = props => {
+  return <CustomIcon props={props} name="flash-outline" size={16} />;
+};
+
+export default GenerateSubtodoIcon;

components/todayView/dailyTodos/DailyTodos.jsx

@@ -26,13 +26,17 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { KeyboardAccessoryView } from 'react-native-keyboard-accessory';
 import DailyTodo from './dailyTodo/DailyTodo';
 import { TextInputContext } from '@/contexts/textInputContext';
+import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider';
+import CalendarBottomSheet from './calendarBottomSheet/CalendarBottomSheet';
+import useTodoStore from '@/contexts/TodoStore';
 
 const DailyTodos = () => {
   const { userId } = useContext(LoginContext);
   const { selectedCategory } = useContext(CategoryContext);
   const { selectedDate } = useContext(DateContext);
   const { isLoading, error, data: todosData } = useTodosQuery(userId);
   const { t } = useTranslation();
+  const { selectedTodo } = useTodoStore();
 
   const currentTodos = useFilteredTodos(
     todosData,
@@ -72,31 +76,34 @@ const DailyTodos = () => {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <Fragment>
-        <KeyboardAvoidingView
-          behavior="padding"
-          style={{ flex: 1, backgroundColor: 'white' }}
-        >
-          <DraggableFlatList
-            data={currentTodos}
-            renderItem={renderTodo}
-            onDragEnd={handleDragEnd}
-            keyExtractor={item => item.id.toString()}
-            onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)}
-            scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE}
-          />
-        </KeyboardAvoidingView>
-        <KeyboardAccessoryView alwaysVisible androidAdjustResize>
-          {isTextInputOpen && (
-            <View>
-              <Input
-                placeholder={t('components.dailyTodos.writeTodo')}
-                value={input}
-                onChangeText={setInput}
-                onSubmitEditing={handleInputSubmit}
-              />
-            </View>
-          )}
-        </KeyboardAccessoryView>
+        <CalendarBottomSheetProvider>
+          <KeyboardAvoidingView
+            behavior="padding"
+            style={{ flex: 1, backgroundColor: 'white' }}
+          >
+            <DraggableFlatList
+              data={currentTodos}
+              renderItem={renderTodo}
+              onDragEnd={handleDragEnd}
+              keyExtractor={item => item.id.toString()}
+              onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)}
+              scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE}
+            />
+          </KeyboardAvoidingView>
+          <KeyboardAccessoryView alwaysVisible androidAdjustResize>
+            {isTextInputOpen && (
+              <View>
+                <Input
+                  placeholder={t('components.dailyTodos.writeTodo')}
+                  value={input}
+                  onChangeText={setInput}
+                  onSubmitEditing={handleInputSubmit}
+                />
+              </View>
+            )}
+          </KeyboardAccessoryView>
+          <CalendarBottomSheet isTodo={true} item={selectedTodo} />
+        </CalendarBottomSheetProvider>
       </Fragment>
     </GestureHandlerRootView>
   );

components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx

@@ -0,0 +1,74 @@
+import { View, Text } from 'react-native';
+import React, { useContext } 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 { convertGmtToKst } from '@/utils/convertTimezone';
+import { useTodoUpdateMutation } from '@/hooks/api/useTodoMutations';
+import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations';
+import { t } from 'i18next';
+
+const CalendarBottomSheet = ({ isTodo, item }) => {
+  const { selectedDate } = useContext(DateContext);
+  const [calendarDate, setCalendarDate] = React.useState(selectedDate.toDate());
+  const { bottomSheetRef } = useContext(CalendarBottomSheetContext);
+  const { mutate: updateTodoDate } = useTodoUpdateMutation();
+  const { mutate: updateSubTodoDate } = useSubTodoUpdateMutation();
+
+  const handleDateUpdate = date => {
+    const kstDate = convertGmtToKst(date).toISOString().split('T')[0];
+    if (isTodo) {
+      const updatedTodo = {
+        date: kstDate,
+        todoId: item.id,
+      };
+      updateTodoDate(updatedTodo);
+    } else {
+      const updatedSubTodo = {
+        date: kstDate,
+        subtodoId: item.id,
+      };
+      updateSubTodoDate(updatedSubTodo);
+    }
+  };
+
+  return (
+    <BottomSheet
+      enablePanDownToClose={true}
+      ref={bottomSheetRef}
+      snapPoints={['75%']}
+      index={-1}
+    >
+      <BottomSheetView
+        style={{ flex: 1, padding: 24, backgroundColor: 'white' }}
+      >
+        <View
+          style={{
+            backgroundColor: 'white',
+          }}
+        >
+          <Calendar
+            date={calendarDate}
+            onSelect={nextDate => {
+              setCalendarDate(nextDate);
+            }}
+            style={{ width: '100%' }}
+          />
+          <Button
+            onPress={() => {
+              if (item) {
+                handleDateUpdate(calendarDate);
+                bottomSheetRef.current?.close();
+              }
+            }}
+          >
+            <Text>{t('components.todoModal.confirm')}</Text>
+          </Button>
+        </View>
+      </BottomSheetView>
+    </BottomSheet>
+  );
+};
+
+export default CalendarBottomSheet;

components/todayView/dailyTodos/dailyTodo/DailyTodo.jsx

@@ -3,7 +3,6 @@ import '@/locales/index';
 import React, { useContext } from 'react';
 import useModal from '../../../../hooks/common/useModal';
 import SubTodoGenerateModal from '../../../SubTodoGenerateModal';
-import TodoModal from '../../../TodoModal';
 import GeneratedSubTodoList from './generatedSubTodoList/GeneratedSubTodoList';
 import SubTodoList from './subTodoList/SubTodoList';
 import TodoListItem from './todoListItem/TodoListItem';
@@ -13,10 +12,10 @@ const DailyTodo = ({ item, drag, isActive }) => {
   const {
     isEditing,
     setIsEditing,
-    subTodoInputActivated,
-    setSubTodoInputActivated,
     generatedSubTodos,
     setGeneratedSubTodos,
+    subTodoInputActivated,
+    setSubTodoInputActivated,
   } = useDailyTodo();
 
   const { setTextInputOpen } = useContext(TextInputContext);
@@ -25,13 +24,8 @@ const DailyTodo = ({ item, drag, isActive }) => {
     setIsVisible: setIsSubTodoGenerateModalVisible,
   } = useModal();
 
-  const { isVisible: isTodoModalVisible, setIsVisible: setIsTodoModalVisible } =
-    useModal();
+  const { setIsVisible: setIsTodoModalVisible } = useModal();
 
-  const handleSubTodoCreate = () => {
-    setIsTodoModalVisible(false);
-    setSubTodoInputActivated(true);
-  };
   const handleEdit = () => {
     setIsEditing(true);
     setTextInputOpen(false);
@@ -49,6 +43,8 @@ const DailyTodo = ({ item, drag, isActive }) => {
         setIsSubTodoGenerateModalVisible={setIsSubTodoGenerateModalVisible}
         setIsTodoModalVisible={setIsTodoModalVisible}
         getIndex={() => 0}
+        onEdit={handleEdit}
+        setSubTodoInputActivated={setSubTodoInputActivated}
       />
       <SubTodoList
         item={item}
@@ -59,14 +55,6 @@ const DailyTodo = ({ item, drag, isActive }) => {
         generatedSubTodos={generatedSubTodos}
         setGeneratedSubTodos={setGeneratedSubTodos}
       />
-      <TodoModal
-        item={item}
-        isTodo={true}
-        visible={isTodoModalVisible}
-        setVisible={setIsTodoModalVisible}
-        onEdit={handleEdit}
-        onSubTodoCreate={handleSubTodoCreate}
-      />
       <SubTodoGenerateModal
         modalVisible={isSubTodoGenerateModalVisible}
         setModalVisible={setIsSubTodoGenerateModalVisible}