Todo list

• 프런트, 백, 디자인 지원자 구별 없이 모두 수행. 단, 디자인 지원자는 프런트 과제까지만

▶️ Publishing

Todolist 디자인 시안

https://www.figma.com/file/Cb7h86Nz3JIFQkg1T1HfVz/5기-Todolist?node-id=30%3A2&t=oR2pif6XcsCr5w56-0

• 아이콘

🎯 Front-End

퍼블리싱 해놓은 HTML, CSS 를 기반으로 CRUD 기능을 구현합니다.

생성

• 영상

1. Input에 사용자가 입력한 value를 추가 할 때 Enter 그리고 +버튼 둘 다 가능하게 구현한다.
2. 사용자가 아무것도 입력하지 않았을 때는 list가 생성되지 않는다. → 경고창 띄우기

조회

• 영상

1. 호버
   1. list 하나를 hover하면 배경색이 변경
   2. 각 icon을 hover하면 크기 커짐
2. checkbox를 클릭 시 아래 조건으로 스타일이 변경된다.
   1. 텍스트 색상 변경
   2. 가운데 줄 생성 (텍스트 크기만큼)
   3. 연필 icon 사라짐

수정

• 영상

1. 해당 리스트의 연필 icon 클릭 시 텍스트에 포커스를 맞추고 input 스타일이 생긴다.