[sumin0423]

📖 개요

수입·입금 현황 화면, 공통 상단 알림 배너, 하단 탭 SVG 아이콘을 구현했습니다. 작업은 수입 현황·알림 배너·탭 아이콘 파트별 커밋으로 분리했습니다.

✅ 변경 사항

수입·입금 현황

• 기존 수입 탭을 월 교육비·입금·미수금 요약 및 학생별 청구 카드로 교체
• 입금 대기·일부 입금·입금완료 구분, 학부모의 입금 알림과 실제 입금 금액 분리
• 스켈레톤 로딩, 빈 목록, 오류 재시도 및 개발 전용 데이터 제공
• production에서는 API 연결 전 준비 중 안내를 표시하여 예시 금액 노출 방지

공통 상단 알림 배너

• 시안의 아이콘·배치·그림자 적용, Safe Area 아래 상단 오버레이
• 공통 PushBanner 및 usePushBanner 표시·닫기 API와 루트 Provider 추가
• 탭 시 콜백 실행, 자동 닫기, 순차 알림 및 동일 ID 갱신
• 긴 문구 줄임 처리, 접근성 닫기 동작, 타이머·구독 정리

하단 탭 아이콘

• 빈 아이콘 영역을 홈·일정·학생·리포트·수입 SVG로 교체
• 선택한 아이콘과 글자는 파란색, 비선택 상태는 회색으로 표시
• 활성 SVG는 회색 면만 변경하여 시계·리포트·통화 내부 흰색 디테일 보존
• 기존 탭 이동 및 tabPress 이벤트 유지

🧪 검증

• 타입·린트·포맷 검사 및 웹 배포 빌드 통과
• 수입 정상·스켈레톤·빈 목록·오류 재시도, 집계 금액·학생별 상태 및 부모 입금 알림 구분 확인
• 배너 위치·탭 콜백·자동 닫기·순차 표시·긴 문구 확인
• 탭 5개를 각각 눌러 활성/비활성 아이콘·텍스트 색상 전환 및 SVG 로딩 확인
• 320px 화면 가로 넘침 없음 및 브라우저 오류 없음 확인
• 수입·배너 구현 시 iOS·Android 번들 생성 성공. 하단 아이콘 추가 후에는 타입·린트·웹 빌드·브라우저로 검증
• 실제 모바일 기기·시뮬레이터 실행 및 실제 푸시 수신은 미검증

🖼️ 스크린샷

알림 배너:

수입 현황 및 선택된 하단 탭:

🔗 관련 Issue

연결된 이슈 없음.

📂 영향 범위

• src/features/income, 수입 탭 및 개발 미리보기
• src/components/PushBanner.tsx, src/features/notifications, 루트 레이아웃
• src/features/main/MainTabBar.tsx, 하단 탭 아이콘 에셋
• 구현 설명 문서 및 화면 캡처

확인 경로:

• /dev/income, ?state=loading, ?state=empty, ?state=error
• /dev/push-banner

🙋 리뷰 요청 사항

• 수입 카드 및 상태별 시안 일치 여부
• 학부모 입금 신고를 실제 입금 확인과 분리한 표시
• 공통 배너의 큐·자동 닫기·콜백 연결 방식
• 하단 탭 아이콘 매핑 및 선택 색상

⚠️ 주의 사항

• 수입 조회·은행 확인·입금 수정·예약 알림 전송 API는 미연결입니다.
• 빈 화면 SVG에도 월 요약 금액이 있어 해당 미리보기는 이를 유지합니다. 실제 API 연동 시 집계와 목록의 조회 범위·정합성을 확인해야 합니다.
• 상단 배너는 인앱 UI이며 FCM·APNs·Web Push·권한 요청·백그라운드/잠금화면 수신 기능을 포함하지 않습니다. 수업 종료 알림도 자동 생성하지 않습니다.
• 배너 미리보기는 동작 확인용 개발 화면입니다. 실제 서비스에는 테스트 버튼을 노출하지 않습니다.
• 개발용 수입 진입점은 메모리의 미리보기 프로필로 기존 탭에 진입하며 production에서는 이 동작을 허용하지 않습니다.
• 알림 배너 작업은 개발 중 수입 브랜치에서 분기해 수입 커밋도 이번 PR에 포함했습니다. 별도 수입 PR은 생성하지 않았습니다.