harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
1.8 KiB
1.8 KiB
관리자 페이지 (/admin/*) — 디자인 v2
참조: DESIGN-SYSTEM.md 관리자 페이지는 기존 Sprint 004에서 구현된 기능을 v2 디자인 시스템에 맞춰 리스타일링. 별도 디자인 파일이 없으므로, 다른 페이지의 패턴을 조합.
페이지 목록
/admin— 자매 관리 (재시작/리셋)/admin/harness— 하네스 파일 편집/admin/logs— 로그 뷰어/admin/costs— 비용 대시보드/admin/repos— 저장소 관리
공통 스타일
- page-header: 제목 28px + label-meta (ADMIN PANEL)
- section-title 패턴 동일
- 모든 입력/버튼: DESIGN-SYSTEM.md의 btn, bracket-input, switch 사용
- 인증 필요 표시: 상단에
label-meta—AUTH: BEARER TOKEN REQUIRED
/admin — 자매 관리
- node-mini-card 스타일 (프로젝트 상세의 ASSIGNED NODES와 동일)
- 각 자매: 이름 + 상태 도트 + btn-toggle (RESTART / RESET)
- 결과 표시: audit-row 스타일 (타임스탬프 + 액션 + 결과)
/admin/harness — 하네스 편집
- 드롭다운: 자매 선택 + 파일 선택
- 텍스트 에디터:
#0d0d0d배경, mono 12px, border 1px - 하단: btn (취소) + btn-primary (저장)
/admin/logs — 로그 뷰어
- activity-log-design.md의 로그 테이블 패턴 활용
- 자매 필터 + lines 제한
- 실시간 스트림: mono 텍스트, 자동 스크롤
/admin/costs — 비용 대시보드
- 상단: 요약 카드 3개 (card 스타일)
- 총 토큰 / 총 비용 / 평균 일일 비용
- bracket-value로 표시
- 중앙: BarChart (graph-container 스타일 확장)
- 일별 바, highlight 최근
- border-left + border-bottom
- 하단: 기간 필터 (filter-btn 스타일)
모바일 반응형
- 카드/행: 1열 수직 스택
- 텍스트 에디터: 풀 너비, 높이 축소
- 비용 차트: 가로 스크롤