TODO-TypeScript
Requirements
- 할 일 완료
- 할 일 추가
- 할 일 수정
- 할 일 삭제
Components
TodoTemplate
- 투두리스트의 레이아웃을 설정하는 컴포넌트
- 페이지의 중앙에 흰색 박스를 보여준다.
TodoList
- 할 일에 대한 정보가 들어있는 todo 배열을 여러 개의 TodoItem 컴포넌트로 렌더링한다.
TodoItem
- 각 할 일에 대한 정보를 렌더링해주는 컴포넌트.
- 좌측의 체크박스를 누르면 할 일의 완료 여부를 toggle할 수 있다.
- 할 일이 완료되었을 때는 좌측에 체크가 표시되고 텍스트의 색상이 연해진다.
- 수정 아이콘을 누르면 항목을 수정할 수 있다.
- 삭제 아이콘을 누르면 항목이 삭제된다.
TodoInput
- 새로운 할 일을 등록할 수 있게 해주는 컴포넌트.
- 투두리스트의 최상단에 위치한다.
- 할 일을 입력 할 수 있는 인풋 박스가 있고, 버튼을 누르면 할 일이 추가된다.
TodoEdit
- 항목을 수정할 수 있는 컴포넌트.
- 기존 텍스트를 받아와 수정할 수 있는 인풋 박스가 있고, 버튼을 누르면 할 일이 수정된다.