운영 콘솔 설계 — 여러 자원을 한 화면에서

여러 도메인 (블로그·마켓·앱·외부 SaaS) 을 운영하는 팀은 매 도메인마다 관리자 UI 를 따로 만들기 쉽습니다. 단기적으로는 빠르지만 3~6개월만 지나면 운영자가 페이지마다 UI 를 다시 배우고 개발자는 같은 boilerplate 를 반복합니다. 이 강좌는 한 Next.js 앱이 여러 PostgreSQL 풀 (도메인 DB) 에 직접 접속해 CRUD · 감사로그 · 백업 · OAuth 까지 감당하는 허브 구조를 8 단계로 따라갑니다.

누구를 위한 강좌인가

• 여러 운영 도구를 하나의 콘솔로 묶고 싶은 분
• React 19 + Next.js App Router 를 실전 규모로 써 보고 싶은 분
• 감사로그 · OAuth · 백업 자동화 등 "운영에 필요한 공통 기능" 을 한 번에 익히고 싶은 분

다 끝내면 가능한 것

• PostgreSQL 여러 풀을 한 앱에서 직접 orchestration
• ResourceTable 공통 컴포넌트로 페이지당 30~70 줄로 CRUD 구현
• 일반 변경의 비동기 감사와 고위험 작업의 동기 intent·결과 감사 패턴
• 카카오 · 네이버 OAuth 2 provider + 이메일 화이트리스트
• pg_dump + cron 자동 백업 + 7일 rolling retention
• Playwright 매니페스트 자동 생성으로 수십 페이지 smoke 1 초 spec

단계 흐름

운영 허브를 완성하는 순서

1동기와 셋업

여러 관리 화면을 통합할 이유와 애플리케이션 기반을 정합니다.

2데이터 경계

여러 데이터베이스 풀과 공통 테이블 계약을 연결합니다.

3접근과 추적

OAuth 허용 목록과 감사로그로 운영자 행동을 통제합니다.

4복구와 검증

백업과 E2E 매니페스트로 운영 가능한 상태를 증명합니다.

전반부 (14) 는 기반 — 왜 모았고 어떻게 연결하는지. 후반부 (58) 는 운영 — 권한 · 추적 · 안정성.

단계 구성

1. 왜 중앙 허브인가 — 도메인 N + 관리자 UI N 의 비용, 한 곳으로 묶었을 때의 이득
2. 프로젝트 셋업 — Next 16 + TypeScript strict + shadcn/ui + Tailwind 4
3. 여러 PostgreSQL 풀 연결 — 환경변수 규약 · 풀 싱글톤 · 쿼리 헬퍼
4. ResourceTable SSOT — 공통 테이블 컴포넌트 · iconColor 맵 · 페이지네이션 URL-first
5. OAuth 2 provider + 화이트리스트 — 카카오 · 네이버 · JWT 세션 쿠키
6. 감사로그 (logAdminAction) — audit_logs 테이블 · reason 30자 강제 · 도메인별 viewer
7. 백업 자동화 — pg_dump + node-cron + 화이트리스트 테이블 30개
8. E2E 매니페스트 + 배포 — Playwright 자동 매니페스트 + Docker standalone 배포

전제 — getting-started 강좌 + Node 22+ (24 LTS 권장) / PostgreSQL 15 / Docker · nextjs-fullstack 강좌 (App Router 기초).