React Create App - To Do List 만들기 (기획/컴포넌트정리)

피그마로 구현하기

정말 최대한 간단하게 구현한 투두리스트
해보고싶은 애니메이션 기능들을 넣어보긴 했는데 구현은 어려울 것 같아서 고민중

컴포넌트 정리

📝 CreateTodo

• todo 추가하는 컴포넌트
• useInput custom Hook으로 구현해보기
  (input, submit)
• 추가하기 버튼 클릭 후 input창 애니메이션으로 나오도록 하기
  (onClick 사용)

📝 TodoItem

• 내용 앞부분에 checkbox 추가해서 checked시 내용에 밑줄표시
• checkbox의 checked 여부 상관없이 왼쪽으로 드래그 하면 삭제버튼 나옴
• 삭제버튼 클릭시 해당 TodoItem 삭제

📝 TodoList

• CreateTodo로 추가된 TodoItem이 나열되는 컴포넌트
• 최근에 추가된 내용이 상단에 등록됨

📝 TodoTemplate

• CreateTodo, TodoList 컴포넌트와 레이아웃 형태 구현하는 컴포넌트