← 갤러리로 돌아가기가계부데이터
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
지출 내역을 카테고리별로 기록하고, 차트 라이브러리 없이 직접 그린 막대 그래프로 월별 소비를 보여줘요.
기술 스택
Next.jsReactlocalStorage
핵심 구현 포인트
- 카테고리별 색상 매핑 객체 하나로 뱃지 색과 차트 색을 항상 통일해요.
- 월별 합계는 날짜 문자열을 슬라이스해서 그룹핑해요 (별도 날짜 라이브러리 불필요).
- 막대 차트는 퍼센트 너비의 div로 직접 그려요.
이렇게 만들면 돼요
- 지출 입력 폼 → localStorage 배열에 항목을 추가해요.
- 월(YYYY-MM) 기준으로 reduce해서 카테고리별 합계를 구해요.
- 합계를 퍼센트로 환산해 막대 길이에 반영해요.
참고 파일
components/gallery/ExpenseTrackerDemo.jsx