---
type: page-frontend-sub
status: draft
related_pages: ["[[architecture/project_map]]", "[[architecture/workflow_data_flow]]"]
page_id: B05_Profile
last_updated: 2026-08-02
---

# _UI_Selection — 배수/구조물 3자 선택 동기화

## 1. 개요 및 역할
*   **파일**: `B05_Profile/frontend/_UI_Selection.ts` (97줄)
*   **역할**: 배수유역(Canvas) ↔ 종단 그래프(SVG) ↔ 좌측 구조물 리스트/폼 ↔ 3D 뷰어 마커 간의 선택(Focus/Active) 상태를 실시간으로 양방향 동기화하여 일관된 시각적 피드백을 제공합니다.

## 2. 주요 기능 및 함수
*   `bindSelectionSync(options)`:
    *   3자 간의 클릭 및 액티브 스테이트 이벤트를 구독하여 선택 상태를 일괄 갱신.
    *   특정 요소가 클릭되었을 때 다른 연관 뷰어들이 해당 요소 위치로 스크롤하거나 하이라이트하도록 이벤트 라우팅.
*   `isSyncing` 가드 플래그:
    *   양방향 이벤트 전파 과정에서 발생할 수 있는 무한 루프(A 클릭 -> B 선택 -> A 선택 트리거 -> B 선택 트리거...)를 완벽히 가드하여 런타임 콜스택 오버플로우 방지.

## 3. 의존성
*   [[B05_Profile/frontend/B05_Profile_UI_Page]] — 전체 레이아웃 상태 관리자
*   [[B05_Profile/frontend/B05_Profile_UI_Drainage_Panel]] — 배수 패널