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

서론

11월 16일에 포스팅했던 습관 만들기 앱을 개선했다.

Sunny에게 앱을 보여줬는데, 페이지가 하나밖에 없는 게 불편하다는 피드백을 받았기 때문이다.

---

사용한 라이브러리

이전 버전과 다르지 않기 때문에 생략.

---

초안

개선할 홈 화면 초안

상단바 및 홈 페이지 디자인, 모달창 등에 대한 디자인을 간략하게 그려냈다.

---

주요 기능(개선점)

• 홈 페이지와 5개의 습관 페이지 생성.
• 홈 페이지 : 5개의 습관 페이지의 정보를 간략히 보여주고 해당 페이지로 이동 가능.
• 홈 페이지 최상단 사용자 이름 입력 및 반영.
• 토글링 가능한 상단바 생성.
• 각 프로젝트의 fail 카운트 2회 누적 시 fail 버튼이 붉은색으로 변경됨.
• 프로젝트 실패 시 alert 창이 아닌 간단한 modal 창이 뜨게끔 변경.
• Recoil 내부 모든 상태값 변경.

---

완성본

01

완성본

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

 

Let's make a habit

---

후기

 이전 버전의 아쉬운 부분을 많이 해결할 수 있어서 좋았다.

각각의 페이지나 변수를 동적으로 처리하는 것도 좋다고 느꼈지만

프로젝트 특성상 한 번에 6개 이상의 프로젝트를 할 경우는 없다고 판단했기에

사용자가 기본 5개의 아이템을 갖고 활용할 수 있도록 하였다.

 

 마지막으로 recoil을 다루며 배열과 객체의 deep copy와 관련해 많은 어려움이 있었고

그로 인해 큰 깨달음을 얻을 수 있었던 좋은 기회라고 생각한다.