플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - JWT 만료 시각이 포함된 충전 QR 토큰 구조 설계 및 Edge Function에서의 서버 측 검증 로직 구현 - Supabase RLS 정책과 Materialized View를 결합하여 집계 데이터에 대한 역할별 접근 제어 구현 - React Query 캐시와 Supabase Realtime 이벤트를 동기화하여 실시간 잔액 갱신과 캐시 무효화를 일관되게 처리 -
프로젝트 성과
JWT 서명 기반 보안 충전 QR 토큰 구조 설계
충전 파라미터를 jose 라이브러리로 JWT 서명하고 5분 TTL 만료를 포함한 QR 토큰을 설계하여 재사용 및 위변조를 방지하는 충전 인증 구조를 구현할 예정입니다.
Supabase RLS + Materialized View 통합 관리 구조 구현
PostgreSQL Materialized View로 집계 연산을 DB 레이어에 위임하고 RLS 정책으로 관리자 전용 데이터 접근을 쿼리 레벨에서 보장하는 통합 보안 구조를 설계합니다.
React Query 무한 스크롤 + PostgREST 페이지네이션 연동
Supabase PostgREST range 헤더와 React Query useInfiniteQuery를 결합하여 대량 이용 내역을 스크롤 기반으로 점진적 로드하는 효율적 데이터 패칭 구조를 구현할 예정입니다.
Supabase Realtime 잔액 실시간 동기화 구조 적용
Supabase Realtime channel을 React Context와 연결하여 충전 완료 이벤트 발생 시 전체 앱의 잔액 상태가 즉시 갱신되는 이벤트 기반 동기화 아키텍처를 구현할 예정입니다.
복합 필터 Supabase 쿼리 인터페이스 설계
날짜 범위·노선·금액 조건을 조합하는 복합 필터를 PostgREST 쿼리 빌더로 동적 생성하는 구조를 설계하여 다양한 조회 조건에 유연하게 대응하는 이용 내역 검색 기능을 구현할 예정입니다.
핵심 기능
충전 현황 홈
카드 잔액, 이번 달 이용 금액, 최근 승하차 내역, 충전 바로가기를 통합 제공하는 메인 허브 화면입니다.
진행 단계
Supabase 스키마 설계 및 RLS 정책 구성
2026.03.
카드·거래·노선 테이블 ERD 설계, Row Level Security 정책 작성, Materialized View 집계 쿼리 구현, 관리자 역할 설정
프로젝트 상세
1) 포트폴리오 소개 교통카드 기반 모바일 결제 플랫폼의 웹 관리 시스템으로, 카드 충전·이용 내역·환승 패턴 분석·관리자 통계 기능을 React와 Supabase로 구현할 예정입니다. QR 기반 충전 인증과 실시간 잔액 동기화 흐름을 웹 UI로 설계하고 구축할 예정입니다. 2) 작업 범위 - 충전 현황 홈: 카드 잔액, 이번 달 이용 금액, 최근 승하차 내역, 충전 바로가기를 통합 제공하는 메인 허
