harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
70 lines
3.4 KiB
Markdown
70 lines
3.4 KiB
Markdown
# 자매 노드 관리 (`/sisters`) — 디자인 v2
|
|
|
|
> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #3
|
|
|
|
## 레이아웃
|
|
|
|
```
|
|
┌──────────┬──────────────────────────────────────────────┐
|
|
│ Sidebar │ 자매 노드 관리 TOTAL NODES: 04 │
|
|
│ │ ─────────────────────────────────────────── │
|
|
│ │ │
|
|
│ │ ● 하랑 (Primary) │ CAPACITY 24H │ SYNC LOG│
|
|
│ │ Uptime: 342:12 │ ▁▂▃▂▄▆█▇ │ 14:05 ✓│
|
|
│ │ [ACTIVE][REBOOT]│ LOAD: 84.2% │ 13:55 ✓│
|
|
│ │ ─────────────────────────────────────────── │
|
|
│ │ ● 나랑 (Secondary)│ CAPACITY 24H │ SYNC LOG│
|
|
│ │ Uptime: 112:44 │ ▁▁▁▂▂▃▃▃ │ 14:02 ✓│
|
|
│ │ [ACTIVE][REBOOT]│ LOAD: 48.7% │ 13:51 ✓│
|
|
│ │ ─────────────────────────────────────────── │
|
|
│ │ ○ 다랑 (Standby) │ CAPACITY 24H │ SYNC LOG│
|
|
│ │ Last: 02:15 ago │ ░░░░░░░░ │ IDLE │
|
|
│ │ [STANDBY][ACTIV]│ LOAD: 0.0% │ IDLE │
|
|
│ │ ─────────────────────────────────────────── │
|
|
│ │ ● 이랑 (Sync) │ CAPACITY 24H │ SYNC LOG│
|
|
│ │ Queue: 12 PKTS │ ▁▂▁▂▃▂▁▁ │ SYNCING │
|
|
│ │ [SYNCING][FLUSH]│ LOAD: 15.2% │ SYNCING │
|
|
└──────────┴──────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 페이지 헤더
|
|
- page-title: "자매 노드 관리" (28px 600)
|
|
- label-meta: `TOTAL NODES: 04`
|
|
- border-bottom 1px
|
|
|
|
## 노드 엔트리 (Node Entry)
|
|
- `grid-template-columns: 240px 1fr 300px` / gap: 64px
|
|
- `border-bottom: 1px solid var(--border-color)` / padding-bottom: 40px
|
|
|
|
### 좌: Node Info (240px)
|
|
- node-name: 20px 600 + status-indicator
|
|
- active: 8px 흰색 원 + glow shadow
|
|
- inactive: 8px `#555` 원
|
|
- meta-pair: label-meta + val (16px mono)
|
|
- 하랑: Uptime 342:12:05
|
|
- 다랑: Last Active 02:15:00 ago
|
|
- 이랑: Queue Depth 12 PKTS
|
|
- node-controls: btn-toggle 2개
|
|
- active 상태: 흰색 배경 + 검정 텍스트
|
|
- 비active: 투명 + 보더
|
|
|
|
### 중: Capacity Section
|
|
- label-meta: "CAPACITY HISTORY (24H)"
|
|
- graph-container: 60px 높이, flex-end
|
|
- graph-bar: 등분, `#333` 기본
|
|
- highlight: 최근 2개 바 `var(--text-primary)`
|
|
- border-left + border-bottom 1px
|
|
- sync-row: "LOAD INDEX" + 값 (mono)
|
|
|
|
### 우: Sync History (300px)
|
|
- label-meta: "SYNC LOG"
|
|
- sync-row: 타임스탬프 + 상태 (mono 11px)
|
|
- 성공: `var(--text-primary)` 색 "SUCCESS"
|
|
- IDLE: secondary
|
|
- SYNCING: primary
|
|
|
|
## 모바일 반응형
|
|
- node-entry: 3열 → 수직 스택 (info → capacity → sync)
|
|
- graph-container: 높이 유지, 너비 100%
|
|
- btn-toggle: 가로 나란히
|