일억모으기 (100M)

Next.js 16 기반 가계부 애플리케이션. 목표 금액을 설정하고 수입/지출/저축을 관리하며 자산 달성률을 추적합니다.

주요 기술 스택

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Database: Neon PostgreSQL
• ORM: Drizzle ORM
• Authentication: NextAuth.js
• State Management: Zustand
• Icons: Lucide React

시작하기

# 의존성 설치
bun install

# 개발 서버 시작
bun run dev

데이터베이스 스크립트

bun run db:generate   # 마이그레이션 파일 생성
bun run db:migrate    # 마이그레이션 실행
bun run db:push       # 스키마를 DB에 직접 푸시 (개발용)
bun run db:studio     # Drizzle Studio 실행 (DB GUI)
bun run db:seed       # 시드 데이터 삽입

프로젝트 구조

100m/
├── app/              # Next.js App Router
├── actions/          # DB 연결 API 로직 (Server Actions)
├── components/       # 재사용 가능한 컴포넌트
│   └── ui/           # shadcn/ui 기반 UI 컴포넌트
├── db/               # 데이터베이스 스키마 및 설정
│   ├── schema.ts     # Drizzle 스키마 정의
│   ├── index.ts      # DB 연결
│   └── seed.ts       # 시드 데이터
├── lib/              # 유틸리티 함수
│   └── validations/  # Zod 스키마 타입
└── stores/           # Zustand 스토어

IA (Information Architecture)

진입 플로우

1. 스플래시 - 로고 + 앱 이름 (1초)
2. 소셜 로그인 - Google / Kakao / Apple(선택)
3. 온보딩 (최초 진입 시)
   • Step 1: 목표 금액 설정 (기본값: 1억원)
   • Step 2: 초기 자금 입력
   • Step 3: 완료 후 홈 진입

탭 구조

탭	이름	설명
Tab 1	홈 (Home)	목표 달성률, 이번 달 요약, 월별 자산 추이 차트
Tab 2	가계부 (Transactions)	월별 캘린더 뷰, 일별 상세 바텀시트, 수입/지출 등록
Tab 3	자동화 (Automation)	고정 지출/저축 관리, 자동 반영
Tab 4	자산 (Assets)	자산 계좌 관리, 입출금 내역
Tab 5	더보기 (More)	분석 리포트, 목표 설정, 카테고리 편집, 다크모드

핵심 로직

순자산 계산

현금 = 초기자금 + 수입 - 지출 - 저축납입 + 저축해지
저축 = Σ(assets.balance)
순자산 = 현금 + 저축
달성률 = (순자산 / 목표금액) * 100

데이터 흐름

행동	transactions	assetTransactions	현금	저축	순자산
월급 300만	INCOME	-	+300만	-	+300만
커피 5천	EXPENSE	-	-5천	-	-5천
적금 50만	-	DEPOSIT	-50만	+50만	±0
적금 해지	-	WITHDRAW	+50만	-50만	±0
주식 수익	-	PROFIT	-	+10만	+10만

핵심 설계 결정

항목	결정	이유
목표	사용자당 1개 (DB 제약)	UI가 단일 목표 중심
저축	자산 이동으로 처리	순자산 = 현금 + 저축, 저축은 지출이 아님
부채	Phase 1에서 제외	MVP 집중
수입	transactions에 기록	일상 현금 흐름 통합 관리

화면 상세

Tab 1: 홈 (대시보드)

• 목표 달성 카드: 프로그레스 바 (0~100%), 현재 금액/목표 금액, 상세 계산식
• 이번 달 요약: 수입/지출/저축 3개 카드
• 월별 자산 추이: Line Chart (최근 6개월)

Tab 2: 가계부

• 상단 헤더: 월 이동 (< YYYY년 MM월 >), 수입/지출/잔액 요약
• 캘린더: 7열 그리드, 수입(파란 점)/지출(빨간 점) 표시, 날짜 탭 시 바텀시트 오픈
• 플로팅 버튼: 내역 등록 (기본 날짜: 오늘)
• 바텀시트 (일별 상세): 내역 리스트, 스와이프 삭제, 빈 상태 처리
• 내역 등록/수정: 수입/지출 탭, 금액(천 단위 콤마), 결제수단(카드/현금), 카테고리 그리드, 메모

Tab 3: 자동화

• 요약 카드: 월 고정 지출/저축 합계
• 섹션 리스트: 아코디언 형태 (고정 지출 / 고정 저축 / 기타)
• 자동 반영: 등록 시 다음 달부터 자동 생성 (크론잡), 수정 시 다음 달부터 적용, 삭제 시 생성 중단
• 고정 항목 등록: 타입 선택(지출/저축), 이름, 금액, 매월 N일, 카테고리/결제수단 또는 저축 계좌 선택

Tab 4: 자산

• 상단 요약: 총 자산 금액 (Σ assets.balance)
• 계좌 카드 리스트: 계좌명, 자산 타입 뱃지, 현재 잔액, 이율/수익률
• 자산 등록: 계좌명, 타입(예금/적금/주식/펀드/가상화폐/부동산/기타), 잔액, 금융기관, 아이콘/색상
• 자산 상세: 입출금 내역 리스트, "자동 입금" 뱃지, 스와이프 삭제
• 자산 거래 등록: 타입(입금/출금/수익/손실), 날짜, 금액, 메모

Tab 5: 더보기

• 분석 & 리포트: 월별 분석(카테고리 랭킹, 파이차트), 저축률 추이, 지출 vs 수입 비교, 목표 달성 예상일
• 목표 & 설정: 목표 금액, 초기 자금 설정
• 커스터마이징: 카테고리 편집, 다크모드 토글
• 기타: 앱 정보, 개인정보 처리방침, 로그아웃

월별 분석 리포트

• 카테고리별 지출 분석: 랭킹 리스트 + Pie/Bar Chart
• 저축률 추이: 이번 달 저축률, 3개월 평균, Line Chart (6개월)
• 목표 달성 예상일: 예상 개월 수 = 남은 금액 / 최근 3개월 평균 월 저축액