feat: InfoWindow 오버레이 추가 (Android 스타일 지원, iOS 기본 텍스트)

[ko-devHong]

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Enhance (enhance performance, api, etc)
• Chore
• This change requires a documentation update
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

What does this change?

✨ 추가된 기능

• React Native용 네이버 지도 InfoWindow 오버레이 컴포넌트 도입
• 좌표 기반 또는 마커 식별자(identifier) 기반으로 InfoWindow 표시
• 열림/닫힘 제어(isOpen) 및 속성 변경 시 동적 업데이트
• Android에서 텍스트/스타일 커스터마이징 지원

🧩 동작/제약 요약

• 공통: 좌표/마커 연결, 열림/닫힘 제어, 텍스트 표시
• Android: 텍스트/배경/보더/패딩/굵기 등 스타일 완전 지원
• iOS: 네이버 SDK 제약으로 기본 텍스트 스타일만 지원
  • 커스텀 스타일이 필요한 경우 마커 커스텀 뷰 사용 권장

작업하게된 이유

• 지도 상에 특정 지점/마커에 대한 부가 정보를 간단히 노출할 수 있는 InfoWindow가 필요했습니다.
• 기존 마커 커스텀 뷰 대비 간단한 텍스트 표시에 적합하며, Android에서는 손쉬운 스타일 커스터마이징 수요가 존재합니다.
• iOS 네이티브 SDK의 InfoWindow는 이미지/커스텀 뷰 기반 커스터마이징에 제약이 있어, 기본 텍스트 제공을 우선 반영했습니다.

이슈 사항

• NMFInfoWindow는 NMFOverlayImageDataSource를 미지원

에러 메시지 분석:

• NMFOverlayImageDataSource 사용시 발생되는 에러

 -[NMFOverlayImage toUIImage]: unrecognized selector

• 이것은 NMFInfoWindow의 내부 구현이:

// NMFInfoWindow 내부 (추정)
- (void)loadImage {
  id image = [self.dataSource viewWithOverlay:self];
  UIImage* uiImage = [image toUIImage];  // ❌ toUIImage 메서드 호출
}

Usage

import { NaverMapInfoWindow, NaverMapMarkerOverlay } from '@mj-studio/react-native-naver-map';

// 특정 좌표에 InfoWindow 표시
<NaverMapInfoWindow
  latitude={37.5666102}
  longitude={126.9783881}
  text="서울시청"
  textSize={14}
  textColor="black"
  backgroundColor="white"
/>

// 마커에 연결된 InfoWindow (identifier 매칭)
<NaverMapMarkerOverlay
  identifier="marker1"
  latitude={37.5666102}
  longitude={126.9783881}
/>
<NaverMapInfoWindow
  identifier="marker1"
  text="마커 정보"
  isOpen={true}
  // Android only
  fontWeight="bold"
  borderRadius={10}
  borderColor="#4263eb"
/>

Platform Notes

• Android ✅
  • 지원: text, textSize, textColor, fontWeight, backgroundColor, borderRadius, borderWidth, borderColor, padding, identifier, isOpen
  • 구현: InfoWindow.ViewAdapter + GradientDrawable로 스타일 구성
• iOS ⚠️
  • 지원: text, identifier, isOpen
  • 제한: textSize, textColor, fontWeight, border*, padding 미지원 (네이티브 SDK 제약)

Test Plan

• pnpm codegen 실행 후 예제 앱에서 확인
  1. pnpm i && pnpm codegen
  2. pnpm dev (필요 시) → pnpm android / pnpm ios
  3. 좌표 기반 InfoWindow가 정상 표시되는지 확인
  4. 마커 + identifier 연결 시 InfoWindow가 올바른 위치/마커에 표시되는지 확인
  5. Android에서 스타일 props 변경 시 즉시 반영되는지 확인
  6. iOS에서 기본 텍스트 InfoWindow가 정상 표시/토글되는지 확인

Docs

• 새로운 컴포넌트/프로퍼티 문서 추가 필요 -> 완료
  • NaverMapInfoWindow 소개, 플랫폼별 지원 매트릭스, 사용 예시
  • iOS 커스텀 스타일 제약 및 권장 대안 안내

Additional Notes

• 추후 iOS SDK 측 개선이 확인되면 스타일 지원 확장 가능성을 재검토할 수 있습니다.

Fixes #<issue_number_goes_here> 🎯

[mym0404]

가이드 를 살펴봤을 때, InfoWindow는 Marker와 1:1 대응이 아닌 1:N 대응으로 자유롭게 표시가 되거나 혹은 아예 원하는 위치에 map 속성을 지정하는것 만으로도 띄울 수 있는 것으로 보입니다. 따라서 현재 구현하신 API 방식은 그대로 받아들이기에 아쉬운것 같습니다.

그리고 기본적으로 위 문제가 해결된 다음엔 conflict를 해결하고 docs를 추가하고(한 언어만 추가 해두셔도 됩니다.) CI를 통과하게 해주실수 있을까요?

[ko-devHong]

@mym0404 가이드 문서처럼 특정좌표만으로 통해 원하는 위치에 놓을 수도 있고, 마커와 대응되도록 할 수도 있는데 1:N 이라는 의미 어떤 걸까요?
아 PR 이후에 기능이 추가되었군요? 네네~ 해결해두고 다시 말씀 드리겠습니다

[ko-devHong]

@mym0404 ci 통과랑 docs 까지 추가했습니다 :)

[ko-devHong]

@mym0404 현재 최신 main에 맞춰서 재병합했습니다. 한번 확인 부탁드려요