TODO.app v2.0.1

직접 사용해보세요 ⇩

https://neumorphismtodo.netlify.app/

📢

Beautiful-dnd 를 사용하여 Drag & Drop을 구현했습니다.

useEffect를 사용해 입력된 데이터가 로컬에 저장되게 하여 앱의 사용성을 높혔습니다.

리스트 내 대상을 클릭 시 Prompt 창에서 제목을 수정할 수 있도록 구현했습니다.

• 마우스 hover시 대상의 제목이 파란색 볼드체로 변하며 💬 로고가 나타나도록 직관적인 수정 UI를 구현했습니다.
• Prompt 창에는 클릭한 대상의 이름이 기본값으로 표시되도록 설정했습니다.
• Prompt 창 취소시 아무 일도 일어나지 않도록 설정했습니다.

아무것도 입력하지 않고 Enter을 누를 경우 입력을 해야한다는 경고창이 뜨도록 수정 했습니다.

전체 삭제 버튼을 누를 경우 확인 창을 띄워 한번 더 확인할 수 있도록 구현했습니다.

Neumorphism을 바탕으로 UI를 디자인했습니다.

• 리스트내 할 일에 마우스 hover 시 밝기 변화를 주어 Drag를 유도했습니다.
• Drag 시 대상이 조금 더 높이 들려있는 것 같은 느낌을 그림자로 구현했습니다.
• CheckBox 체크 시 대상이 눌러진 것 처럼 표현하여 완료 항목의 시인성을 높혔습니다.
• 입력, 종료, 리스트내 X 버튼을 입체적으로 표현하여 직관성을 높혔습니다.