🎯 Todo List 화면에 현재 시간을 표시합니다.

• Date 객체의 toLocaleDateString과 toLocaleDateString을 이용해 현재 날짜와 시간을 가져왔습니다. 날짜의 option은 DATE_FORM, 시간의 option은 TIME_FORM이며 둘의 type은 Intl.DateTimeFormatOptions입니다.
• setInterval함수를 이용해 실시간 시계를 구현했습니다.

// TodoHead.js
const TodoHead = () => {
  //@TODO 현재 시간을 표시해야합니다.
  const [date] = useState(new Date().toLocaleDateString('en-US', DATE_FORM));
  const [time, setTime] = useState(new Date().toLocaleTimeString('en-US', TIME_FORM));

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString('en-US', TIME_FORM));
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <TodoHeadBlock>
      <p>{date}</p>
      <p>{time}</p>
    </TodoHeadBlock>
  );
};

// utils/constants.ts
export const DATE_FORM: Intl.DateTimeFormatOptions = {
  year: 'numeric',
  weekday: 'long',
  month: 'long',
  day: 'numeric',
};

export const TIME_FORM: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
};

• style 같은 경우 무분별한 div 태그 사용과 컴포넌트 생성을 막기 위해 TodoHeadBlock 안에 p태그와 child 속성을 이용해 둘을 구분했습니다.

// TodoHead.tsx
const TodoHeadBlock = styled.div`
  padding-top: 52px;
  padding-bottom: 24px;
  border-bottom: 3px solid #33bb77;

  p {
    text-align: center;
    color: #119955;
    padding-top: 5px;
  }

  p:first-child {
    font-size: 26px;
  }
  p:last-child {
    font-size: 22px;
  }
`;

🎯 To/do 항목에 완료 버튼을 누르면 Todo가 완료될 수 있도록 완성합니다.

• 먼저 TodoItem.tsx에서 완료 버튼을 클릭했을 때 id를 useTodo의 toggleTodo 함수로 넘겨줍니다.

// TodoItem.tsx
const TodoItem = ({ toggleTodo, removeTodo, todo }: TodoItemProps) => {
  const { id, text, done, startDate, deadline } = todo;

  const handleCompleteToggle = useCallback((id) => {
    toggleTodo(id);
  }, []);

  return (
    <TodoItemBlock>
      <CheckCircle done={done} onClick={() => handleCompleteToggle(id)}>
        {done && <CheckOutlined />}
      </CheckCircle>
			...
		<TodoItemBlock>
	)
}

• 전달 받은 id를 통해 바꾸려는 item을 찾고, ES8의 object spread properties 이용해 불변성을 지킨 채 done값을 변경합니다.

// useTodo
const toggleTodo = (id: number) => {
    setTodoState((prevState) =>
      prevState.map((todo: Itodo) =>
        todo.id === id
          ? {
              ...todo,
              done: !todo.done,
            }
          : todo,
      ),
    );
  };