hanarang-dashboard/.plans/design/ui/org-design.md

조직도 (/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 간격으로 축소