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

import TodoList from "@/components/todo-list";
import { Button, ButtonText } from "@/components/ui/button";
import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token";
import { HStack } from "@/components/ui/hstack";
import { Input, InputField } from "@/components/ui/input";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { useTodosCtx } from "@/store/todoProvider";
import { useState } from "react";
import { KeyboardAvoidingView, Platform, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function ActiveTab() {
  const { todos, activeTodos, leftCount, add, toggle, completeAll, clearDone } =
    useTodosCtx();
  const [title, setTitle] = useState("");

  const onAdd = () => {
    add(title);
    setTitle("");
  };

  return (
    <SafeAreaView className="flex-1 px-4 py-1 bg-white dark:bg-neutral-900">
      <VStack className="flex-1 gap-3">
        <HStack className="flex justify-between">
          <Text className="text-2xl font-bold">할 일</Text>
        </HStack>

        {/* 입력 창 */}
        <HStack className="gap-2">
          <Input className="flex-1">
            <InputField
              value={title}
              onChangeText={setTitle}
              placeholder="할 일을 입력하세요"
              returnKeyType="done"
              onSubmitEditing={onAdd}
            />
          </Input>
          <Button action={GS.action.primary} onPress={onAdd}>
            <ButtonText>추가</ButtonText>
          </Button>
        </HStack>

        {/* 확인 창 */}
        <TodoList data={todos} onToggle={toggle} />
        <Button
          variant={GS.variant.outline}
          action={GS.action.secondary}
          onPress={clearDone}
        >
          <ButtonText>완료한 일 모두 지우기</ButtonText>
        </Button>
      </VStack>
    </SafeAreaView>
  );
}