2026.04 - 재직중
멀티테넌트 예약 SaaS
하나의 코드베이스로 N개 시설의 예약 사이트를 서브도메인별로 제공하는 멀티테넌트 SaaS. 프론트엔드 아키텍처·보안 설계부터 단독 구축.
- 역할
- 프론트엔드 아키텍처·보안 설계 (단독 구축)
- Next.js
- React
- TypeScript
- Tailwind CSS
- BFF
문제
시설마다 브랜딩·약관·문구가 달라 코드로 분기하면 시설이 늘어날 때마다 코드가 증식하고, 브랜딩 전환 시점에 FOUC가 발생한다. 또한 예약 식별정보를 URL에 그대로 노출하면 개인정보 유출 리스크가 생긴다.
해결
- 시설 간 차이를 설정 JSON으로 분리하고 3단 deep-merge로 병합
- 요청 Host 헤더를 서버에서 해석해 CSS 변수를 SSR 단계에서 인라인 주입
- 예약 식별정보를 AES-256-GCM 봉인 토큰(만료 시각을 포함한 짧은 수명 · 용도별 분리)으로 인계, URL 쿼리 노출 제거
- BFF 프록시로 API 키를 서버사이드에 은닉하고, 외부 HTML 새니타이즈로 XSS 차단
- 결제 연동. 등록 실패 시 서버가 승인을 취소하고, 프론트는 취소 완료 여부까지 판별해 "결제 실패"와 "결제됨·예약 실패"를 분리 안내
- 외부 상태 라이브러리 없이 RSC + URL 상태 + 경량 Context로 설계, 핵심 로직은 Vitest로 커버
- 성능 측정값이 없던 예약 페이지에 Lighthouse 합성 측정 기준선(4개 경로, desktop 3회 median)을 세우고, 레저 상세 CLS의 원인을 layout-shift attribution으로 특정해 스켈레톤을 실제 갤러리와 같은 박스로 교체
효과
- 신규 시설 추가 시 코드 변경 없이 설정만으로 확장
- 초기 렌더에서 브랜드 색이 깜빡이지 않고, 예약 식별정보의 URL 쿼리 노출 제거
- 하드코딩 값 다수를 디자인 토큰화해 6개 상수/토큰으로 정리
- 레저 상세 CLS 0.440 → 0.074 (동일 조건 재측정, 임계값 0.1 이내)