## 관리 도구의 필요성 XGen 플랫폼이 성장하면서 관리 기능의 필요성이 커졌다. 사용자 관리, 워크플로우 통계, 시스템 모니터링 등을 한 곳에서 처리할 수 있는 매니지먼트 센터를 개발한 과정을 기록한다. ### 대시보드 레이아웃 설계 관리 센터는 왼쪽 사이드바 + 메인 콘텐츠 영역 구조를 채택했다. ```typescript // app/management/layout.tsx export default function ManagementLayout({ children }: { children: React.ReactNode }) { return (

{children}

); } ``` ### 메트릭 카드 컴포넌트 대시보드 상단에 핵심 메트릭을 카드 형태로 표시한다. 총 사용자 수, 활성 워크플로우 수, 오늘의 실행 횟수, API 호출량 등을 한눈에 파악할 수 있다. ```tsx interface MetricCardProps { title: string; value: number | string; change?: number; icon: React.ReactNode; } const MetricCard: React.FC = ({ title, value, change, icon }) => (

{title}

{value}

{change !== undefined && ( = 0 ? 'text-green-500' : 'text-red-500'}> {change >= 0 ? '↑' : '↓'} {Math.abs(change)}% )}

{icon}

); ``` ### 차트 시스템 도입 Recharts 라이브러리를 사용해 워크플로우 실행 추이, 사용자 증가 추이, API 응답 시간 분포 등을 그래프로 시각화했다. 특히 시간대별 실행 히트맵이 서비스 패턴을 파악하는 데 매우 유용했다. ### 사용자 관리 테이블 사용자 목록은 서버 사이드 페이지네이션과 검색을 지원하는 테이블로 구현했다. TanStack Table v8을 사용했는데, 헤드리스 UI 방식이라 스타일링 자유도가 높았다. ```typescript const columns: ColumnDef[] = [ { accessorKey: 'email', header: '이메일' }, { accessorKey: 'name', header: '이름' }, { accessorKey: 'role', header: '역할', cell: ({ getValue }) => ()} /> }, { accessorKey: 'lastLoginAt', header: '마지막 로그인', cell: ({ getValue }) => formatDate(getValue()) }, { id: 'actions', header: '관리', cell: ({ row }) => }, ]; ``` ### 실시간 알림 시스템 관리자에게 시스템 이벤트(워크플로우 실패, GPU 인스턴스 종료, 사용량 임계치 초과 등)를 실시간으로 알려주는 알림 시스템도 함께 구축했다.