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

여동희·2023년 4월 7일
0

피그마로 구현하기

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

컴포넌트 정리

📝 CreateTodo

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

📝 TodoItem

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

📝 TodoList

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

📝 TodoTemplate

  • CreateTodo, TodoList 컴포넌트와 레이아웃 형태 구현하는 컴포넌트
profile
프론트엔드 개발자 준비생

0개의 댓글