← 갤러리로 돌아가기생산성습관
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
습관별 체크 현황을 날짜 맵으로 저장하고, 오늘부터 거꾸로 훑어 연속 기록을 계산해요.
기술 스택
Next.jsReactlocalStorage
핵심 구현 포인트
- 체크 여부를 { habitId: { "YYYY-MM-DD": true } } 형태로 저장해 스트릭 계산이 쉬워요.
- 스트릭은 오늘부터 하루씩 거슬러 올라가며 끊기는 지점까지 카운트해요.
이렇게 만들면 돼요
- 습관 목록 CRUD를 먼저 만들어요.
- 오늘 날짜 체크 토글 기능을 붙여요.
- 체크 맵을 순회하는 스트릭 계산 함수를 작성해요.
참고 파일
components/gallery/HabitTrackerDemo.jsx