harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
3.1 KiB
3.1 KiB
프로젝트 상세 (/projects/[id]) — 디자인 v2
참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #2
레이아웃
┌──────────┬────────────────────────────────────────────┐
│ Sidebar │ PROJECTS / P-402 / SUMMARY │
│ │ 데이터 파이프라인 최적화 STATUS: ACTIVE/P2 │
│ │ ───────────────────────────────────────── │
│ │ │
│ │ PHASE TIMELINE │ ASSIGNED NODES │
│ │ ──────────── │ ───────────── │
│ │ P1: 아키텍처 분석 ✓ │ 하랑 [PRIMARY] ● │
│ │ ●P2: 실시간 동기화 │ 나랑 [SECONDARY]● │
│ │ P3: 스트레스 테스트 │ │
│ │ │ TASK CHECKLIST │
│ │ SECURITY AUDIT LOG │ ───────────── │
│ │ ─────────────── │ ■ 인프라 요구사항 │
│ │ 14:02 CRYPTO_KEY PASS │ ■ 보안 프로토콜 │
│ │ 11:30 CODE_SCAN PASS │ □ 캐시 무효화 │
│ │ 09:15 ACCESS_LOG WARN │ □ 부하 분산 │
└──────────┴────────────────────────────────────────────┘
헤더
- breadcrumb: mono 11px uppercase, secondary
- page-title-row: 제목(28px) + STATUS label-meta
본문 그리드
grid-template-columns: 1fr 320px/ gap: 64px
좌: Phase Timeline + Audit Log
Phase Timeline
- phase-item:
grid-template-columns: 120px 1fr - 왼쪽: phase-meta — mono 11px, "COMPLETED / 2023.10.12"
- 오른쪽: phase-box —
border-left: 2px solid- active: border 흰색 + 8px 원형 도트
- 완료/대기: border
--border-color
- phase-name: 600 weight
- phase-desc: 13px secondary
Security Audit Log
- section-title:
SECURITY AUDIT LOG+LAST CHECK: 4H AGO - audit-log: 1px gap 줄무늬 (배경 #333)
- audit-row:
grid-template-columns: 100px 1fr 80px - header row: secondary uppercase 700
- status-tag: 10px, border 1px
.pass: border #00FF00, color #00FF00- 기본: border #333
우: Assigned Nodes + Task Checklist
Assigned Nodes
- node-mini-card: border 1px, 가로 정렬 (이름 + 녹색 도트)
- 녹색 도트: 6x6px,
#00FF00
Task Checklist
- check-item: mono 12px, flex 가로
- check-box: 14x14px, border 1px
- checked:
■10px 텍스트
- checked:
- done 항목: secondary + line-through
모바일 반응형
- project-grid: 1열 수직 스택 (좌측 먼저, 우측 아래)
- phase-item: 1열 (meta 위, box 아래)
- audit-row: 가로 스크롤 또는 카드 변환