typescript-todo : ListScreen & FocusScreen 작성

💙 ListScreen 

type Props = {};
const ListScreen: React.FC<Props> = () => {
  const { addTask, tasks, setTasks, updateTaskCompletion } = useTaskStore();
  
  
  // 할 일 내용 작성을 위한 state
  const [newTaskLabel, setNewTaskLabel] = useState('');

  // 1. 할 일 작성
  const handleNewTaskLabel = (event: ChangeEvent<HTMLInputElement>) => {
 
    setNewTaskLabel(event.target.value);
  };

  // 1. 할 일 추가 
  const submitNewTaskLabel = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
   
    if (newTaskLabel !== '') { // 할 일 내용 입력값이 있는 경우
      addTask({ label: newTaskLabel });
      setNewTaskLabel('');
    } else {
      alert('Enter Todo');
    }
  };

  // 2. 할 일 완료 체크
  const handleTaskCompleteChange =
    (task: Task) => (event: ChangeEvent<HTMLInputElement>) => {
      updateTaskCompletion(task.id, event.target.checked);
    };

  // 3. 완료된 할 일 일괄 삭제
  const handleClearClick = () => {
    setTasks((tasks: Task[]) => tasks.filter((task) => !task.isComplete));
  };

  // 4. 할 일 삭제
  const handleTaskDelete = (handledTask: Task) => () => {
    setTasks((tasks: Task[]) =>
      tasks.filter((task) => task.id !== handledTask.id)
    );
  };

  return (
    <StyledRoot>
      <List>
        {tasks.map((task: Task) => (
          <ListItem key={task.id}>
            <CheckBox
              checked={task.isComplete}
              onChange={handleTaskCompleteChange(task)}
            />
            <Spacer width={24} />
            {task.label}
            <Spacer flex={1} />
            <DeleteButton onClick={handleTaskDelete(task)}>
              <DeleteIcon />
            </DeleteButton>
          </ListItem>
        ))}
      </List>
      <Spacer height={30} />
      <form onSubmit={submitNewTaskLabel}>
        <Input
          placeholder="Add a task"
          value={newTaskLabel}
          onChange={handleNewTaskLabel}
        />
      </form>
      <Spacer height={45} />
      <TextButton style={{ alignSelf: 'center' }} onClick={handleClearClick}>
        {' '}
        Clear Completed
      </TextButton>
    </StyledRoot>
  );
};

💙 FocusScreen

type Props = {};
const FocusScreen: React.FC<Props> = () => {
  const {
    focusedTask: task,
    updateTaskCompletion,
    shuffleFocusedTask, // 2. 할 일 미완료 중 랜덤으로 골라 화면에 띄우기
  } = useTaskStore();
 
 // 1. 할 일 완료 체크
  const handleMarkComplete = () => {
    if (task) {
      updateTaskCompletion(task.id, true);
    }
  };

  return task ? (
    <StyledRoot>
      <Task>{task.label}</Task>
      <Button onClick={handleMarkComplete}>Mark Completed</Button>
      <Spacer height={45} />
      <TextButton onClick={shuffleFocusedTask}>Skip Task</TextButton>
    </StyledRoot>
  ) : (
    <StyledRoot>No More Incomplete Task!!</StyledRoot>
  );
};

export default FocusScreen;