bandmate 개발기록

Ethan·2026년 1월 22일

1/21
PWA 아이콘과 푸시 알림 배지 수정 작업이 완료후 배포

수정된 내용:

iOS PWA 지원 강화 (index.html):
- apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style
  메타 태그 추가
- 다양한 크기의 apple-touch-icon 링크 추가
- 모든 iPhone/iPad 기기 크기에 맞는 스플래시 화면 링크 추가
푸시 알림 배지 (firebase-messaging-sw.js):
- 배지 아이콘을 /badge-72x72.png로 변경
매니페스트 아이콘 (manifest.webmanifest):
- maskable 아이콘, apple touch icon, badge 아이콘 추가
Cloud Functions FCM 설정 (functions/src/index.ts):
- webpush, android, apns 플랫폼별 알림 설정 추가
- 각 플랫폼에 맞는 배지, 아이콘, 사운드 설정

테스트 방법:
iOS에서 테스트:
- Safari에서 사이트 열기
- "홈 화면에 추가" 실행
- 새로 추가된 앱 아이콘 확인
- 앱 실행 시 스플래시 화면 확인
- 푸시 알림 수신 시 배지 확인
Android에서 테스트:
- Chrome에서 사이트 열기
- PWA 설치 또는 홈 화면에 추가
- 푸시 알림 수신 시 배지 확인
참고사항:

개발 회고록: RSVP와 출석 관리 시스템의 분리 및 고도화

날짜: 2026년 1월 22일

오늘의 주요 업데이트는 밴드 운영의 핵심인 '참석 파악' 로직을 한 단계 더 발전시킨 것 이다. 이전까지는 모호하게 관리되었을 수 있는 '참석 의사'와 '실제 현장 출석'을 분리하여, 데이터의 신뢰도를 높이고 관리자의 운영 부담을 줄이는 데 집중했다.

RSVP, 출석확인 분리, 관리자 출석확인, 참석희망자 페이지 제작

목적: 일정 시작 전, 부원들의 상태(참석, 지각, 불참)를 미리 파악하여 합주나 공연 준비에 활용.
기술 포인트:
- rsvps 컬렉션 도입을 통해 '예정 데이터'를 별도로 관리.
- 미응답자(Unknown) 카운팅 로직을 추가하여 관리자가 부원들의 참여를 독려할 수 있는 근거 제공.
- 오늘 이후의 일정만 필터링하여 보여주는 효율적인 데이터 핸들링.

목적: 실제 현장에서 매니저가 부원들의 출석 상태를 실시간으로 기록.
기술 포인트:
- attendances 컬렉션을 활용한 기록 시스템.
- 사용자 경험(UX)을 고려하여 '버튼 클릭'만으로 즉시 상태를 전환하는 직관적 인터페이스 구현.
- 중복 데이터 방지를 위한 문서 ID 전략(예: scheduleId_userId) 활용.

타입 안전성: types/index.ts에 정의된 AttendanceStatus와 UserRole을 적극적으로 활용하여 코드 전반의 안정성을 확보했다.
명확한 책임 분리: RSVP와 실제 출석을 분리한 것은 데이터 모델링 측면에서 매우 훌륭한 결정이다. 이는 추후 '출석률 통계'를 낼 때 "참석한다고 하고 안 온 사람"과 같은 정교한 분석을 가능하게 한다.
PWA 최적화: 모바일 웹 환경에서 쉽게 조작할 수 있도록 카드 형태의 UI와 큰 버튼을 배치한 점이 인상적이다.

코드 중복 (DRY 원칙): RsvpManagePage와 AttendanceManagePage를 보면 일정 목록을 불러오고 멤버 리스트를 렌더링하는 로직이 거의 동일하다.
- Action: useFetchSchedules, useFetchMembers와 같은 Custom Hook을 만들어 로직을 공용화할 필요가 있다.
에러 핸들링: Firestore에 데이터를 쓰는 과정에서 발생할 수 있는 네트워크 오류 등에 대한 대응이 아직 부족하다.
- Action: try-catch 블록과 연동된 Toast 알림을 통해 사용자에게 작업 성공/실패 여부를 명확히 알려주어야 한다.