9개 페이지의 중복 권한 로직을 100라인의 ProGate 컴포넌트로 단일화

ProGate: A 3-Tier React Server Component Pattern for SaaS Subscriptions

Matthias Meyer2026년 4월 29일7분intermediate

AI 요약

Context

SaaS 구독 티어별 접근 제어 로직이 9개 페이지에 개별 구현되어 코드 중복 및 분기 로직 불일치 발생. 특히 서비스별로 서로 다른 권한 체계와 i18n 키 구조를 가지고 있어 단순 공통화가 어려운 상황.

React Server Component 기반의 ProGate 래퍼 컴포넌트 설계로 권한 제어 레이어 분리
mode prop을 통한 two-stage(구독 유도 후 업그레이드) 및 single-stage(즉시 업그레이드) UX 분기 처리
requiredTier prop 도입으로 pro 및 scale 등 다양한 구독 레벨에 대응하는 가변적 권한 검증 로직 구현
i18n 키 마이그레이션 비용 절감을 위해 기존 번역 구조를 수용하는 확장형 인터페이스 채택
Server Component의 특성을 활용하여 페이지 레벨에서 라이선스 데이터를 await 한 후 하위 컴포넌트로 전달하는 클린 바운더리 구성
Vitest와 react-dom/server를 이용해 12가지 권한 조합에 대한 정적 마크업 스냅샷 테스트 자동화

실천 포인트

1. 동일한 권한 분기 로직이 3개 이상의 페이지에서 반복되는지 확인

2. 단순 공통화가 어려울 때 i18n 키 전체를 수정할지, 컴포넌트 인터페이스를 확장할지 비용 분석

3. 자동 추론 로직 대신 명시적인 prop 이름을 통해 의도를 드러내는 설계 적용

4. Server Component를 활용해 비즈니스 로직(권한 검증)과 UI 렌더링 경계를 명확히 구분

태그