플랫폼 통합

공통 의존성

세 플랫폼 모두 commonMain에 volcano와 volcano-compose를 추가합니다. 플랫폼별 화면은 같은 Heatmap 컴포저블을 호출하므로 히트맵 데이터와 렌더링 정책을 중복 구현할 필요가 없습니다.

Android

ComponentActivity의 setContent 안에서 다른 Compose 화면과 마찬가지로 사용합니다. edge-to-edge를 활성화했다면 시스템 바 인셋을 호스트 레이아웃에서 처리하고, 히트맵에는 실제로 사용할 수 있는 제한된 영역을 제공하세요.

iOS

Kotlin의 ComposeUIViewController를 SwiftUI 또는 UIKit 호스트에 연결합니다. 고주사율 iPhone에서는 Info.plist의 CADisableMinimumFrameDurationOnPhone을 true로 설정해야 Compose의 프레임 성능 검사가 통과합니다.

Desktop

application { Window { ... } }에서 사용합니다. 창 크기가 유동적이므로 fillMaxSize() 또는 제한된 부모 크기를 제공하고, 마우스 hover·tooltip 정책은 HeatmapInteraction으로 제어합니다.

React 웹

@taewooyo/heatmap-react를 npm으로 설치합니다. Kotlin/JS 계산 코어가 번들되어 있으며 TypeScript/React API로 브라우저 SVG를 렌더링합니다. 컴포넌트에 양의 정수 width·height를 전달하고, 반응형 크기가 필요하면 앱에서 부모 영역을 측정하세요. drill-down, 뒤로 가기, 데이터 요청, 이미지 정책은 호스트가 소유합니다. React 앱은 Gradle 의존성이나 commonMain을 사용하지 않습니다.

Compose의 세 호스트는 UI·탐색 상태를 공유하지만 React는 레이아웃·색상 계산만 Kotlin/JS로 공유합니다. 공개 타입과 렌더러는 별도이며, React의 선택·탐색 상태도 앱이 관리합니다.