<aside>
💡 Goal : My Todo List 만들기
</aside>
- 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다.
- 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨
- 학습 과제를 끝내고 나면 할 수 있어요!
<aside>
⚙ features : 구현해야 할 기능이에요.
</aside>
- UI 구현하기
- Todo 추가 하기
- Todo 삭제 하기
- Todo 완료 상태 변경하기 (완료 ↔ 진행중)
<aside>
📌 Requirement : 과제에 요구되는 사항이에요.
</aside>
- 디자인은 취향대로 해도 되나 화면 구성은 동일하게 해주세요. ✨
- 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.
- Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을
취소
, isDone이 false 이면 라벨을 완료
로 조건부 렌더링 해주세요. 위 영상을 보면 버튼 내 라벨이 다른 걸 볼 수 있죠?
- Todo의 상태가
Working
이면 위쪽에 위치하고, Done
이면 아래쪽에 위치하도록 구현합니다.
- Layout의 최대 넓이는
1200px
, 최소 넓이는 800px
로 제한하고, 전체 화면의 가운데로 정렬해주세요.
- 아래 이미지의 폴더 구조와 동일하게 구현하고 컴포넌트 구성도 똑같이 나눠서 구현해주세요.
<aside>
📌 Hint : 과제가 어려우신가요?
</aside>