월급 배터리 🔋

당신의 월급, 배터리처럼 분석해 드립니다. 며칠째에 방전되나요?

모바일 전용 웹앱. 월 실수령액과 지출 항목을 슬라이더로 입력하면, 30일 방전 곡선과 위험 구간을 보여줍니다.

라이브: https://salary-battery.vercel.app

이게 뭔가요

• 패턴 발견 도구입니다. 재무 상담이나 성격 유형 테스트가 아닙니다.
• 모든 숫자에 "대략", "약", "쯤" 같은 근사 표현이 붙어 있어요. 정확한 진단이 아니라 시뮬레이션이니까요.
• AI API 호출은 하지 않아요. 전부 클라이언트에서 계산됩니다.
• 다크 모드 전용, 390px 모바일 기준으로 설계되었습니다.

흐름 (D1 → D6)

1. D1 약속 — 배터리가 100%에서 0%로 떨어지는 애니메이션 + 시작 CTA
2. D2 입력 — 슬라이더 5개 (월 실수령액 / 고정지출 / 식비 / 교통비 / 예상 못한 지출)
3. D3 계산 중 — 3.5초 방전 애니메이션 + "분석 중..." 문구
4. D4 리포트 — 30일 방전 곡선 차트 + 위험 구간 진입일 + 최대 방전 구간 + 고정지출 비율
5. D5 연결 — 배터리 과학 은유로 내 패턴 해석 (8개 템플릿 중 자동 선택)
6. D6 공유 — PNG 리포트 저장 / 링크 복사 / 인스타 스토리 공유

기술 스택

• Next.js 16 (App Router) + React 19 + TypeScript strict
• Tailwind CSS v4 (@theme 기반 토큰)
• Recharts — 방전 곡선 차트
• Framer Motion — 페이즈 전환 + 배터리 애니메이션
• html-to-image — 공유 카드 PNG 변환 (Pretendard 한글 렌더링 때문에 html2canvas 대신 선택)
• Vercel Analytics
• Pretendard Variable 웹폰트

로컬 실행

npm install
npm run dev

http://localhost:3000 에서 확인.

계산 로직 요약

src/lib/compute-discharge.ts:

• 입력: 월 실수령액, 고정지출, 식비, 교통비, 예상 못한 지출 (단위: 만원)
• 고정지출은 첫 3일 동안 일일 균등 분할로 빠져나가는 것으로 가정
• 변동지출 (식비 + 교통비 + 예상 못한 지출)은 30일 균등 분할
• 두 항목이 동시에 작동하며, 0% 미만은 클램프

반환값:

• curve: 31개 포인트 (day 0~30)
• criticalDay: 잔액 20% 이하로 처음 진입하는 날 (없으면 null)
• fastA, fastB: 가장 가파른 하강 구간의 시작/끝 일자
• fixedPct: 월 실수령액 대비 고정지출 비율 (%)
• dead: 월 내에 0%에 닿으면 true

디자인 원칙 (절대 어기지 마세요)

• 출력은 데이터 (숫자, 차트, 퍼센트). 성격 유형이나 라벨 금지.
• 금지어: "당신은 ~한 사람", "~유형"
• 숫자에는 항상 근사 표현: "대략", "약", "쯤"
• 리포트 화면에 면책 문구 필수: "이 분석은 대략적인 시뮬레이션이며, 정확한 재무 진단이 아닙니다"
• 다크 모드 고정. #000 / #39FF14 / #FF3B30
• 한국어 UI, 영어 코드 주석

파일 구조

src/
  app/
    page.tsx                   페이즈 리듀서 + AnimatePresence 스위처
    layout.tsx                 메타 + Analytics
    globals.css                Tailwind + 슬라이더 스타일
  components/
    phase-promise.tsx          D1
    phase-input.tsx            D2
    phase-computing.tsx        D3
    phase-report.tsx           D4
    phase-connection.tsx       D5
    phase-export.tsx           D6 (PNG / 링크 / 인스타)
    discharge-chart.tsx        dynamic() 래퍼 (SSR off)
    discharge-chart-inner.tsx  Recharts AreaChart
    battery-icon.tsx           수평 배터리 SVG
    big-battery.tsx            수직 배터리 게이지
    salary-slider.tsx          네이티브 range + 네온 그린 트랙
    stat-card.tsx              리포트 통계 타일
  lib/
    compute-discharge.ts       방전 곡선 계산
    connection-templates.ts    D5 템플릿 8개 + pickTemplate
    types.ts                   공유 타입

배포

Vercel에 연결되어 있습니다.

vercel deploy           # 프리뷰
vercel deploy --prod    # 프로덕션