react-naver-maps-kit 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -2,7 +2,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
-let react_dom_client = require("react-dom/client");
 
 //#region src/core/loader/loadNaverMapsScript.ts
 const NAVER_MAPS_SCRIPT_BASE_URL = "https://oapi.map.naver.com/openapi/v3/maps.js";
@@ -876,15 +875,23 @@ function useNaverMapInstance(options = {}) {
 //#endregion
 //#region src/overlays/marker-clusterer/ClustererContext.ts
 /**
-* `<MarkerClusterer>`가 제공하는 React Context.
+* `<MarkerClusterer>`가 제공하는 registry Context.
+* register/unregister/enabled만 포함하며, enabled가 바뀔 때만 갱신됩니다.
 *
-* `<Marker>`는 이 context를 통해 클러스터러에 자신을 등록합니다.
-* `null`이면 클러스터러 밖에 있는 것이므로 일반 마커로 동작합니다.
-*
-* @internal 라이브러리 내부 전용. 직접 사용하지 마세요.
+* @internal
 */
 const ClustererContext = (0, react.createContext)(null);
 ClustererContext.displayName = "ClustererContext";
+/**
+* `<MarkerClusterer>`가 제공하는 visibility Context.
+* 재계산 시마다 갱신되며, 클러스터링 안 된 마커 ID 집합을 담습니다.
+*
+* `<Marker>`는 이 context를 읽어 자신이 보여야 할지 판단합니다.
+*
+* @internal
+*/
+const ClustererVisibilityContext = (0, react.createContext)(/* @__PURE__ */ new Set());
+ClustererVisibilityContext.displayName = "ClustererVisibilityContext";
 
 //#endregion
 //#region src/overlays/marker/Marker.tsx
@@ -1036,11 +1043,15 @@ function toLatLngLiteral(position) {
 const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 	const { map: contextMap, sdkStatus } = useNaverMap();
 	const clustererRegistry = (0, react.useContext)(ClustererContext);
+	const visibleIds = (0, react.useContext)(ClustererVisibilityContext);
 	const isInsideClusterer = clustererRegistry !== null && clustererRegistry.enabled;
+	const autoId = (0, react.useId)();
+	const effectiveId = props.clustererItemId ?? autoId;
+	const isHiddenByClusterer = isInsideClusterer && !visibleIds.has(effectiveId);
 	const markerRef = (0, react.useRef)(null);
 	const markerEventListenersRef = (0, react.useRef)([]);
 	const onMarkerDestroyRef = (0, react.useRef)(props.onMarkerDestroy);
-	const [markerDiv, setMarkerDiv] = (0, react.useState)(null);
+	const [markerDiv] = (0, react.useState)(() => document.createElement("div"));
 	const [portalReady, setPortalReady] = (0, react.useState)(false);
 	const hasChildren = props.children !== void 0 && props.children !== null;
 	const targetMap = props.map ?? contextMap;
@@ -1050,8 +1061,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 	});
 	(0, react.useEffect)(() => {
 		if (!clustererRegistry) return;
-		const id = props.clustererItemId;
-		if (id === void 0 || id === null) return;
+		const id = props.clustererItemId ?? autoId;
 		const latLng = toLatLngLiteral(props.position);
 		if (!latLng) return;
 		clustererRegistry.register({
@@ -1064,6 +1074,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 			clustererRegistry.unregister(id);
 		};
 	}, [
+		autoId,
 		clustererRegistry,
 		props.clustererItemId,
 		props.position,
@@ -1071,17 +1082,10 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		props.icon
 	]);
 	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
 		onMarkerDestroyRef.current = props.onMarkerDestroy;
-	}, [isInsideClusterer, props.onMarkerDestroy]);
-	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
-		if (typeof document === "undefined") return;
-		setMarkerDiv(document.createElement("div"));
-	}, [isInsideClusterer]);
+	}, [props.onMarkerDestroy]);
 	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
-		if (!hasChildren || !markerDiv) {
+		if (!hasChildren) {
 			setPortalReady(false);
 			return;
 		}
@@ -1097,11 +1101,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		return () => {
 			observer.disconnect();
 		};
-	}, [
-		isInsideClusterer,
-		hasChildren,
-		markerDiv
-	]);
+	}, [hasChildren, markerDiv]);
 	const invokeMarkerMethod = (0, react.useCallback)((methodName, ...args) => {
 		const marker = markerRef.current;
 		if (!marker) return;
@@ -1157,7 +1157,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		setZIndex: (...args) => invokeMarkerMethod("setZIndex", ...args)
 	}), [invokeMarkerMethod]);
 	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
