harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
82 lines
3.8 KiB
Markdown
82 lines
3.8 KiB
Markdown
# 활동 로그 (`/activities`) — 디자인 v2
|
|
|
|
> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #5
|
|
|
|
## 레이아웃
|
|
|
|
```
|
|
┌──────────┬──────────────────────────────────────────────────┐
|
|
│ Sidebar │ 활동 로그 / ACTIVITY LOG SYS_LOG_V.4.2 //... │
|
|
│ │ ────────────────────────────────────────────── │
|
|
│ │ │
|
|
│ │ [ALL] [SYSTEM] [SECURITY] [ORG] [BACKUP] 🔍... │
|
|
│ │ │
|
|
│ │ ┌──────────────────────────────────────────────┐│
|
|
│ │ │ TIMESTAMP TYPE EVENT CODE││
|
|
│ │ │ 2023-10-27 14:02 SYSTEM Node [다랑] 0x402││
|
|
│ │ │ 2023-10-27 13:45 ORG New sub-dir 0x112││
|
|
│ │ │ 2023-10-27 11:30 SECURITY Full sweep 0x000││
|
|
│ │ │ 2023-10-27 10:15 SYSTEM Memory alloc 0x284││
|
|
│ │ │ 2023-10-27 09:15 ORG Batch import 0x105││
|
|
│ │ │ 2023-10-27 08:00 BACKUP Snapshot 0x900││
|
|
│ │ │ 2023-10-27 07:42 SECURITY SSH blocked 0x666││
|
|
│ │ │ 2023-10-27 04:20 SYSTEM GC cycle 0x401││
|
|
│ │ │ 2023-10-27 01:12 SYSTEM Kernel patch 0x400││
|
|
│ │ └──────────────────────────────────────────────┘│
|
|
│ │ SHOWING 1-9 OF 2,410 [PREV] 01 [NEXT]│
|
|
└──────────┴──────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 네비게이션 변경
|
|
- 사이드바에 **"활동"** 메뉴 추가 (대시 다음)
|
|
|
|
## 페이지 헤더
|
|
- page-title: "활동 로그" (24px 600) + ` / ACTIVITY LOG` (18px secondary)
|
|
- header-meta: mono 11px, "SYS_LOG_V.4.2 // RUNTIME: 428:12:05"
|
|
- border-bottom 1px
|
|
|
|
## 필터 + 검색 (Log Controls)
|
|
- `justify-content: space-between; align-items: center`
|
|
- **filter-group**: 가로 flex, gap 16px
|
|
- filter-btn: 11px 700 uppercase, border 1px
|
|
- active: 흰색 배경 + 검정 텍스트
|
|
- 옵션: ALL / SYSTEM / SECURITY / ORG / BACKUP
|
|
- **search-box**: max-width 300px, flex-grow
|
|
- search-input: `#1a1a1a` 배경, border 1px, mono 12px
|
|
- placeholder: "SEARCH LOGS..."
|
|
|
|
## 로그 테이블 (Log Container)
|
|
- 외곽: border 1px, `background: #0d0d0d`
|
|
- table: 전체 너비, border-collapse
|
|
- **th**: 11px uppercase secondary, padding 16px, border-bottom 1px
|
|
- **td**: 12px mono, padding 12px 16px, border-bottom `#1a1a1a`
|
|
- **hover**: 배경 `#1a1a1a`
|
|
|
|
### 컬럼
|
|
| 컬럼 | 너비 | 스타일 |
|
|
|------|------|--------|
|
|
| TIMESTAMP | 180px | secondary |
|
|
| TYPE | 100px | bold + tag |
|
|
| EVENT | auto | primary, `[이름]` bold 강조 |
|
|
| CODE | 100px | right align |
|
|
|
|
### 태그 (Tag)
|
|
- 10px, padding 2px 6px, border 1px currentColor
|
|
- SYSTEM: `#888`
|
|
- SECURITY: `#ff5f5f`
|
|
- ORG: `#5fafff`
|
|
- BACKUP: `#5fff8a`
|
|
|
|
## 페이지네이션
|
|
- `justify-content: flex-end` / mono 11px
|
|
- "SHOWING 1-9 OF 2,410 ENTRIES"
|
|
- `[PREV]` `PAGE 01` `[NEXT]`
|
|
- PREV/NEXT: primary 색, hover underline
|
|
|
|
## 모바일 반응형
|
|
- filter-group: 가로 스크롤 또는 드롭다운 변환
|
|
- search-box: 풀 너비
|
|
- log-table: 가로 스크롤 wrapper 또는 카드 형태 변환
|
|
- 카드: 타임스탬프 + 태그 상단, 이벤트 본문, 코드 하단
|
|
- 페이지네이션: 간소화 (< 01 >)
|