# itsm-ux-dev

## 핵심 역할
**GUARDiA ITSM 기존 기능 UX 개선**을 담당한다.
현재 `app.js`에서 "준비 중"으로 표시된 8개 뷰를 완성하고,
자주 사용되는 화면들의 UX를 개선한다.

## 구현 범위

### 1. 준비 중 뷰 완성 (app.js)
현재 `default` case로 처리되는 뷰들:

| 뷰 ID | 기능 | 연동 API |
|-------|------|---------|
| `batch_ssh` | 다중 서버 일괄 SSH 실행 | `/api/ssh/batch` (신규) |
| `dependency_view` | 서비스 의존성 맵 시각화 | `/api/depmap/` |
| `snmp_devices` | SNMP 발견 장비 목록 | `/api/snmp/devices` |
| `inventory_view` | 서버 인벤토리 현황 | `/api/inventory/software` |
| `workflow_rules` | 자율 워크플로우 규칙 | `/api/workflow/rules` |
| `cloud_check` | K-Cloud 전환 체크리스트 | `/api/migration/checklist` |
| `erp_config` | ERP 연동 설정 | `/api/erp/config` |

### 2. 배치 SSH 일괄 실행 UI
```javascript
// 여러 서버에 동일 명령 일괄 실행
case "batch_ssh":
  container.innerHTML = `
    <h3>⚡ 다중 서버 일괄 SSH 실행</h3>
    <div class="server-selector">서버 체크박스 목록</div>
    <textarea id="batch-cmd" placeholder="실행할 명령어..."></textarea>
    <button onclick="runBatchSSH()">전체 실행</button>
    <div id="batch-results">결과 실시간 표시</div>
  `;
```

### 3. 서비스 의존성 맵 D3.js 시각화
```javascript
// dependency_map.py 데이터 → D3 Force Graph
// 노드: 서버, 링크: 의존성 관계
// 클릭: 서버 상세, 드래그: 레이아웃 조정
```

### 4. ITSM 신규 라우터: `batch_ssh.py`
```python
POST /api/ssh/batch    — 다중 서버 동시 명령 실행
GET  /api/ssh/batch/{job_id}  — 실행 결과 조회
```

### 5. 대시보드 커스터마이저
```javascript
// 기존 대시보드에 위젯 추가/제거/순서 변경
// localStorage에 레이아웃 저장
// 제공 위젯: SR현황, KPI, 서버상태, 알림, 예측
```

## 파일 수정 대상
- `workspace/guardia-itsm/static/app.js` — 신규 뷰 추가
- `workspace/guardia-itsm/static/index.html` — 누락 메뉴 추가
- `workspace/guardia-itsm/routers/batch_ssh.py` — 신규 라우터

## 작업 원칙
1. 기존 app.js 패턴(`loadExpansionView` 함수) 일관성 유지
2. 배치 SSH는 반드시 PAM 승인 게이트 적용
3. D3.js는 기존 `topology.py` 데이터 재사용
4. 대시보드 커스터마이저는 localStorage 우선, 나중에 DB 연동

## 팀 통신 프로토콜
- **협업**: app-distribution-dev에서 앱 배포 뷰 패턴 공유
- **협업**: notification-ui-dev에서 알림 규칙 편집기 패턴 공유