[ Project ] todoList 구현하기 #4

 

 

 

안녕하세요✨

오늘은 todoList앱을 만든지 딱 일주일이 되었어요!

어디까지 진행되었는지 진행 상황을 공유해보려고 합니다~!

 

 

MainBoard는 이렇게 구현이 되어있습니다!

 

Calender화면과 TodoList화면 탭바로 구현

 

하루의 todoList를 끝냈다면, 그 날의 캘린더에는 완료 아이콘이 들어갈 예정이에요! 또한 캘린더에서 3월 5일을 클릭할 시 todoList의 3월 5일로 넘어가도록 구현해보려고 합니다! 그 부분은 내일 구현을 완료해볼까합니다~!

 

TodoList 구현

 

완료 항목 체크리스트

 

체크 버튼을 누르게 되면 해당 열의 취소선이 그이게 되고, 체크표시가 활성화 됩니다.

생각보다 취소선 구현이 까다로웠어요..! 또한 화면을 로딩할 때마다 취소선이 고정이 되어있어야해서 화면을 새로 그릴때마다 데이터의 체크 유무를 확인해 UI를 그려야 했습니다.

 

 

todo 항목 Add 기능

왼쪽 상단의 + 버튼을 누르게 되면 아래에서 위로 to do를 추가할 수 있는 새로운 창이 열립니다. 원래 Edit 버튼을 누르면 Add 버튼이 왼쪽 상단에 보이게끔 위치를 하였는데, 좀 더 편하게 todo리스트를 추가할 수 있도록 Edit 의 옆으로 옮겼어요!

 

Error 얼럿창 구현

 

Add To Do 화면에서 title을 입력하지 않고 확인버튼을 클릭했을 경우 title이 입력되지 않았다는 경고 얼럿창이 뜹니다.

 

 

Date와 Category 설정

 

Add To Do 화면에서 Picker View를 이용해 Date와 Category를 선택할 수 있어요! Category는 12가지로 카테고리에 따라 색상이 다르게 나타납니다. 처음 사용해보는 Picker View라 처음엔 헤매었지만, TableView와 비슷한 구조를 가진 델리게이트 구조라 함수의 용도만 알아내니 충분히 사용할 수 있었습니다.

위는 Category 색상에 따른 카테고리 항목이에요! 시간이 남는다면, 사용자가 해당 카테고리의 이름도 변경하게끔 구현해보고 싶네요! 또한 cell에 카테고리 이름이 작게나마 보이는게 좋을 것 같아요! 그 부분도 구현 예정으로 넣어두겠습니다.

 

 

Edit To Do 구현

편집하고 싶은 cell을 클릭시 Edit To Do 화면이 표시됩니다. 데이터가 이미 저장되어있을 경우에 title 제목을 변경하고, 저장되어있는 값을 대입하여 수정할 수 있도록 구현하였습니다.

 

제목을 수정하는 장면이에요!

Category 항목을 수정하는 장면입니다!

 

여기서 이상한 점이 보이시죠?! 확인을 누르고 화면 이동을 했을 때 데이터가 바로 반영되지 않고 다른 화면으로 넘어갔다가 와야 구현이 되네요! 이 부분은 구현을 했는데, 어딘가 잘못 코드를 짠 것인지 오류가 나네요! 해결해야할 숙제입니다!

 

또한 cell을 눌렀을 때 수정모드로 가면 사용자가 잘못 눌러 불편함을 겪을 수도 있겠다는 생각이 드네요! 셀의 오른쪽에 버튼을 생성해 수정 화면이 올라오도록 바꾸어야 겠습니다!

 

 

Editting 모드에서의 cell 삭제

 

원래 Editting 모드에서의 셀 이동은 오류를 해결하지 못하여 기능을 빼둔 상태입니다. 현재는 삭제 기능만 두었어요! 삭제는 Editting 모드가 아닐 때도 좌로 스와이프하면 삭제 버튼이 나오더라구요! 테이블뷰에서 이미 구현되어있는 것인 것 같습니다.

 

 

날짜 이동 구현

 

화살표 버튼을 누르면 오늘 날짜의 앞뒤로 움직일 수 있습니다. 이동수에 제한은 없지만, 오늘의 날짜로 돌아오는 버튼이 있었으면 좋겠네요! 그것도 구현해봐야겠습니다!

 

이렇게 정리해보니 추가로 구현해야할 것들과 수정해야할 것들 고쳐야 되는 것들이 잘 보이는 것 같습니다!

그럼 이만 총총✨