[TODO 페이지] todo 삭제

[jayjeong8]

배경

주요 기능인 TODO를 구현하기 위한 작업입니다.
todo CRUD 중 delete를 작업합니다.

작업할 내용

• todo 삭제

추가 내용

delete ux

todo는 '블로그 글 작성', '상세한 설정 값 입력' 처럼 실수로 삭제했을 때의 사용자의 분노를 부를 위험이 적은 기능이라고 생각합니다.
그래도 사용자가 직접 텍스트를 입력해서 만든 항목이니 만큼 실수로 삭제하게 되는 UX는 피하고 싶고, 반대로 작은 투두를 위해서 번거롭게 삭제하는 UX도 피하고 싶습니다.

사용자의 실수를 방지하는 차원에서 삭제가 todo list 표면에 노출되는 대신 안쪽으로 기능을 숨기면서도 쉽게 삭제할 수 있도록 한다면 더 좋은 사용성을 만들 수 있을 것 같아서 함께 고민해보면 좋겠습니다!

1. 기존 디자인처럼 delete 버튼을 통해서 텍스트를 수정한다. (구현 쉬움 / 1depth에 삭제 기능 노출)
   • 장점: 구현 쉬움, 사용자가 삭제 기능이 어디있는지 바로 알 수 있음
   • 단점: 사용자가 실수로 누를 확률 높음, 실수 방지를 위해 모달 추가하면 안전하지만 번거로워짐
2. 왼쪽에서 오른쪽으로 밀어서 삭제한다.
   • 장점: 겉으로 기능을 노출하지 않으면서 한번의 동작으로 삭제 가능, 손가락이 왼쪽 => 오른쪽 이동해서 오른쪽 => 왼쪽 이동보다는 약간 더 어렵게 접근해야해서 실수할 확률 낮음
   • 단점: 구현 난이도 확인 필요, 설명이 없으면 사용자가 삭제 기능이 어디있는지 모를 수 있음
3. dots 버튼을 통해서 option menu가 나타나게 하고 option 중 삭제를 제거하게 한다.
   • 장점: 실수할 확률 별로 없음, 삭제 기능이 어디있는지 설명 없어도 찾을 수 있음
   • 단점: 삭제를 위해서는 무조건 메뉴 => 삭제의 두단계를 거쳐야해서 번거로울 수 있음

[mdgarden]

개인적으로 장기적으로는 2번 혹은 3번 같은 형태로 삭제 기능이 실행되는게 이상적이라고 생각하는데, 새로운 디자인의 코스트(dots를 어디다가 둘지, 밀었을 때 어떤식으로 이모티콘 등이 표시가 될지)가 필요하므로 우선 이번 이슈에서는 1번으로 개발을 진행하겠습니다.
2번, 3번의 구현 난이도도 같이 확인 후 기록 남기겠습니다!

[gygy7151]

@mdgarden 해당 기능 1번으로 개발 진행 대신 완료했습니다~😎

c.c @jayjeong8 @mdgarden