SZ-539

app/(tabs)/index.jsx

@@ -2,7 +2,9 @@ import CategoryMainItem from '@/components/categoryView/CategoryMainItem';
 import LoadingSpinner from '@/components/common/molecules/LoadingSpinner';
 import CalendarBottomSheet from '@/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet';
 import DailyTodos from '@/components/todayView/dailyTodos/DailyTodos';
+import SubTodoGenerateBottomSheet from '@/components/todayView/dailyTodos/subtodoGenerateBottomSheet/SubTodoGenerateBottomSheet';
 import WeeklyCalendar from '@/components/WeeklyCalendar';
+import AIBottomSheetProvider from '@/contexts/AIBottomSheetProvider';
 import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider';
 import CategoryProvider from '@/contexts/CategoryContext';
 import DateProvider from '@/contexts/DateContext';
@@ -48,37 +50,40 @@ const TodayView = () => {
   };
   const { data: categoriesData } = useCategoriesQuery(userId);
   const { data: todosData } = useTodosQuery(userId);
-  const { selectedTodo } = useTodoStore();
+  const selectedTodo = useTodoStore(state => state.selectedTodo);
   return (
     <CategoryProvider>
       <DateProvider>
         <CalendarBottomSheetProvider>
-          <KeyboardAvoidingView
-            style={[styles.container, { paddingBottom: verticalScale(20) }]}
-            behavior={Platform.OS === 'ios' ? 'padding' : null}
-            keyboardVerticalOffset={
-              Platform.OS === 'ios' ? verticalScale(90) : verticalScale(20)
-            }
-          >
-            <SafeAreaView style={styles.container}>
-              <WeeklyCalendar />
-              <Suspense
-                fallback={
-                  <View style={styles.suspenseBox}>
-                    <LoadingSpinner loadingText={getLoadingText()} />
-                  </View>
-                }
-              >
-                <FlatList
-                  data={categoriesData}
-                  renderItem={renderCategoriesTodo}
-                  keyExtractor={item => item.id}
-                  contentContainerStyle={styles.flatList}
-                />
-              </Suspense>
-              <CalendarBottomSheet isTodo={true} item={selectedTodo} />
-            </SafeAreaView>
-          </KeyboardAvoidingView>
+          <AIBottomSheetProvider>
+            <KeyboardAvoidingView
+              style={[styles.container, { paddingBottom: verticalScale(20) }]}
+              behavior={Platform.OS === 'ios' ? 'padding' : null}
+              keyboardVerticalOffset={
+                Platform.OS === 'ios' ? verticalScale(90) : verticalScale(20)
+              }
+            >
+              <SafeAreaView style={styles.container}>
+                <WeeklyCalendar />
+                <Suspense
+                  fallback={
+                    <View style={styles.suspenseBox}>
+                      <LoadingSpinner loadingText={getLoadingText()} />
+                    </View>
+                  }
+                >
+                  <FlatList
+                    data={categoriesData}
+                    renderItem={renderCategoriesTodo}
+                    keyExtractor={item => item.id}
+                    contentContainerStyle={styles.flatList}
+                  />
+                </Suspense>
+                <CalendarBottomSheet isTodo={true} item={selectedTodo} />
+                <SubTodoGenerateBottomSheet item={selectedTodo} />
+              </SafeAreaView>
+            </KeyboardAvoidingView>
+          </AIBottomSheetProvider>
         </CalendarBottomSheetProvider>
       </DateProvider>
     </CategoryProvider>

components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx

@@ -68,7 +68,7 @@ const TodoMoreMenu = ({
   const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
   const { openBottomSheet } = useContext(CalendarBottomSheetContext);
-  const { setSelectedTodo } = useTodoStore();
+  const setSelectedTodo = useTodoStore(state => state.setSelectedTodo);
 
   const toggleMenu = useCallback(() => {
     setVisible(true);
@@ -121,6 +121,7 @@ const TodoMoreMenu = ({
             titleText={t('components.todoMoreMenu.createSubTodoWithAi')}
           />
           onPress={() => {
+            setSelectedTodo(item);
             handleGenerateSubTodoPress();
           }}
           style={styles.middleMenuItem}

components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from 'react-native';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
 import React, { useCallback, useContext, useMemo } from 'react';
 import BottomSheet, {
   BottomSheetBackdrop,
@@ -11,18 +11,22 @@ import {
   Calendar,
   I18nConfig,
   NativeDateService,
+  Icon,
 } 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';
+import fontStyles from '@/theme/fontStyles';
 
 const CalendarBottomSheet = ({ isTodo, item }) => {
   const { selectedDate } = useContext(DateContext);
   const [calendarDate, setCalendarDate] = React.useState(selectedDate.toDate());
-  const { bottomSheetRef } = useContext(CalendarBottomSheetContext);
+  const { bottomSheetRef, closeBottomSheet } = useContext(
+    CalendarBottomSheetContext,
+  );
   const { mutate: updateTodoDate } = useTodoUpdateMutation();
   const { mutate: updateSubTodoDate } = useSubTodoUpdateMutation();
   const snapPoints = useMemo(() => ['75%'], []);
@@ -129,6 +133,14 @@ const CalendarBottomSheet = ({ isTodo, item }) => {
             backgroundColor: 'white',
           }}
         >
+          <View style={styles.topContainer}>
+            <Text style={styles.titleText}>
+              {t('components.todoMoreMenu.changeDate')}
+            </Text>
+            <Pressable onPress={closeBottomSheet}>
+              <Icon name="close-outline" style={styles.icon} />
+            </Pressable>
+          </View>
           <Calendar
             dateService={i18n.language === 'ko' ? localeDateService : undefined}
             date={calendarDate}
@@ -159,3 +171,22 @@ const CalendarBottomSheet = ({ isTodo, item }) => {
 };
 
 export default CalendarBottomSheet;
+
+const styles = StyleSheet.create({
+  topContainer: {
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: verticalScale(15),
+    paddingHorizontal: scale(16),
+  },
+
+  icon: {
+    width: scale(20),
+    height: verticalScale(20),
+  },
+  titleText: {
+    fontSize: fontStyles.Subtitle.S1.B_130.fontSize,
+    fontFamily: fontStyles.Subtitle.S1.B_130.fontFamily,
+  },
+});

components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx

@@ -21,6 +21,7 @@ import theme from '@/theme/theme.json';
 import useTodoMoreMenu from './useTodoMoreMenu';
 import { CalendarBottomSheetContext } from '@/contexts/CalendarBottomSheetProvider';
 import useTodoStore from '@/contexts/TodoStore';
+import { AIBottomSheetContext } from '@/contexts/AIBottomSheetProvider';
 
 const TodoText = ({ titleText, disabled = false }) => {
   return (
@@ -56,7 +57,6 @@ const TodoMoreMenu = ({
   const {
     handleEditPress,
     handleDeletePress,
-    handleGenerateSubTodoPress,
     handleCreateSubTodoPress: handleAddSubTodoPress,
     handlePutTodoToInboxPress,
   } = useTodoMoreMenu({
@@ -68,7 +68,10 @@ const TodoMoreMenu = ({
   const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
   const { openBottomSheet } = useContext(CalendarBottomSheetContext);
-  const { setSelectedTodo } = useTodoStore();
+  const setSelectedTodo = useTodoStore(state => state.setSelectedTodo);
+  const { openBottomSheet: openAIBottomSheet } =
+    useContext(AIBottomSheetContext);
+  useContext(AIBottomSheetContext);
 
   const toggleMenu = useCallback(() => {
     setVisible(true);
@@ -123,7 +126,8 @@ const TodoMoreMenu = ({
             titleText={t('components.todoMoreMenu.createSubTodoWithAi')}
           />
           onPress={() => {
-            handleGenerateSubTodoPress();
+            setSelectedTodo(item);
+            openAIBottomSheet();
             setVisible(false);
           }}
           style={styles.middleMenuItem}