+		if (isHiddenByClusterer) return;
 		if (sdkStatus !== "ready" || !targetMap || markerRef.current) return;
 		if (hasChildren && !portalReady) return;
 		try {
@@ -1173,7 +1173,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 			propsRef.current.onMarkerError?.(normalizedError);
 		}
 	}, [
-		isInsideClusterer,
+		isHiddenByClusterer,
 		hasChildren,
 		markerDiv,
 		portalReady,
@@ -1181,7 +1181,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		targetMap
 	]);
 	(0, react.useLayoutEffect)(() => {
-		if (isInsideClusterer) return;
+		if (isHiddenByClusterer) return;
 		const marker = markerRef.current;
 		if (!marker || !targetMap) return;
 		const rafId = requestAnimationFrame(() => {
@@ -1195,7 +1195,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 			cancelAnimationFrame(rafId);
 		};
 	}, [
-		isInsideClusterer,
+		isHiddenByClusterer,
 		hasChildren,
 		markerDiv,
 		portalReady,
@@ -1214,7 +1214,7 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		props.collisionBoxSize
 	]);
 	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
+		if (isHiddenByClusterer) return;
 		const marker = markerRef.current;
 		if (!marker) return;
 		bindMarkerEventListeners(marker, markerEventListenersRef, buildMarkerEventBindings(propsRef));
@@ -1224,14 +1224,14 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 				markerEventListenersRef.current = [];
 			}
 		};
-	}, [isInsideClusterer]);
+	}, [isHiddenByClusterer]);
 	(0, react.useEffect)(() => {
-		if (isInsideClusterer) return;
+		if (isHiddenByClusterer) return;
 		return () => {
 			teardownMarker();
 		};
-	}, [isInsideClusterer, teardownMarker]);
-	if (isInsideClusterer) return null;
+	}, [isHiddenByClusterer, teardownMarker]);
+	if (isHiddenByClusterer) return null;
 	if (!hasChildren || !markerDiv) return null;
 	return (0, react_dom.createPortal)(props.children, markerDiv);
 });
