harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
2.9 KiB
2.9 KiB
설정 (/settings) — 디자인 v2
참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #4
레이아웃
┌──────────┬────────────────────────────────────────────────┐
│ Sidebar │ 시스템 설정 CONFIG: v2.0.4-STABLE │
│ │ │
│ │ ADMIN PROTOCOL RULES │ BACKUP & REDUNDANCY │
│ │ ───────────────── │ ────────────────── │
│ │ 강제 2FA [●] │ 자동 백업 [●] │
│ │ 세션 유효 시간 [ 15 ] │ 백업 주기 [08:00] │
│ │ IP 화이트리스트 [○] │ 보관 주기 [ 30 ]│
│ │ │ │
│ │ SYNC QUEUE THRESHOLDS │ NODE ALERT TRIGGERS │
│ │ ───────────────── │ ────────────────── │
│ │ 대기열 경고 [ 500 ] │ CPU 임계값 [ 90 ]│
│ │ 자동 스케일링 [●] │ 레이턴시 경보 [ 250 ] │
│ │ │ 노드 오프라인 [●] │
│ │ │
│ │ [초기화] [설정 저장] │
└──────────┴────────────────────────────────────────────────┘
페이지 헤더
- page-title: "시스템 설정" (28px 600)
- label-meta:
CONFIG: v2.0.4-STABLE
설정 그리드
grid-template-columns: repeat(2, 1fr)/ gap: 64px
섹션 구조 (4개)
- ADMIN PROTOCOL RULES (SEC: 01)
- BACKUP & REDUNDANCY (SEC: 02)
- SYNC QUEUE THRESHOLDS (SEC: 03)
- NODE ALERT TRIGGERS (SEC: 04)
설정 행 (Settings Row)
justify-content: space-between; align-items: centerborder-bottom: 1px solid #222- 좌: setting-label (14px 500) + setting-desc (12px secondary)
- 우: Toggle Switch 또는 Bracket Input
Toggle Switch
- 34x18px
- unchecked:
#2a2a2a배경, border#333, dot#8A8A8A - checked:
#151515배경, border#F5F5F5, dot#F5F5F5, translate 16px
Bracket Input
[ value ]형태--font-mono14px, transparent bg, center text- 포커스: 흰색 텍스트
- 너비: 60px
Action Bar
margin-top: auto; justify-content: flex-end- 초기화: 기본 btn (투명 + 보더)
- 설정 저장: btn-primary (흰색 배경, hover 반전)
- 12px 600 uppercase
모바일 반응형
- settings-grid: 2열 → 1열
- action-bar: 풀 너비 버튼 또는 sticky bottom