[#147] feat: 지원 종료 예상 자산 시뮬레이션 화면 구현

[gyak]

closes: #147

제목

feat: 지원 종료 예상 자산 시뮬레이션 화면 구현

작업 내용

지원 종료 예상 자산 계산

• 기존 /api/asset-forecast 응답을 확장했습니다.
• 현재 자산을 다음 항목으로 구분해 집계합니다.
  • 현금성 자산: 활성 DEPOSIT 계좌
  • 적금·투자 자산: 활성 SAVINGS, INVESTMENT 계좌
  • 주거 보증금: HousingCost.deposit
• 최근 완료된 3개월의 수입과 지출을 현재 고정수입 기준으로 보정합니다.
• 최근 3개월의 적금·투자 실제 납입액으로 월평균 납입액을 계산합니다.
• 수입이 0원인 월은 보정 순수익 평균에서 제외합니다.
• 투자 자산의 미래 수익률은 반영하지 않습니다.

자산 소진 시뮬레이션

• 월간 예상 순수익이 음수일 때 월 단위로 자산을 차감합니다.
• 자산 차감 순서는 다음과 같습니다.
  1. 현금성 자산
  2. 적금·투자 자산
  3. 주거 보증금
• 각 자산 잔액은 최소 0원으로 제한합니다.
• 모든 자산이 소진된 이후의 부족액은 별도로 누적합니다.
• 다음 소진 예상 시점을 API 응답에 추가했습니다.
  • 현금성 자산 소진 시점
  • 적금·투자 포함 유동자산 소진 시점
  • 주거 보증금 소진 시점
• 지원 종료 시 누적 부족액이 있으면 예상 순자산을 음수로 제공합니다.

예상 자산 상세 화면

• /asset-forecast 경로를 추가했습니다.
• 기존 AppTopBar, AppBottomNav, API client와 formatter를 재사용했습니다.
• 상세 화면에 다음 내용을 표시합니다.
  • 지원 종료 시 예상 순자산
  • 지원 종료까지 남은 개월
  • 예상 자산 구성
  • 현재 총자산과 예상 자산 비교
  • 적금·투자 자산 변화
  • 자산의 유동성 및 성격
  • 계산 기준과 예상값 안내
• 로딩, 오류, 재시도 및 데이터 부족 상태를 추가했습니다.
• 외부 차트 라이브러리 없이 CSS로 자산 구성 바를 구현했습니다.

자산 소진 상태 UI

• 예상 자산이 음수이면 빨간색으로 표시합니다.
• 0원으로 표시되는 자산 금액은 빨간색으로 표시합니다.
• 지원 종료 시 잔액이 0원인 자산은 금액 대신 다음과 같이 표시합니다.
  • 소진까지 N개월
  • 소진 시점을 계산할 수 없으면 소진됨
• 모든 자산이 소진되는 경우 자산 구성 비율 바를 소진 타임라인으로 전환합니다.
• 소진되는 자산에만 웜톤 색상을 적용합니다.
  • 현금성 자산: 노란색
  • 적금·투자: 주황색
  • 주거 보증금: 코랄색
  • 모든 자산 소진 이후: 진한 빨간색
• 잔액이 남아 있는 자산은 기존 파랑·청록·초록 색상을 유지합니다.
• 별도의 자산 소진 가능성을 확인하세요 카드는 제거했습니다.

홈 화면 연동

• 홈의 예상 자산을 me.initialAsset 대신 /api/asset-forecast 결과로 표시합니다.
• 예상 자산 자세히 보러가기를 접근 가능한 RouterLink로 변경했습니다.
• 클릭하면 /asset-forecast 상세 화면으로 이동합니다.
• 예상 자산 API가 실패해도 홈의 나머지 정보는 정상적으로 표시됩니다.
• 예상 순자산이 0원 이하이면 홈 카드에서도 빨간색으로 표시합니다.

데모 데이터

• user1의 6월과 7월 수입·지출 데이터를 추가했습니다.
• 현재 월별 데이터는 다음과 같습니다.

월	수입	지출
6월	1,200,000원	2,200,000원
7월	1,000,000원	900,000원
8월	1,700,000원	기존 거래 합계

• 7월 지출은 계좌 지출 750,000원과 카드 지출 150,000원의 합계입니다.
• 기존 생활비 거래는 OTHER로 변경해 지출 집계에서 제외했습니다.
• 고정 거래 ID와 ON DUPLICATE KEY UPDATE 구조를 유지해 멱등성을 보장합니다.

포켓 아이콘

• 필수 포켓 아이콘을 기존 집 아이콘으로 변경했습니다.
• 비상금 포켓 아이콘을 굵은 저금통 아이콘으로 변경했습니다.
• 기존 AppIcon SVG 마스크 방식을 재사용했습니다.
• 새로운 아이콘 라이브러리는 추가하지 않았습니다.

주요 API 응답 필드

• currentTotalAsset
• currentCashAsset
• currentSavingInvestmentAsset
• currentHousingDeposit
• forecastTotalAsset
• forecastNetAsset
• forecastShortageAmount
• forecastCashAsset
• forecastSavingInvestmentAsset
• forecastHousingDeposit
• monthlyConvertedNetIncome
• averageMonthlySavingInvestment
• totalAssetChange
• savingInvestmentChange
• cashDepletionMonth
• liquidAssetDepletionMonth
• housingDepositDepletionMonth
• cashRatio
• savingInvestmentRatio
• housingDepositRatio
• calculationBasis
• dataSufficient

테스트

• 프론트엔드 npm run build
• 프론트엔드 TypeScript 검사
• 변경 파일 ESLint 검사
• 백엔드 compileJava
• 백엔드 전체 테스트
• Spring 컨텍스트 및 data.sql 초기화 테스트
• SVG 문법 검사
• git diff --check

참고 사항

• 화면에 표시되는 예상 금액은 확정 금액이 아닙니다.
• 최근 금융 흐름이 지원 종료 시점까지 유지된다고 가정합니다.
• 투자 자산의 미래 시장 수익률은 반영하지 않습니다.
• 신규 차트, UI, 상태관리 라이브러리를 추가하지 않았습니다.