# MonitoringUI 사용 가이드

`MonitoringUIController`를 통해 모니터링 UI를 제어합니다.

```csharp
// MonitoringUIController 참조
[SerializeField] private MonitoringUIController _ui;
```

---

## 1. 오버뷰 버튼 목록을 수정하고자 할 경우

좌측 사이드바의 오버뷰 단축 버튼 목록을 변경합니다.

```csharp
var shortcuts = new List<InfoShortcutData>
{
    new("overview-all",     "i", "전체OVERVIEW",  PanelTypes.OverviewAll),
    new("overview-section", "i", "관별 OVERVIEW", PanelTypes.OverviewSection),
    new("overview-complex", "i", "공단 OVERVIEW", PanelTypes.OverviewComplex),
    new("overview-leader",  "i", "팀장 OVERVIEW", PanelTypes.OverviewLeader),
};

_ui.SetInfoShortcuts(shortcuts);
```

한 번에 하나의 오버뷰만 활성화되며, 버튼 클릭 시 이전 활성 버튼은 자동으로 해제됩니다.

---

## 2. 상단 네비게이션 바 버튼 목록을 수정하고자 할 경우

상단 Bay 탭 목록을 직접 설정합니다.

```csharp
var tabs = new List<NamedItemData>
{
    new("trans-bay", "Trans Bay"),
    new("25-bay",    "25 Bay"),
    new("24-bay",    "24 Bay"),
};

_ui.SetBayTabs(tabs, activeTabId: "trans-bay");
```

오버뷰 버튼과 탭을 연동하려면 `MonitoringUIConfig` ScriptableObject의 `ShortcutMappings`를 사용합니다.
각 `ShortcutTabMapping`에 오버뷰 버튼(`Shortcut`)과 해당 탭 목록(`Tabs`), 기본 활성 탭(`DefaultActiveTabId`)을 설정하면
오버뷰 버튼 클릭 시 탭 목록이 자동으로 교체됩니다.

---

## 3. 오버뷰 버튼에 이벤트를 연결하고 싶은 경우

`Events.OnInfoPanelRequested`를 구독합니다. 파라미터 `panelType`으로 어떤 오버뷰가 선택되었는지 구분합니다.

```csharp
_ui.Events.OnInfoPanelRequested += panelType =>
{
    switch (panelType)
    {
        case PanelTypes.OverviewAll:
            // 전체 오버뷰 선택 시 처리
            break;
        case PanelTypes.OverviewSection:
            // 관별 오버뷰 선택 시 처리
            break;
    }
};
```

---

## 4. 네비게이션 바 버튼에 이벤트를 연결하고 싶은 경우

`Events.OnBayViewChangeRequested`를 구독합니다. 파라미터 `bayId`로 어떤 탭이 선택되었는지 구분합니다.

```csharp
_ui.Events.OnBayViewChangeRequested += bayId =>
{
    Debug.Log($"선택된 Bay: {bayId}");
    // bayId에 해당하는 데이터 로드
};
```

---

## 5. 공정 진행률 패널을 활성화하고자 하는 경우

공정 진행률 패널은 오버뷰 패널의 장비 카드 영역입니다.
Bay ID에 매핑된 장비 카드 데이터를 주입하면 해당 Bay 탭 선택 시 자동으로 표시됩니다.

```csharp
var charts = new List<BarChartItemData>
{
    new("장재 수(EA)",   999, 777, 1200),
    new("절단 장(m)",    999, 777, 1200),
    new("작업 시간(분)", 999, 777, 1200),
};

var cards = new List<EquipmentCardData>
{
    // 종합 카드 (IsSummaryCard: true)
    new("trans-summary", "Trans Bay 종합", true, charts),
    // 개별 장비 카드 (IsSummaryCard: false, 현재/다음 W/O 표시)
    new("pls51-1", "PLS51-1", false, charts, "현재W/O번호", "다음W/O번호"),
};

_ui.SetBayEquipmentCards("trans-bay", cards);
```

---

## 6. 공정 진행률 패널을 장비 패널로 변경하고자 하는 경우

동일한 `SetBayEquipmentCards`를 다른 데이터로 호출하면 패널 내용이 교체됩니다.

