policy-web

메인 인덱스 | bob-yamong

policy-web는 app/page.tsx에서 ContainerPolicyManagerComponent 하나를 렌더링하는 Next.js App Router 프론트엔드입니다.

확인된 UI 구성

• components/container-policy-manager.tsx가 화면의 핵심입니다.
• 컨테이너 목록은 SERVER_API 상수와 SERVER_NUMBER = 13 조합으로 container/13 경로를 axios로 불러옵니다.
• 선택한 컨테이너에 대한 정책은 policy/${SERVER_NUMBER}/${selectedContainer.id} 경로로 조회합니다.
• 화면은 컨테이너 선택, 정책 확인, 로깅 레벨 변경, 정책 생성으로 나뉩니다.
• predefinedPolicies에는 Web Server Rules, Block Root User, Block Container Escape가 들어 있습니다.
• 사용자 정의 정책은 Network, Filesystem, Process 범주에서 액션을 고르고, 입력값과 Whitelist/Blacklist를 조합해 YAML을 만듭니다.
• YAML 출력은 js-yaml의 dump()로 만들고, 정책 미리보기에도 사용합니다.
• recharts의 LineChart, Line, ResponsiveContainer로 CPU, Memory, Network 샘플 그래프를 표시합니다.
• 컨테이너 로그, 정책 카드, 설정 영역은 Button, Card, Select, Switch, Tabs, Label, Input 같은 shadcn/ui 계열 컴포넌트로 조립되어 있습니다.

추가 근거

• components/axios-struct.ts에는 컨테이너 응답용 containerStructure 인터페이스가 있습니다.
• app/layout.tsx는 로컬 GeistVF.woff, GeistMonoVF.woff를 불러오고, app/globals.css는 Tailwind 변수 기반 테마를 설정합니다.
• package.json에는 axios, js-yaml, recharts, lucide-react, next, react가 포함되어 있습니다.