harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
66 lines
2.9 KiB
Markdown
66 lines
2.9 KiB
Markdown
# 설정 (`/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개)
|
|
1. **ADMIN PROTOCOL RULES** (SEC: 01)
|
|
2. **BACKUP & REDUNDANCY** (SEC: 02)
|
|
3. **SYNC QUEUE THRESHOLDS** (SEC: 03)
|
|
4. **NODE ALERT TRIGGERS** (SEC: 04)
|
|
|
|
### 설정 행 (Settings Row)
|
|
- `justify-content: space-between; align-items: center`
|
|
- `border-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-mono` 14px, 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
|