플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - Firestore 보안 규칙과 Custom Claims를 동기화하여 역할별 데이터 접근을 일관되게 제어하는 구조 설계 - QR 결제 시뮬레이션에서 결제 요청→승인→잔액 차감을 원자적으로 처리하는 트랜잭션 플로우 구현 - 복합 필터(날짜+가맹점+금액)와 페이지네이션을 동시에 지원하는 Firestore 쿼리 구조 및 인덱스 설계 - 다중 역할(관리자/가맹점/사용자)에 따
프로젝트 성과
Firestore 트랜잭션 기반 결제 정합성 구조 설계
잔액 차감과 거래 기록 생성을 단일 Firestore 트랜잭션으로 처리하여 부분 실패 시 롤백이 보장되는 결제 흐름 구조를 구현할 예정입니다.
Firebase Custom Claims RBAC 구현
관리자·가맹점·사용자 3단계 역할을 Custom Claims로 설계하고, Firestore 보안 규칙과 React 라우터 가드가 동시에 작동하는 이중 접근 제어 구조를 구축할 예정입니다.
QR 코드 동적 생성 및 가맹점 식별 구조 설계
qrcode.js와 Canvas API를 결합하여 가맹점 ID와 결제 파라미터가 인코딩된 QR 이미지를 동적으로 생성하고, 스캔 시 결제 정보를 자동 파싱하는 구조를 구현할 예정입니다.
커서 기반 페이지네이션 거래 조회 구현
Firestore의 startAfter 커서 방식으로 대량 거래 내역을 점진적으로 로드하는 구조를 설계하여, 초기 로딩 없이 스크롤 기반 데이터 조회가 가능하도록 구현할 예정입니다.
실시간 잔액 동기화 구조 적용
Firestore onSnapshot 리스너를 React Context와 연결하여 결제 완료 즉시 전체 앱의 잔액 상태가 갱신되는 실시간 동기화 아키텍처를 구현할 예정입니다.
핵심 기능
대시보드 홈
로그인 후 첫 화면으로 잔액, 최근 거래, 빠른 결제 메뉴를 한눈에 확인할 수 있습니다. Firebase Auth로 사용자 세션을 관리하며, Firestore 실시간 리스너로 잔액·거래 데이터를 즉시 반영합니다.
진행 단계
Firebase 프로젝트 설계 및 보안 규칙 구성
2026.03.
Firestore 데이터 모델 설계, 컬렉션 구조 확정, 역할 기반 보안 규칙(Rules) 작성, Custom Claims 설정
프로젝트 상세
1) 포트폴리오 소개 본 프로젝트의 요구사항(잔액 조회, 가상 충전, QR 결제 시뮬레이션, 거래 내역, 가맹점 QR 생성, 관리자 페이지)을 기반으로 직접 구현한 맞춤 데모입니다. 프로젝트 착수 시 이 데모를 그대로 확장하여 빠르게 개발을 진행할 수 있습니다. 2) 작업 범위 - 대시보드 홈: 로그인 후 첫 화면으로 잔액, 최근 거래, 빠른 결제 메뉴를 한눈에 확인할 수 있습니다. - QR 결제:
