[React] 66일 프로젝트 ( 습관 만들기 앱 )

공부의 신 강성태 선생님은 66일 동안 같은 일을 반복하다 보면 그 일은 습관이 된다고 했다.

나는 그 말에 영감을 얻어 이번 프로젝트를 진행하게 되었다.

해당 프로젝트는 데스크탑 환경에선 쓸 일이 없을 것 같았기 때문에 화면 비율을 모바일 기준으로만 사용 가능하도록 했다. 

---

사용한 라이브러리

• react-hook-form
• recoil, recoil-persist
• styled-components
• react-icons
• gh-pages

---

초안

프로젝트 초안

 

초안은 최대한 해당 섹션의 기능을 중심적으로 표현할 수 있게끔 만들었다.

---

주요 기능

• 타이틀( 습관 ), 성공시 보상, 실패 시 페널티 제출 및 수정 기능
• 진행상황 섹션( 프로그래스 바, 카운트, 퍼센트 )
• 시작일 제출시 자동으로 완료일 및 각 일차별 날짜 제공
• 성공 or 실패 체크 리스트
• 실패 3회 누적 시 프로젝트 실패로 간주. 자동 리셋.
• 리셋 버튼 및 미스클릭 방지를 위한 모달창 활성화

---

완성본

012

완성본 이미지

https://mediumryan.github.io/66days/

Let's make a habit

---

후기

일차별 리스트에 표시된 날짜 데이터에 문제가 생긴 것 같다.

시간 날 때 수정을 해둬야겠다. (수정함)

 

프로젝트를 시작하면 66일 동안 하나의 프로젝트만 진행해야 하는 단점이 있다.

현재 진행 중인 프로젝트가 끝나면 이 점도 개선해보고 싶다.

 

실패 카운트가 3회 누적될 경우 아무런 설명이나 알림 없이 프로젝트가 리셋된다.

추가 설명이나 alert, modal과 같은 방법으로 사용자에게 나쁜 경험을 줄이는 것이 좋아 보인다.