SZ-538

app.config.js

@@ -77,6 +77,7 @@ const expoConfig = {
       },
       package: 'com.safezone.onestep',
       versionCode: 7,
+      softwareKeyboardLayoutMode: 'pan',
     },
     web: {
       favicon: './assets/favicon.png',

app/(tabs)/_layout.jsx

@@ -3,7 +3,10 @@ import '@/locales/index';
 import { Tabs } from 'expo-router';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { verticalScale } from 'react-native-size-matters';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import fontStyles from 'theme/fontStyles';
+import { Platform } from 'react-native';
 
 const todayIcon = ({ color, size }) => (
   <MaterialIcons name="today" color={color} size={size} />
@@ -20,6 +23,14 @@ const TabLayout = () => {
       <Tabs
         screenOptions={{
           tabBarHideOnKeyboard: true, // 키보드가 활성화될 때 탭 바 숨기기
+          tabBarStyle: {
+            backgroundColor: 'white',
+            height:
+              Platform.OS === 'ios' ? verticalScale(75) : verticalScale(45),
+          },
+          tabBarLabelStyle: {
+            ...fontStyles.Paragraph.P1.M_100,
+          },
         }}
       >
         <Tabs.Screen

app/(tabs)/index.jsx

@@ -13,7 +13,13 @@ import useTodosQuery from '@/hooks/api/useTodoQuery';
 import { handleLogEvent, TODAYVIEW_VIEW_EVENT } from '@/utils/logEvent';
 import { default as React, Suspense, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SafeAreaView, StyleSheet, View } from 'react-native';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { scale, verticalScale } from 'react-native-size-matters';
 
@@ -34,7 +40,7 @@ const TodayView = () => {
 
   const renderCategoriesTodo = ({ item }) => {
     return (
-      <View style={styles.bottomContainer}>
+      <View>
         <CategoryMainItem item={item} />
         <DailyTodos todosData={todosData} categoryId={item.id} />
       </View>
@@ -47,22 +53,32 @@ const TodayView = () => {
     <CategoryProvider>
       <DateProvider>
         <CalendarBottomSheetProvider>
-          <SafeAreaView style={styles.container}>
-            <WeeklyCalendar />
-            <Suspense
-              fallback={
-                <View style={styles.suspenseBox}>
-                  <LoadingSpinner loadingText={getLoadingText()} />
-                </View>
-              }
-            >
-              <FlatList
-                data={categoriesData}
-                renderItem={renderCategoriesTodo}
-              />
-            </Suspense>
-            <CalendarBottomSheet isTodo={true} item={selectedTodo} />
-          </SafeAreaView>
+          <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>
         </CalendarBottomSheetProvider>
       </DateProvider>
     </CategoryProvider>
@@ -74,15 +90,15 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'white',
   },
-  bottomContainer: {
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(20),
-  },
   suspenseBox: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  flatList: {
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(20),
+  },
 });
 
 export default TodayView;

components/todayView/dailyTodos/DailyTodos.tsx

@@ -16,44 +16,30 @@ import {
   TODAYVIEW_TEXTINPUT_SUBMIT_EVENT,
 } from '@/utils/logEvent';
 import { Icon } from '@ui-kitten/components';
-import React, { Fragment, useContext } from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  KeyboardAvoidingView,
-  StyleSheet,
-  TextInput,
-  View,
-} from 'react-native';
+import { StyleSheet, TextInput, View } from 'react-native';
 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
-  todosData: any;
-  categoryId: number;
-}
-
-const DailyTodos: React.FC<DailyTodosProps> = ({ todosData, categoryId }) => {
+const DailyTodos = ({ todosData, categoryId }) => {
   const { userId } = useContext(LoginContext);
   const { selectedDate } = useContext(DateContext);
-  // const { data: todosData } = useTodosQuery(userId);
   const { t } = useTranslation();
 
   const currentTodos = useFilteredTodos(todosData, categoryId, selectedDate);
-
   const { input, setInput, handleSubmit } = useCreateTodo(
     userId,
     categoryId,
     selectedDate,
   );
 
-  const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext);
+  const { isTextInputOpen, activatedCategoryId, setTextInputOpen } =
+    useContext(TextInputContext);
 
   const handleDragEnd = useHandleDrag();
-  const { setTextInputOpen } = useContext(TextInputContext);
 
   const handleInputSubmit = () => {
     handleLogEvent(TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, {
@@ -69,27 +55,22 @@ const DailyTodos: React.FC<DailyTodosProps> = ({ todosData, categoryId }) => {
   };
 
   return (
-    <GestureHandlerRootView>
-      <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>
-        {isTextInputOpen && categoryId === activatedCategoryId ? (
-          <KeyboardAccessoryView
-            style={styles.keyboardInputContainer}
-            alwaysVisible
-            androidAdjustResize
-          >
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.mainContainer}>
+        <DraggableFlatList
+          data={currentTodos}
+          renderItem={renderTodo}
+          onDragEnd={handleDragEnd}
+          keyExtractor={item => item.id.toString()}
+          onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)}
+          scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE}
+          simultaneousHandlers={[]}
+          activationDistance={20}
+          containerStyle={styles.flatListContainer}
+        />
+
+        {isTextInputOpen && categoryId === activatedCategoryId && (
+          <View style={styles.inputWrapper}>
             <View style={styles.inputContainer}>
               <Icon
                 name="checkmark-square-2"
@@ -105,42 +86,55 @@ const DailyTodos: React.FC<DailyTodosProps> = ({ todosData, categoryId }) => {
                 autoFocus={true}
               />
             </View>
-          </KeyboardAccessoryView>
-        ) : null}
-      </Fragment>
+          </View>
+        )}
+      </View>
     </GestureHandlerRootView>
   );
 };
 
 const styles = StyleSheet.create({
-  touchableCheck: {
-    paddingTop: 0,
-    justifyContent: 'center',
+  container: {
+    flex: 1,
   },
-  checkIcon: {
-    width: scale(24),
-    height: verticalScale(24),
+  mainContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  flatListContainer: {
+    flex: 1,
+  },
+  keyboardAvoidingView: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 0,
+    backgroundColor: 'white',
+  },
+  inputWrapper: {
+    width: '100%',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.Gray02,
+    backgroundColor: 'white',
   },
   inputContainer: {
     flexDirection: 'row',
-    justifyContent: 'center',
     alignItems: 'center',
-    paddingLeft: scale(7),
+    paddingHorizontal: scale(7),
+    paddingVertical: verticalScale(8),
+  },
+  checkIcon: {
+    width: scale(24),
+    height: verticalScale(24),
   },
   textInput: {
-    backgroundColor: colors.Gray02,
     flex: 1,
+    backgroundColor: colors.Gray02,
     borderRadius: moderateScale(4),
     marginLeft: scale(4),
     paddingHorizontal: scale(8),
     height: scale(24),
     fontSize: moderateScale(14),
   },
-  keyboardInputContainer: {
-    borderTopWidth: 0,
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
 });
 
 export default DailyTodos;

components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { List, ListItem } from '@ui-kitten/components';
+import { List, ListItem, Text } from '@ui-kitten/components';
 import { Button } from '@ui-kitten/components';
 import { useTranslation } from 'react-i18next';
 import useGeneratedSubTodoList from './useGeneratedSubTodoList';
 import { IconButton } from '../../../../common/molecules/IconButton';
-import { scale } from 'react-native-size-matters';
+import { moderateScale, scale } from 'react-native-size-matters';
 import { StyleSheet } from 'react-native';
 
 const GeneratedSubTodoList = ({ generatedSubTodos, setGeneratedSubTodos }) => {
@@ -29,13 +29,17 @@ const GeneratedSubTodoList = ({ generatedSubTodos, setGeneratedSubTodos }) => {
     );
   };
 
+  const listTitle = (evaProps, item) => (
+    <Text style={[evaProps?.style, styles.titleStyle]}>{item.content}</Text>
+  );
+
   const renderGeneratedTodo = ({ item, index }) => {
     return (
       <ListItem
-        title={item.content}
         key={index}
         style={styles.listItem}
         accessoryRight={generatedSubtodoAcceptIcon(index)}
+        title={evaProps => listTitle(evaProps, item)}
       />
     );
   };
@@ -58,4 +62,7 @@ const styles = StyleSheet.create({
   listItem: {
     paddingLeft: scale(40),
   },
+  titleStyle: {
+    fontSize: moderateScale(13),
+  },
 });

components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx

@@ -72,20 +72,15 @@ const DailySubTodo = ({ item }) => {
   const accessoryRight = () => {
     return <SubTodoMoreMenu onEdit={handleEdit} item={item} />;
   };
-  const title = () => (
+  const title = evaProps => (
     <>
       <EditableTextField
         isEditing={isEditing}
         item={item}
         handleSubmitEditing={handleSubTodoUpdate}
-        textStyles={styles.text}
-        inputStyles={styles.input}
+        textStyles={[evaProps?.style, styles.text]}
+        inputStyles={[evaProps?.style, styles.input]}
       />
-      {/* {item.dueTime && (
-        <Text style={{ fontSize: 12, color: theme['text-hint-color'] }}>
-          {item.dueTime.split(':').slice(0, 2).join(':')}
-        </Text>
-      )} */}
     </>
   );
 

components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx

@@ -1,7 +1,7 @@
 import getIconFillColor from '@/utils/getIconFillColor';
 import { Icon, ListItem, Text } from '@ui-kitten/components';
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { RenderItemParams } from 'react-native-draggable-flatlist';
 import { Todo } from '../../../../../types/todo';
 import EditableTextField from '../../../../common/molecules/EditableTextField';
@@ -74,7 +74,7 @@ const TodoListItem: React.FC<TodoListItemProps> = ({
   };
 
   const title = () => (
-    <>
+    <View>
       <EditableTextField
         isEditing={isEditing}
         handleSubmitEditing={handleTodoListItemSubmitEditing}
@@ -90,7 +90,7 @@ const TodoListItem: React.FC<TodoListItemProps> = ({
           {item.dueTime.split(':').slice(0, 2).join(':')}
         </Text>
       )}
-    </>
+    </View>
   );
 
   return (