harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
70 lines
3.1 KiB
Markdown
70 lines
3.1 KiB
Markdown
# 프로젝트 상세 (`/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 텍스트
|
|
- done 항목: secondary + line-through
|
|
|
|
## 모바일 반응형
|
|
- project-grid: 1열 수직 스택 (좌측 먼저, 우측 아래)
|
|
- phase-item: 1열 (meta 위, box 아래)
|
|
- audit-row: 가로 스크롤 또는 카드 변환
|