policy-web-v2
메인 인덱스 | bob-yamong | GitHub
이 문서는 policy-web-v2 레포를 실제 파일 구조 기준으로 다시 읽은 노트입니다. 현재 소스만으로 제 직접 구현 범위를 단정하진 않겠지만, 이 레포는 단순 정책 입력 UI보다 운영 대시보드와 실시간 스트림을 붙인 Next.js 프런트엔드로 읽힙니다.
한 줄 소개
policy-web-v2는 Next.js App Router 위에서 컨테이너 정책 관리, 대시보드 시각화, SSE 기반 상태 스트림, Grafana 임베드를 함께 다루는 운영용 웹 프런트엔드입니다.
기술 스택
- Next.js 14
- TypeScript
- Recoil
- Tailwind CSS
- shadcn/ui / Radix UI
- Recharts
- Server-Sent Events
코드 기준으로 확인한 구조
app/page.tsx는RecoilRoot로 앱을 감싼 뒤ContainerPolicyManagerComponent를 단일 진입점으로 렌더링합니다.- 같은 파일에는
baseUrlAtom,serverNumAtom이 있어 서버 대상과 API 기준점을 전역 상태로 관리합니다. components/에는dashboard.tsx,container-policy-manager.tsx,heartbeat-stream.tsx,lsm-stream.tsx,grafana-content.tsx,settings-content.tsx,login-page.tsx,sidebar.tsx가 나뉘어 있습니다.dashboard.tsx는 CPU, 메모리, 디스크, 네트워크, load average 데이터를 차트 카드로 보여 주며Recharts를 적극적으로 사용합니다.heartbeat-stream.tsx는EventSource로${BASE_URL}/heartbeat/stream에 붙어 toast 알림을 띄웁니다.grafana-content.tsx는NEXT_PUBLIC_GRAFANA_URL을 바탕으로 Grafana 대시보드를 iframe으로 임베드합니다.- 즉 이 레포는 초기 정책 편집 화면에서 더 나아가, 운영 관측과 실시간 피드백을 한 제품 표면 안에 붙이려는 방향이 강합니다.
주요 파일과 흐름
app/page.tsx: 전역 상태와 단일 앱 진입점components/container-policy-manager.tsx: 정책 관리 화면의 중심components/dashboard.tsx: 차트와 서버 상태 대시보드components/heartbeat-stream.tsx,components/lsm-stream.tsx: 실시간 스트림 수신components/grafana-content.tsx: 외부 대시보드 임베드components/ui/*: shadcn/ui 계열 컴포넌트 묶음
포트폴리오 메모
이 레포는 policy-web.md보다 운영 표면이 커졌다는 점이 핵심입니다. 컨테이너 정책 편집만 하는 UI라기보다, 상태 시각화, 이벤트 스트림, 외부 대시보드 연결까지 한 화면 흐름 안에서 다루려는 제품형 프런트엔드로 설명하는 편이 맞습니다.