mfe

lite.todo/app/(tabs)/done.tsx

@@ -14,7 +14,12 @@ export default function DoneTab() {
     <SafeAreaView className="flex-1 px-4 py-1 bg-white dark:bg-neutral-900">
       <VStack className="flex-1 gap-3">
         <Text className="text-2xl font-bold">완료한 일</Text>
-        <TodoList data={doneTodos} onToggle={toggle} onRemove={remove} />
+        <TodoList
+          data={doneTodos}
+          onToggle={toggle}
+          onRemove={remove}
+          emptyMessage="모두 완료하셨습니다."
+        />
         <HStack className="justify-end">
           <Button
             className="flex-1"

lite.todo/app/(tabs)/index.tsx

@@ -44,14 +44,14 @@ export default function ActiveTab() {
         </HStack>
 
         {/* 확인 창 */}
-        <TodoList data={todos} onToggle={toggle} />
-        <Button
+        <TodoList data={activeTodos} onToggle={toggle} />
+        {/* <Button
           variant={GS.variant.outline}
           action={GS.action.secondary}
           onPress={clearDone}
         >
           <ButtonText>완료한 일 모두 지우기</ButtonText>
-        </Button>
+        </Button> */}
       </VStack>
     </SafeAreaView>
   );

lite.todo/app/_layout.tsx

@@ -11,8 +11,8 @@ export default function App() {
   return (
     <TodosProvider>
       <GluestackUIProvider mode="light">
+        <StatusBar style="auto" />
         <SafeAreaView style={{ flex: 1 }}>
-          <StatusBar style="auto" />
           <Stack screenOptions={{ header: () => null }} />
         </SafeAreaView>
       </GluestackUIProvider>

lite.todo/components/todo-list.tsx

@@ -19,12 +19,14 @@ type Props = {
   onToggle: (id: string) => void;
   onRemove?: (id: string) => void;
   className?: string;
+  emptyMessage?: string;
 };
 
 export default function TodoList({
   data,
   onToggle,
   onRemove,
+  emptyMessage,
   className,
 }: Props) {
   return (
@@ -41,15 +43,15 @@ export default function TodoList({
               onChange={(_isChecked) => onToggle(item.id)}
               value={item.title}
             >
-              <Animatable.View
+              {/* <Animatable.View
                 animation={item.done ? "bounce" : undefined}
                 duration={300}
                 useNativeDriver
-              >
-                <CheckboxIndicator>
-                  <CheckboxIcon as={CheckIcon} />
-                </CheckboxIndicator>
-              </Animatable.View>
+              > */}
+              <CheckboxIndicator>
+                <CheckboxIcon as={CheckIcon} />
+              </CheckboxIndicator>
+              {/* </Animatable.View> */}
               <CheckboxLabel className="data-[checked=true]:line-through">
                 {item.title}
               </CheckboxLabel>
@@ -76,7 +78,7 @@ export default function TodoList({
       }}
       ListEmptyComponent={
         <Text className="text-neutral-400 mt-6 text-center">
-          할 일이 없습니다.
+          {emptyMessage ?? "할 일이 없습니다."}
         </Text>
       }
     />

lite.todo/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "expo-router/entry",
   "scripts": {
-    "start": "expo start --offline",
+    "start": "expo start",
     "android": "expo start --android --offline",
     "ios": "expo start --ios --offline",
     "web": "expo start --web --offline"