hanarang/hanarang-dashboard
5
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
194bc5a91c7a4e0631b6d660eae3675d4d8edf9a
hanarang-dashboard/.plans/design/ui/activity-log-design.md
harang-ai 5e6c7085d3 📐 디자인 v2: 전체 리디자인 + 모바일 반응형 설계 
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙
- 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도)
- 관리자 페이지 디자인 가이드
- 원본 HTML 참조 파일 6개
- glassmorphism → 미니멀 터미널 UI
- 모바일 breakpoint: 768px/767px
2026-04-04 12:47:15 +09:00

3.8 KiB
Raw Blame History

활동 로그 (/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 >)
Reference in New Issue View Git Blame Copy Permalink