harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
98 lines
4.4 KiB
Markdown
98 lines
4.4 KiB
Markdown
# 조직도 (`/org`) — 디자인 v2
|
||
|
||
> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #6
|
||
|
||
## 레이아웃
|
||
|
||
```
|
||
┌─────┬──────────────────────────────────────────────────────┐
|
||
│ 64px│ SYS_TYPE: CORE_ROOT_01 2023.10.27_14:42 │
|
||
│ │ ────────────────────────────────────────────────── │
|
||
│ │ │
|
||
│ DASH│ ┌─────────────────┐ │
|
||
│ PROJ│ │ [HQ] 하나랑 글로벌 │ │
|
||
│◗ORG │ │ MEM:142 S_ADMIN │ │
|
||
│ CONF│ └────────┬────────┘ │
|
||
│ │ ┌───────────┼───────────┐ │
|
||
│ │ ┌──────┴──────┐ ┌─┴────┐ ┌───┴───┐ │
|
||
│ │ │[R&D] 기술연구│ │[OPS] │ │[EXT] │ │
|
||
│ │ │ MEM:48 LEAD │ │운영팀 │ │외부협력│ │
|
||
│ │ └──────┬──────┘ └──┬───┘ └───┬───┘ │
|
||
│ │ ┌─────┼─────┐ │ │ │
|
||
│ │ ┌──┴──┐ ┌┴─────┐ ┌──┴───┐ ┌───┴────┐ │
|
||
│ │ │Core │ │Infra │ │Monitor│ │Security│ │
|
||
│ │ │Eng. │ │struct│ │ing │ │Audit │ │
|
||
│ │ └─────┘ └──────┘ └──────┘ └────────┘ │
|
||
│ │ │
|
||
│ │ TOTAL_NODES: 07 STATUS: SYNC_COMPLETE │
|
||
└─────┴──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 사이드바 (조직도 전용)
|
||
- **64px 너비** (다른 페이지의 240px과 다름)
|
||
- 세로 텍스트: `writing-mode: vertical-rl`
|
||
- 아이콘 모드: DASH / PROJ / ORG_TREE / CONF
|
||
- 로고: 세로 배치 (circle-full 위, circle-half 아래)
|
||
|
||
## 메인 뷰포트
|
||
- 배경: dot grid pattern — `radial-gradient(circle, #1a1a1a 1px, transparent 1px)` / 30px 30px
|
||
- `overflow: auto` (스크롤 가능)
|
||
- padding: 40px, 중앙 정렬
|
||
|
||
## 헤더
|
||
- 좌: `SYS_TYPE: CORE_ROOT_01` (mono, 값은 흰색)
|
||
- 우: `TIMESTAMP: 2023.10.27_14:42` (mono secondary)
|
||
- border-bottom 1px
|
||
|
||
## 트리 구조
|
||
|
||
### Terminal Card
|
||
- 200px 너비, padding 12px
|
||
- `border: 1px solid var(--border-color)`
|
||
- **border-left: 3px solid** (레벨별 색상)
|
||
- high (`#f43f5e`): HQ
|
||
- mid (`#3b82f6`): R&D, Core Engine, Infrastructure
|
||
- low (`#10b981`): OPS, EXT, Monitoring, Security Audit
|
||
- `box-shadow: 0 10px 30px rgba(0,0,0,0.5)`
|
||
- node-label: mono 13px 600
|
||
- 접두사 span: `[HQ]` `[R&D]` `[OPS]` `[EXT]` — secondary 11px
|
||
- badge-row: flex wrap, gap 6px
|
||
- badge: mono 9px, `#1a1a1a` bg, border 1px `#262626`
|
||
- `MEM: 142` (값은 primary)
|
||
- `S_ADMIN`, `LEAD`, `MGR`, `GUEST` 등
|
||
- `LV_09`, `LV_07` 등
|
||
|
||
### 접기/펼치기 토글
|
||
- `−` / `+` 아이콘, 16x16px
|
||
- 카드 하단 중앙 absolute 배치
|
||
- bg: card bg, border 1px
|
||
|
||
### 연결선
|
||
- 세로선: `width: 1px; background: var(--border-color)`
|
||
- 가로선 (형제 연결): children `::before` — 상단 -40px
|
||
|
||
### 트리 구조
|
||
```
|
||
하나랑 글로벌 (HQ, high)
|
||
├── 기술연구소 (R&D, mid)
|
||
│ ├── Core Engine (mid)
|
||
│ └── Infrastructure (mid)
|
||
├── 운영지원팀 (OPS, low)
|
||
│ └── Monitoring (low)
|
||
└── 외부 협력사 (EXT, low)
|
||
└── Security Audit (low)
|
||
```
|
||
|
||
## 푸터
|
||
- `margin-top: auto; border-top: 1px solid`
|
||
- 좌: `TOTAL_NODES: 07`
|
||
- 우: `STATUS: SYNC_COMPLETE`
|
||
- mono 10px secondary
|
||
|
||
## 모바일 반응형
|
||
- 사이드바: 하단 탭바로 전환
|
||
- 트리: 수평 스크롤 컨테이너 + 핀치 줌
|
||
- terminal-card: 너비 160px으로 축소
|
||
- badge 폰트: 8px
|
||
- dot grid: 20px 간격으로 축소
|