투자 일지 — 토스 미니앱

토스(Toss) 앱 내 미니앱으로 출시된 투자 가계부. 백엔드/DB 없이 토스 WebView 네이티브 Storage API만으로 데이터를 영구 저장합니다.

스크린샷

     

주요 기능

📅 캘린더

• 월간 달력에서 날짜별 투자 내역을 한눈에 확인
• 날짜 클릭 시 해당 일의 투자 목록 조회 및 신규 투자 추가
• 월 총 투자금액 상단 표시

📋 투자 내역

• 전체 투자 내역 목록 조회 (종목명, 카테고리, 메모 검색 지원)
• 월별 그룹핑 및 월 합계 표시
• 반복 설정에서 자동 생성된 내역 배지 표시

📊 월간 요약

• 총 투자 금액 및 투자 건수 카드
• 일별 투자 BarChart
• 카테고리별 투자 비중 PieChart

🔄 반복 투자 설정

• 매월 고정 투자 항목 등록 (종목명, 금액, 날짜, 카테고리)
• 활성화/비활성화 토글
• "이번 달 생성" 버튼으로 반복 설정 기반 투자 내역 일괄 생성
• 중복 생성 방지 (recurringId + date 조합 체크)

기술 스택

구분	기술
프레임워크	React 19 + TypeScript
빌드 도구	Vite
상태 관리	Zustand
스타일링	TailwindCSS v4
차트	Recharts
날짜 처리	dayjs
스토리지	토스 WebView window.Storage → localStorage fallback

아키텍처

src/
├── constants/
│   ├── storageKeys.ts         # Storage 키 상수
│   └── category.ts            # 카테고리 색상/이모지
├── types/index.ts             # 도메인 타입 (Investment, RecurringSetting 등)
├── utils/
│   ├── format.ts              # 금액/날짜 포맷 유틸
│   └── calendar.ts            # 달력 날짜 계산 유틸
├── services/webviewStorage.ts # Storage 추상화 싱글톤
├── store/
│   ├── investmentStore.ts     # 투자 내역 CRUD + 월간 요약
│   └── recurringStore.ts      # 반복 설정 + 이번 달 생성 로직
├── hooks/useAppInit.ts        # 앱 초기화 (두 스토어 로드)
└── components/
    ├── common/                # BottomSheet, Modal
    ├── layout/TabBar.tsx      # 하단 탭 네비게이션
    ├── calendar/              # CalendarView, CalendarDayCell
    ├── investment/            # InvestmentBottomSheet, InvestmentForm, InvestmentItem
    ├── summary/               # MonthlySummaryView, CategoryPieChart, DailyBarChart
    └── recurring/             # RecurringView, RecurringForm

Storage 레이어

storage 싱글톤을 통해서만 데이터를 저장/로드하며, 토스 WebView 환경에서는 window.Storage API를, 브라우저 환경에서는 localStorage를 자동으로 사용합니다. 모든 Zustand 액션은 상태 변경 즉시 Storage에 자동 동기화됩니다.

로컬 실행

npm install

# 브라우저에서 단독 실행
npm run dev:vite

# 타입 체크
npx tsc --noEmit