@@ -2225,7 +2225,8 @@ function padBounds(bounds, padding) {
 *    내부 registry에 위치·데이터를 등록합니다.
 * 2. `MarkerClusterer`는 지도 이벤트(`idle`, `move`, `zoom`) 발생 시
 *    현재 줌·뷰포트 기준으로 클러스터를 재계산합니다.
-* 3. 클러스터 마커는 `createRoot`를 이용해 React 컴포넌트를 HTML 아이콘으로 렌더링합니다.
+* 3. 클러스터 마커는 `<Marker>` JSX로 렌더링되며, children으로 클러스터 아이콘이 전달됩니다.
+* 4. 클러스터에 포함되지 않은 단독 포인트는 원래 `<Marker>` children을 그대로 표시합니다.
 *
 * ## 기본 사용법
 *
@@ -2241,10 +2242,11 @@ function padBounds(bounds, padding) {
 *     {points.map(p => (
 *       <Marker
 *         key={p.id}
-*         clustererItemId={p.id}
 *         position={p.position}
 *         item={p}
-*       />
+*       >
+*         <CustomPin />
+*       </Marker>
 *     ))}
 *   </MarkerClusterer>
 * </NaverMap>
@@ -2252,7 +2254,6 @@ function padBounds(bounds, padding) {
 *
 * ## 주의 사항
 *
-* - `<Marker>`에 반드시 `clustererItemId` prop을 지정해야 합니다.
 * - `<MarkerClusterer>`는 반드시 `<NaverMap>` 내부에 위치해야 합니다.
 * - `enabled={false}`로 설정하면 클러스터링이 해제되고 각 `<Marker>`가 개별 마커로 렌더링됩니다.
 *
@@ -2291,10 +2292,8 @@ function MarkerClusterer(props) {
 			if (prev && prev !== algorithm) prev.destroy?.();
 		};
 	}, [algorithm]);
-	const pointMarkersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const clusterMarkersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const clusterIconRootsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const clusterIconContainersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [clusters, setClusters] = (0, react.useState)([]);
+	const [visibleIds, setVisibleIds] = (0, react.useState)(/* @__PURE__ */ new Set());
 	const helpersRef = (0, react.useRef)({
 		zoomToCluster: () => {},
 		fitBounds: () => {}
@@ -2327,94 +2326,22 @@ function MarkerClusterer(props) {
 	(0, react.useEffect)(() => {
 		onClusterClickRef.current = onClusterClick;
 	}, [onClusterClick]);
-	const clusterIconRef = (0, react.useRef)(clusterIcon);
-	(0, react.useEffect)(() => {
-		clusterIconRef.current = clusterIcon;
-	}, [clusterIcon]);
 	const recompute = (0, react.useCallback)(() => {
 		if (!map || sdkStatus !== "ready" || !enabled) return;
 		const zoom = map.getZoom();
 		const bounds = getMapBounds(map);
 		const items = Array.from(registryRef.current.values());
-		const { clusters, points } = algorithm.cluster(items, {
+		const { clusters: rawClusters, points } = algorithm.cluster(items, {
 			zoom,
 			bounds
 		});
 		const maxItems = clusterData?.maxItemsInCluster;
 		const includeItems = clusterData?.includeItems ?? true;
-		const processedClusters = clusters.map((c) => ({
+		setClusters(rawClusters.map((c) => ({
 			...c,
 			items: includeItems ? maxItems !== void 0 ? c.items?.slice(0, maxItems) : c.items : void 0
-		}));
-		const nextPointIds = new Set(points.map((p) => p.id));
-		const prevPointMarkers = pointMarkersRef.current;
-		for (const [id, marker] of prevPointMarkers) if (!nextPointIds.has(id)) {
-			marker.setMap(null);
-			prevPointMarkers.delete(id);
-		}
-		for (const point of points) {
-			const existing = prevPointMarkers.get(point.id);
-			if (existing) {
-				const pos = new naver.maps.LatLng(point.position.lat, point.position.lng);
-				existing.setPosition(pos);
-				if (point.markerOptions) existing.setOptions({ ...point.markerOptions });
-			} else {
-				const opts = {
-					position: new naver.maps.LatLng(point.position.lat, point.position.lng),
-					map
-				};
-				if (point.markerOptions) Object.assign(opts, point.markerOptions);
-				const marker = new naver.maps.Marker(opts);
-				prevPointMarkers.set(point.id, marker);
-			}
-		}
-		const nextClusterIds = new Set(processedClusters.map((c) => c.id));
-		const prevClusterMarkers = clusterMarkersRef.current;
-		const prevRoots = clusterIconRootsRef.current;
-		const prevContainers = clusterIconContainersRef.current;
-		for (const [id, marker] of prevClusterMarkers) if (!nextClusterIds.has(id)) {
-			marker.setMap(null);
-			prevClusterMarkers.delete(id);
-			const root = prevRoots.get(id);
-			if (root) {
-				root.unmount();
-				prevRoots.delete(id);
-			}
-			prevContainers.delete(id);
-		}
-		for (const cluster of processedClusters) {
-			const existingMarker = prevClusterMarkers.get(cluster.id);
-			const renderer = clusterIconRef.current;
-			const iconNode = renderer ? renderer({
-				cluster,
-				count: cluster.count
-			}) : DefaultClusterIcon({ count: cluster.count });
-			if (existingMarker) {
-				existingMarker.setPosition(new naver.maps.LatLng(cluster.position.lat, cluster.position.lng));
-				const root = prevRoots.get(cluster.id);
-				if (root) root.render(iconNode);
-			} else {
-				const container = document.createElement("div");
-				container.style.cursor = "pointer";
-				const root = (0, react_dom_client.createRoot)(container);
-				root.render(iconNode);
-				prevContainers.set(cluster.id, container);
-				prevRoots.set(cluster.id, root);
-				const marker = new naver.maps.Marker({
-					position: new naver.maps.LatLng(cluster.position.lat, cluster.position.lng),
-					map,
-					icon: { content: container },
-					clickable: true
-				});
-				naver.maps.Event.addListener(marker, "click", () => {
-					onClusterClickRef.current?.({
-						cluster,
-						helpers: helpersRef.current
-					});
-				});
-				prevClusterMarkers.set(cluster.id, marker);
-			}
-		}
+		})));
+		setVisibleIds(new Set(points.map((p) => p.id)));
 	}, [
 		map,
 		sdkStatus,
@@ -2455,31 +2382,31 @@ function MarkerClusterer(props) {
 		behavior?.debounceMs,
 		recompute
 	]);
-	(0, react.useEffect)(() => {
-		return () => {
-			for (const marker of pointMarkersRef.current.values()) marker.setMap(null);
-			pointMarkersRef.current.clear();
-			for (const marker of clusterMarkersRef.current.values()) marker.setMap(null);
-			clusterMarkersRef.current.clear();
-			for (const root of clusterIconRootsRef.current.values()) root.unmount();
-			clusterIconRootsRef.current.clear();
-			clusterIconContainersRef.current.clear();
-		};
-	}, []);
 	(0, react.useEffect)(() => {
 		if (enabled) return;
-		for (const marker of pointMarkersRef.current.values()) marker.setMap(null);
-		pointMarkersRef.current.clear();
-		for (const marker of clusterMarkersRef.current.values()) marker.setMap(null);
-		clusterMarkersRef.current.clear();
-		for (const root of clusterIconRootsRef.current.values()) root.unmount();
-		clusterIconRootsRef.current.clear();
-		clusterIconContainersRef.current.clear();
+		setClusters([]);
+		setVisibleIds(/* @__PURE__ */ new Set());
 	}, [enabled]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClustererContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClustererContext.Provider, {
 		value: registry,
-		children
-	});
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClustererVisibilityContext.Provider, {
+			value: visibleIds,
+			children
+		})
+	}), enabled && clusters.map((cluster) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Marker, {
+		position: cluster.position,
+		clickable: true,
+		onClick: () => {
+			onClusterClickRef.current?.({
+				cluster,
+				helpers: helpersRef.current
+			});
+		},
+		children: clusterIcon ? clusterIcon({
+			cluster,
+			count: cluster.count
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultClusterIcon, { count: cluster.count })
+	}, cluster.id))] });
 }
 MarkerClusterer.displayName = "MarkerClusterer";