추석 연휴 기간에 만들고자 목표를 잡았던 todo list!
다행히 연휴 기간 안에 완성할 수 있었다. 내가 기획한 첫 프로젝트인만큼 첫 과정부터 기록을 해보고자 한다.

1. 기술스택

프론트엔드 : JavaScript, React, CSS

2. 디자인 및 기능

1. 첫 디자인

1) timetable
고등학교 때 모트모트 플래너를 잘 썼던 터라 그런 기능은 웹으로도 쓸 수 있으면 좋겠다라는 생각이 들었다.
그래서 왼쪽에는 시간별로 할 일을 체크할 수 있는 timetable을 놓았다.
2) todo list
todolist는 카테고리별로 분류할 수 있도록 하였고 각 카테고리의 달성률을 %로 표현할 수 있도록 했다.
3) Daily 드롭 바
daily 버튼을 누르면 weekly, monthly 페이지로 넘어갈 수 있는 드롭다운이 나타난다.
4) 다크모드, 마이페이지

2. 수정된 디자인

1) 날짜와 요일을 넣었다.
2) 타임테이블 수정
타임테이블을 어떻게 구현할지 고민이 되어 드롭다운 형식으로 구현하기로 했다.
category 목록에 할 일의 종류를 적어 넣으면 아래 timetable의 카테고리에 내가 적은 단어가 나타나도록 한다.

3. 완성된 디자인

다른 데서는 큰 차이가 없고 분홍색만 검은색으로 바꾸어 조금 더 깔끔한 느낌으로 만들었다.

3. 배운 것들

1. figma 툴 사용법
   따로 디자이너가 없다 보니 내가 디자인을 기획하게 되었고, 이 기회에 figma를 배워보자! 해서 디자인 계획을 figma를 통해서 작성했다. -> 확실히 피그마를 보고 작업을 하니까 훨씬 편했다!
2. 리액트 복습
   리액트를 한 번 공부했지만 프로젝트를 하면서 개념에서 부족한 점이 많다는 것을 닫고 노마드 코더 강의를 한번 더 보고 리액트에 대한 이해를 깨우칠 수 있었다. (강의 들은 것은 벨로그에 정리)
3. 완료 개수 세기
   굉장히 많은 시간이 걸렸다... 그 과정은 벨로그에 작성해두었다.
   어떻게 해결을 했냐면, 다른 문제를 해결하려고 코드를 ChatGPT에 올렸는데 내가 이상하게 써 놓은 완료 개수 세는 코드를 보고 고쳐줬다..!!!!
   오예
4. 드롭다운 구현하기
   daily 드롭다운은 매우 쉽게 구현했는데, timetable에 시간 입력하는 드롭다운은 좀 어렵게 구현했다. 그 코드는 -> 이 벨로그 참고
5. 다크모드 구현
   styled-component의 개념을 새로 알게 되었다.
6. 깃허브 수정사항 push하는 방법
   -> 벨로그에 올려놓음
7. todolist 완료기능 오류
   완료를 하는 방법은 완료를 선택한 todo와 todo:id가 같으면 완료 처리를 하는 걸로 했다. 여기서 todo의 id를 todos.length로 부여했기 때문에 고유한 값이 지정되지 않았다..!! 그래서 엉뚱한 값이 체크되는 문제가 생긴 것이다. 그래서 id에 난수를 지정해서 고유한 값을 부여하였고 오류는 해결되었다.

4. 개선할 부분

1. 시간 드롭다운, 카테고리 -> 새로고침해도 저장될 수 있도록
2. 투두리스트 수정 기능
3. monthly, weekly 페이지도 만들기
4. 사용자 입력을 받는 할 일 1, 2, 3 → 할 일을 수정해서 입력할 때마다 새로 제출되는 것이 아니라 이전 것이 수정되는 프로세스로

++깃허브로 사이트 배포해서 깃허브에 주소 올리기