```csharp
// 장비 상세 카드로 교체
var equipmentCards = new List<EquipmentCardData>
{
    new("pls51-1", "PLS51-1", false, charts, "WO-001", "WO-002"),
    new("pls51-2", "PLS51-2", false, charts, "WO-003", "WO-004"),
    new("pls52-1", "PLS52-1", false, charts, "WO-005", "WO-006"),
};

_ui.SetBayEquipmentCards("trans-bay", equipmentCards);
```

장비 카드 클릭 이벤트는 `Events.OnEquipmentCardSelected`로 수신합니다.

```csharp
_ui.Events.OnEquipmentCardSelected += cardId =>
{
    Debug.Log($"선택된 장비: {cardId}");
};
```

---

## 7. 스케줄 정보 패널을 활성화하고자 하는 경우

스케줄 정보 패널은 오버뷰 패널 하단에 위치하며, 행 데이터를 주입하여 활성화합니다.

```csharp
var rows = new List<ScheduleRowData>
{
    new("SN2633FLL5150PN54", "20250106", "20250107", "FL", "51.39", "PLS43-1"),
    new("SN2633FLL5150PN53", "20250106", "20250107", "FL", "47.25", "PLS43-2"),
};

_ui.SetScheduleData(rows);
```

설비 필터 드롭다운과 날짜 필터 드롭다운의 선택지를 설정할 수 있습니다.

```csharp
_ui.SetScheduleEquipmentChoices(new List<string> { "PLS43-1", "PLS43-2" });
_ui.SetScheduleDateChoices(new List<string> { "2025-02-27", "2025-02-28" }, "2025-02-27");
```

스케줄 관련 이벤트를 구독하여 사용자 상호작용에 반응합니다.

```csharp
_ui.Events.OnScheduleToggleChanged          += mode => { /* "daily" 또는 "equipment" */ };
_ui.Events.OnScheduleDateNavigated          += offset => { /* -7, -1, +1, +7 */ };
_ui.Events.OnScheduleEquipmentFilterChanged += name => { /* 설비 드롭다운 변경 */ };
_ui.Events.OnScheduleDateFilterChanged      += date => { /* 날짜 드롭다운 변경 */ };
```

---

## 8. 햄버거 메뉴(드로어) 항목을 설정하고자 하는 경우

좌측에서 슬라이드되는 드로어 메뉴의 항목 목록을 설정합니다.

```csharp
var items = new List<NamedItemData>
{
    new("overview", "Overview"),
    new("alarms",   "Alarms"),
    new("reports",  "Reports"),
    new("settings", "Settings"),
};

_ui.SetDrawerItems(items);
```

드로어 항목 클릭 이벤트는 `Events.OnDrawerNavigationRequested`로 수신합니다.

```csharp
_ui.Events.OnDrawerNavigationRequested += itemId =>
{
    switch (itemId)
    {
        case "overview": // Overview 화면으로 전환
            break;
        case "alarms":   // Alarms 화면으로 전환
            break;
    }
};
```

---

## 9. 상단 유틸리티 버튼에 이벤트를 연결하고 싶은 경우

상단 네비게이션 바 우측의 설정, 가시성, 사용자, 내보내기 버튼 이벤트를 구독합니다.

```csharp
_ui.Events.OnSettingsRequested        += () => { /* 설정 화면 열기 */ };
_ui.Events.OnVisibilityToggleRequested += layerId => { /* 3D 레이어 가시성 토글 */ };
_ui.Events.OnUserProfileRequested     += () => { /* 사용자 프로필 열기 */ };
_ui.Events.OnExportRequested          += () => { /* 데이터 내보내기 실행 */ };
```

---

## 10. 좌측 사이드바를 확장/축소하고자 하는 경우

코드에서 사이드바의 확장/축소 상태를 직접 제어합니다.

```csharp
_ui.ExpandSidebar();   // 펼치기 (180px)
_ui.CollapseSidebar(); // 접기   (52px)
```

사용자가 토글 버튼을 클릭하면 자동으로 전환되며, 초기 상태는 축소(collapsed)입니다.
