Skip to content

HabitHive/front-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🐇 HabitRabbit ✨


해빗래빗은 습관을 일정으로 등록해 관리할 수 있는 서비스 입니다 !

Untitled


🐇 프로젝트 소개

해빗래빗은 나의 관심사를 기반으로 나에게 필요한 습관을 추천해줍니다.

습관을 구매하고 일정으로 등록해보세요 !

등록한 일정대로 해야 할 일을 완수하면 쏟아지는 포인트 !

기간 내 매일 일정을 달성하여 추가 포인트도 받아가세요~

모인 포인트로 나의 펫을 성장시키세요 🐰!

🛠️ 서비스 아키텍처

architecture

💻 FE 기술 스택

🔧 기술적 의사결정

Axios wide browser 지원, XSRF Protection 보안, 자동 JSON 데이터 변환 지원과 Intercept 가능

Redux Toolkit 로그인 상태 및 데이터 전역관리 필요. 단순한 Boilerplate와 redux-thunk 사용을 위해 선택.

styled-components 조건부 스타일링과 CSS 모듈화를 위해 선택.

🐇 주요 기능

✅ 형성하고자 하는 습관을 구매

buyPoint2


✅ 구매한 습관을 캘린더에 일정으로 등록

mainDaily


✅ 등록한 일정대로 완수하면 포인트 지급

point


✅ 지급받은 포인트로 다른 습관들 구매

buy


✅ 모인 포인트로 나의 펫 성장 시키기

pet


📌트러블 슈팅

  • 전역상태관리 적용

    문제 상황 마운트 할 때 useEffect로 불러오는 데이터를 map함수로 처리하는데 error 가 발생했습니다.
    발생 이유 비동기 호출에서 데이터 흐름에 의한 에러인 것으로 예상
    해결 방안 1. 데이터가 호출될 때까지 로딩화면 적용 2. redux-thunk와 옵셔널 체이닝 이용
    의견 결정 mvp 이후에 프로젝트 확장 가능성과 전역상태관리의 필요성을 고려하여 redux-toolkit을 도입하는 계기가 되었습니다.
  • UX 개선

    문제 상황 pet 페이지 마운트 시 깜빡임 현상
    발생 이유 게이미피케이션으로 인해 이미지파일(gif)이 큰 용량을 차지하고 있고, 이로 인해 랜더링 속도가 제한된 것으로 예상
    해결 방안 1. 이미지 리사이징 2. 로딩화면 추가
    의견 결정 뷰포트가 작은 화면에서도 gif 파일이 거의 동일한 크기를 가지고 있으며 여전히 깜빡임을 완전히 해결할 수 없다고 판단하여 로딩 화면을 적용하였습니다.

👥 팀원

이름 분담 기술 블로그
김현지 메인-데일리 페이지, 먼슬리 페이지, 습관 추가 페이지, 수정/삭제 페이지 https://puringles.tistory.com
이지수 로그인·회원가입 페이지, 온보딩페이지, 관심사선택페이지, 구매페이지, 마이페이지, 펫페이지 https://velog.io/@jisu2281l