react-naver-maps-kit 1.0.1 → 1.1.1

package/dist/index.cjs

@@ -872,6 +872,27 @@ function useNaverMapInstance(options = {}) {
 	}).map;
 }
 
+//#endregion
+//#region src/overlays/marker-clusterer/ClustererContext.ts
+/**
+* `<MarkerClusterer>`가 제공하는 registry Context.
+* register/unregister/enabled만 포함하며, enabled가 바뀔 때만 갱신됩니다.
+*
+* @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
 function pickHtmlIconAnchor(icon) {
@@ -905,87 +926,87 @@ function toMarkerOptions(props, targetMap, icon) {
 	if (props.zIndex !== void 0) options.zIndex = props.zIndex;
 	return options;
 }
-function buildMarkerEventBindings(props) {
+function buildMarkerEventBindings(propsRef) {
 	return [
 		{
 			eventName: "click",
-			invoke: props.onClick ? (event) => props.onClick?.(event) : void 0
+			invoke: (event) => propsRef.current.onClick?.(event)
 		},
 		{
 			eventName: "dblclick",
-			invoke: props.onDblClick ? (event) => props.onDblClick?.(event) : void 0
+			invoke: (event) => propsRef.current.onDblClick?.(event)
 		},
 		{
 			eventName: "rightclick",
-			invoke: props.onRightClick ? (event) => props.onRightClick?.(event) : void 0
+			invoke: (event) => propsRef.current.onRightClick?.(event)
 		},
 		{
 			eventName: "mousedown",
-			invoke: props.onMouseDown ? (event) => props.onMouseDown?.(event) : void 0
+			invoke: (event) => propsRef.current.onMouseDown?.(event)
 		},
 		{
 			eventName: "mouseup",
-			invoke: props.onMouseUp ? (event) => props.onMouseUp?.(event) : void 0
+			invoke: (event) => propsRef.current.onMouseUp?.(event)
 		},
 		{
 			eventName: "touchstart",
-			invoke: props.onTouchStart ? (event) => props.onTouchStart?.(event) : void 0
+			invoke: (event) => propsRef.current.onTouchStart?.(event)
 		},
 		{
 			eventName: "touchend",
-			invoke: props.onTouchEnd ? (event) => props.onTouchEnd?.(event) : void 0
+			invoke: (event) => propsRef.current.onTouchEnd?.(event)
 		},
 		{
 			eventName: "dragstart",
-			invoke: props.onDragStart ? (event) => props.onDragStart?.(event) : void 0
+			invoke: (event) => propsRef.current.onDragStart?.(event)
 		},
 		{
 			eventName: "drag",
-			invoke: props.onDrag ? (event) => props.onDrag?.(event) : void 0
+			invoke: (event) => propsRef.current.onDrag?.(event)
 		},
 		{
 			eventName: "dragend",
-			invoke: props.onDragEnd ? (event) => props.onDragEnd?.(event) : void 0
+			invoke: (event) => propsRef.current.onDragEnd?.(event)
 		},
 		{
 			eventName: "clickable_changed",
-			invoke: props.onClickableChanged ? (event) => props.onClickableChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onClickableChanged?.(event)
 		},
 		{
 			eventName: "cursor_changed",
-			invoke: props.onCursorChanged ? (event) => props.onCursorChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onCursorChanged?.(event)
 		},
 		{
 			eventName: "draggable_changed",
-			invoke: props.onDraggableChanged ? (event) => props.onDraggableChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onDraggableChanged?.(event)
 		},
 		{
 			eventName: "icon_changed",
-			invoke: props.onIconChanged ? (event) => props.onIconChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onIconChanged?.(event)
 		},
 		{
 			eventName: "icon_loaded",
-			invoke: props.onIconLoaded ? (event) => props.onIconLoaded?.(event) : void 0
+			invoke: (event) => propsRef.current.onIconLoaded?.(event)
 		},
 		{
 			eventName: "position_changed",
-			invoke: props.onPositionChanged ? (event) => props.onPositionChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onPositionChanged?.(event)
 		},
 		{
 			eventName: "shape_changed",
-			invoke: props.onShapeChanged ? (event) => props.onShapeChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onShapeChanged?.(event)
 		},
 		{
 			eventName: "title_changed",
-			invoke: props.onTitleChanged ? (event) => props.onTitleChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onTitleChanged?.(event)
 		},
 		{
 			eventName: "visible_changed",
-			invoke: props.onVisibleChanged ? (event) => props.onVisibleChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onVisibleChanged?.(event)
 		},
 		{
 			eventName: "zIndex_changed",
-			invoke: props.onZIndexChanged ? (event) => props.onZIndexChanged?.(event) : void 0
+			invoke: (event) => propsRef.current.onZIndexChanged?.(event)
 		}
 	];
 }
@@ -998,24 +1019,73 @@ function bindMarkerEventListeners(marker, listenersRef, bindings) {
 		binding.invoke?.(event);
 	}));
 }
+function toLatLngLiteral(position) {
+	if (!position) return null;
+	if (typeof position === "object" && "lat" in position && "lng" in position) {
+		if (typeof position.lat === "number" && typeof position.lng === "number") return {
+			lat: position.lat,
+			lng: position.lng
+		};
+		if (typeof position.lat === "function" && typeof position.lng === "function") return {
+			lat: position.lat(),
+			lng: position.lng()
+		};
+	}
+	if (typeof position === "object" && "x" in position && "y" in position) {
+		const p = position;
+		if (typeof p.x === "number" && typeof p.y === "number") return {
+			lat: p.y,
+			lng: p.x
+		};
+	}
+	return null;
+}
 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;
+	const propsRef = (0, react.useRef)(props);
+	(0, react.useEffect)(() => {
+		propsRef.current = props;
+	});
+	(0, react.useEffect)(() => {
+		if (!clustererRegistry) return;
+		const id = props.clustererItemId ?? autoId;
+		const latLng = toLatLngLiteral(props.position);
+		if (!latLng) return;
+		clustererRegistry.register({
+			id,
+			position: latLng,
+			data: props.item ?? null,
+			markerOptions: props.icon !== void 0 ? { icon: props.icon } : void 0
+		});
+		return () => {
+			clustererRegistry.unregister(id);
+		};
+	}, [
+		autoId,
+		clustererRegistry,
+		props.clustererItemId,
+		props.position,
+		props.item,
+		props.icon
+	]);
 	(0, react.useEffect)(() => {
 		onMarkerDestroyRef.current = props.onMarkerDestroy;
 	}, [props.onMarkerDestroy]);
 	(0, react.useEffect)(() => {
-		if (typeof document === "undefined") return;
-		setMarkerDiv(document.createElement("div"));
-	}, []);
-	(0, react.useEffect)(() => {
-		if (!hasChildren || !markerDiv) {
+		if (!hasChildren) {
 			setPortalReady(false);
 			return;
 		}
@@ -1087,68 +1157,1259 @@ const Marker = (0, react.forwardRef)(function MarkerInner(props, ref) {
 		setZIndex: (...args) => invokeMarkerMethod("setZIndex", ...args)
 	}), [invokeMarkerMethod]);
 	(0, react.useEffect)(() => {
+		if (isHiddenByClusterer) return;
 		if (sdkStatus !== "ready" || !targetMap || markerRef.current) return;
 		if (hasChildren && !portalReady) return;
 		try {
-			const resolvedIcon = resolveMarkerIcon(props.icon, markerDiv, hasChildren);
-			const marker = new naver.maps.Marker(toMarkerOptions(props, targetMap, resolvedIcon));
+			const resolvedIcon = resolveMarkerIcon(propsRef.current.icon, markerDiv, hasChildren);
+			const marker = new naver.maps.Marker(toMarkerOptions(propsRef.current, targetMap, resolvedIcon));
 			markerRef.current = marker;
-			if (props.collisionBehavior !== void 0) marker.setOptions("collisionBehavior", props.collisionBehavior);
-			if (props.collisionBoxSize !== void 0) marker.setOptions("collisionBoxSize", props.collisionBoxSize);
-			bindMarkerEventListeners(marker, markerEventListenersRef, buildMarkerEventBindings(props));
-			props.onMarkerReady?.(marker);
+			if (propsRef.current.collisionBehavior !== void 0) marker.setOptions("collisionBehavior", propsRef.current.collisionBehavior);
+			if (propsRef.current.collisionBoxSize !== void 0) marker.setOptions("collisionBoxSize", propsRef.current.collisionBoxSize);
+			bindMarkerEventListeners(marker, markerEventListenersRef, buildMarkerEventBindings(propsRef));
+			propsRef.current.onMarkerReady?.(marker);
 		} catch (error) {
 			const normalizedError = error instanceof Error ? error : /* @__PURE__ */ new Error("Failed to create naver.maps.Marker instance.");
-			props.onMarkerError?.(normalizedError);
+			propsRef.current.onMarkerError?.(normalizedError);
 		}
 	}, [
+		isHiddenByClusterer,
 		hasChildren,
 		markerDiv,
 		portalReady,
-		props,
 		sdkStatus,
 		targetMap
 	]);
 	(0, react.useLayoutEffect)(() => {
+		if (isHiddenByClusterer) return;
 		const marker = markerRef.current;
 		if (!marker || !targetMap) return;
 		const rafId = requestAnimationFrame(() => {
-			const nextOptions = toMarkerOptions(props, targetMap, hasChildren && portalReady ? resolveMarkerIcon(props.icon, markerDiv, hasChildren) : props.icon);
+			const currentProps = propsRef.current;
+			const nextOptions = toMarkerOptions(currentProps, targetMap, hasChildren && portalReady ? resolveMarkerIcon(currentProps.icon, markerDiv, hasChildren) : currentProps.icon);
 			marker.setOptions(nextOptions);
-			if (props.collisionBehavior !== void 0) marker.setOptions("collisionBehavior", props.collisionBehavior);
-			if (props.collisionBoxSize !== void 0) marker.setOptions("collisionBoxSize", props.collisionBoxSize);
+			if (currentProps.collisionBehavior !== void 0) marker.setOptions("collisionBehavior", currentProps.collisionBehavior);
+			if (currentProps.collisionBoxSize !== void 0) marker.setOptions("collisionBoxSize", currentProps.collisionBoxSize);
 		});
 		return () => {
 			cancelAnimationFrame(rafId);
 		};
 	}, [
+		isHiddenByClusterer,
 		hasChildren,
 		markerDiv,
 		portalReady,
-		props,
-		targetMap
+		targetMap,
+		props.position,
+		props.icon,
+		props.animation,
+		props.shape,
+		props.title,
+		props.cursor,
+		props.clickable,
+		props.draggable,
+		props.visible,
+		props.zIndex,
+		props.collisionBehavior,
+		props.collisionBoxSize
 	]);
 	(0, react.useEffect)(() => {
+		if (isHiddenByClusterer) return;
 		const marker = markerRef.current;
 		if (!marker) return;
-		bindMarkerEventListeners(marker, markerEventListenersRef, buildMarkerEventBindings(props));
+		bindMarkerEventListeners(marker, markerEventListenersRef, buildMarkerEventBindings(propsRef));
 		return () => {
 			if (markerEventListenersRef.current.length > 0) {
 				naver.maps.Event.removeListener(markerEventListenersRef.current);
 				markerEventListenersRef.current = [];
 			}
 		};
-	}, [props]);
+	}, [isHiddenByClusterer]);
 	(0, react.useEffect)(() => {
+		if (isHiddenByClusterer) return;
 		return () => {
 			teardownMarker();
 		};
-	}, [teardownMarker]);
+	}, [isHiddenByClusterer, teardownMarker]);
+	if (isHiddenByClusterer) return null;
 	if (!hasChildren || !markerDiv) return null;
 	return (0, react_dom.createPortal)(props.children, markerDiv);
 });
 Marker.displayName = "Marker";
 
+//#endregion
+//#region src/overlays/marker-clusterer/algorithms/grid.ts
+const DEFAULT_OPTIONS$2 = {
+	gridSize: 60,
+	minClusterSize: 2,
+	maxZoom: 21
+};
+var GridAlgorithm = class {
+	options;
+	constructor(options) {
+		this.options = {
+			...DEFAULT_OPTIONS$2,
+			...options
+		};
+	}
+	cluster(items, ctx) {
+		if (ctx.zoom >= this.options.maxZoom) return {
+			clusters: [],
+			points: items
+		};
+		const { gridSize } = this.options;
+		const scale = Math.pow(2, ctx.zoom);
+		const cellMap = /* @__PURE__ */ new Map();
+		for (const item of items) {
+			const worldX = (item.position.lng + 180) / 360 * scale;
+			const latRad = item.position.lat * Math.PI / 180;
+			const worldY = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * scale;
+			const key = `${Math.floor(worldX * 256 / gridSize)}:${Math.floor(worldY * 256 / gridSize)}`;
+			let cell = cellMap.get(key);
+			if (!cell) {
+				cell = [];
+				cellMap.set(key, cell);
+			}
+			cell.push(item);
+		}
+		const clusters = [];
+		const points = [];
+		for (const [key, cellItems] of cellMap) {
+			if (cellItems.length < this.options.minClusterSize) {
+				points.push(...cellItems);
+				continue;
+			}
+			let sumLat = 0;
+			let sumLng = 0;
+			let minLat = Infinity;
+			let maxLat = -Infinity;
+			let minLng = Infinity;
+			let maxLng = -Infinity;
+			for (const item of cellItems) {
+				sumLat += item.position.lat;
+				sumLng += item.position.lng;
+				minLat = Math.min(minLat, item.position.lat);
+				maxLat = Math.max(maxLat, item.position.lat);
+				minLng = Math.min(minLng, item.position.lng);
+				maxLng = Math.max(maxLng, item.position.lng);
+			}
+			clusters.push({
+				id: `grid-${key}`,
+				position: {
+					lat: sumLat / cellItems.length,
+					lng: sumLng / cellItems.length
+				},
+				count: cellItems.length,
+				bounds: {
+					south: minLat,
+					north: maxLat,
+					west: minLng,
+					east: maxLng
+				},
+				items: cellItems
+			});
+		}
+		return {
+			clusters,
+			points
+		};
+	}
+	setOptions(options) {
+		if (typeof options === "object" && options !== null) this.options = {
+			...this.options,
+			...options
+		};
+	}
+};
+
+//#endregion
+//#region src/overlays/marker-clusterer/algorithms/radius.ts
+const DEFAULT_OPTIONS$1 = {
+	radius: 60,
+	minClusterSize: 2,
+	maxZoom: 21
+};
+function toWorldPixel(lat, lng, zoom) {
+	const scale = Math.pow(2, zoom) * 256;
+	const x = (lng + 180) / 360 * scale;
+	const latRad = lat * Math.PI / 180;
+	return {
+		x,
+		y: (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * scale
+	};
+}
+function pixelDistance(a, b) {
+	const dx = a.x - b.x;
+	const dy = a.y - b.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+var RadiusAlgorithm = class {
+	options;
+	constructor(options) {
+		this.options = {
+			...DEFAULT_OPTIONS$1,
+			...options
+		};
+	}
+	cluster(items, ctx) {
+		if (ctx.zoom >= this.options.maxZoom) return {
+			clusters: [],
+			points: items
+		};
+		const { radius } = this.options;
+		const used = /* @__PURE__ */ new Set();
+		const clusters = [];
+		const points = [];
+		const pixelPositions = items.map((item) => toWorldPixel(item.position.lat, item.position.lng, ctx.zoom));
+		for (let i = 0; i < items.length; i++) {
+			if (used.has(items[i].id)) continue;
+			const center = pixelPositions[i];
+			const group = [items[i]];
+			used.add(items[i].id);
+			for (let j = i + 1; j < items.length; j++) {
+				if (used.has(items[j].id)) continue;
+				if (pixelDistance(center, pixelPositions[j]) <= radius) {
+					group.push(items[j]);
+					used.add(items[j].id);
+				}
+			}
+			if (group.length < this.options.minClusterSize) {
+				points.push(...group);
+				continue;
+			}
+			let sumLat = 0;
+			let sumLng = 0;
+			let minLat = Infinity;
+			let maxLat = -Infinity;
+			let minLng = Infinity;
+			let maxLng = -Infinity;
+			for (const item of group) {
+				sumLat += item.position.lat;
+				sumLng += item.position.lng;
+				minLat = Math.min(minLat, item.position.lat);
+				maxLat = Math.max(maxLat, item.position.lat);
+				minLng = Math.min(minLng, item.position.lng);
+				maxLng = Math.max(maxLng, item.position.lng);
+			}
+			const avgLat = sumLat / group.length;
+			const avgLng = sumLng / group.length;
+			clusters.push({
+				id: `radius-${avgLat.toFixed(6)}-${avgLng.toFixed(6)}-${group.length}`,
+				position: {
+					lat: avgLat,
+					lng: avgLng
+				},
+				count: group.length,
+				bounds: {
+					south: minLat,
+					north: maxLat,
+					west: minLng,
+					east: maxLng
+				},
+				items: group
+			});
+		}
+		return {
+			clusters,
+			points
+		};
+	}
+	setOptions(options) {
+		if (typeof options === "object" && options !== null) this.options = {
+			...this.options,
+			...options
+		};
+	}
+};
+
+//#endregion
+//#region ../../node_modules/.pnpm/kdbush@4.0.2/node_modules/kdbush/index.js
+const ARRAY_TYPES = [
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array
+];
+/** @typedef {Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor} TypedArrayConstructor */
+const VERSION = 1;
+const HEADER_SIZE = 8;
+var KDBush = class KDBush {
+	/**
+	* Creates an index from raw `ArrayBuffer` data.
+	* @param {ArrayBuffer} data
+	*/
+	static from(data) {
+		if (!(data instanceof ArrayBuffer)) throw new Error("Data must be an instance of ArrayBuffer.");
+		const [magic, versionAndType] = new Uint8Array(data, 0, 2);
+		if (magic !== 219) throw new Error("Data does not appear to be in a KDBush format.");
+		const version = versionAndType >> 4;
+		if (version !== VERSION) throw new Error(`Got v${version} data when expected v${VERSION}.`);
+		const ArrayType = ARRAY_TYPES[versionAndType & 15];
+		if (!ArrayType) throw new Error("Unrecognized array type.");
+		const [nodeSize] = new Uint16Array(data, 2, 1);
+		const [numItems] = new Uint32Array(data, 4, 1);
+		return new KDBush(numItems, nodeSize, ArrayType, data);
+	}
+	/**
+	* Creates an index that will hold a given number of items.
+	* @param {number} numItems
+	* @param {number} [nodeSize=64] Size of the KD-tree node (64 by default).
+	* @param {TypedArrayConstructor} [ArrayType=Float64Array] The array type used for coordinates storage (`Float64Array` by default).
+	* @param {ArrayBuffer} [data] (For internal use only)
+	*/
+	constructor(numItems, nodeSize = 64, ArrayType = Float64Array, data) {
+		if (isNaN(numItems) || numItems < 0) throw new Error(`Unpexpected numItems value: ${numItems}.`);
+		this.numItems = +numItems;
+		this.nodeSize = Math.min(Math.max(+nodeSize, 2), 65535);
+		this.ArrayType = ArrayType;
+		this.IndexArrayType = numItems < 65536 ? Uint16Array : Uint32Array;
+		const arrayTypeIndex = ARRAY_TYPES.indexOf(this.ArrayType);
+		const coordsByteSize = numItems * 2 * this.ArrayType.BYTES_PER_ELEMENT;
+		const idsByteSize = numItems * this.IndexArrayType.BYTES_PER_ELEMENT;
+		const padCoords = (8 - idsByteSize % 8) % 8;
+		if (arrayTypeIndex < 0) throw new Error(`Unexpected typed array class: ${ArrayType}.`);
+		if (data && data instanceof ArrayBuffer) {
+			this.data = data;
+			this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
+			this.coords = new this.ArrayType(this.data, HEADER_SIZE + idsByteSize + padCoords, numItems * 2);
+			this._pos = numItems * 2;
+			this._finished = true;
+		} else {
+			this.data = new ArrayBuffer(HEADER_SIZE + coordsByteSize + idsByteSize + padCoords);
+			this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
+			this.coords = new this.ArrayType(this.data, HEADER_SIZE + idsByteSize + padCoords, numItems * 2);
+			this._pos = 0;
+			this._finished = false;
+			new Uint8Array(this.data, 0, 2).set([219, (VERSION << 4) + arrayTypeIndex]);
+			new Uint16Array(this.data, 2, 1)[0] = nodeSize;
+			new Uint32Array(this.data, 4, 1)[0] = numItems;
+		}
+	}
+	/**
+	* Add a point to the index.
+	* @param {number} x
+	* @param {number} y
+	* @returns {number} An incremental index associated with the added item (starting from `0`).
+	*/
+	add(x, y) {
+		const index = this._pos >> 1;
+		this.ids[index] = index;
+		this.coords[this._pos++] = x;
+		this.coords[this._pos++] = y;
+		return index;
+	}
+	/**
+	* Perform indexing of the added points.
+	*/
+	finish() {
+		const numAdded = this._pos >> 1;
+		if (numAdded !== this.numItems) throw new Error(`Added ${numAdded} items when expected ${this.numItems}.`);
+		sort(this.ids, this.coords, this.nodeSize, 0, this.numItems - 1, 0);
+		this._finished = true;
+		return this;
+	}
+	/**
+	* Search the index for items within a given bounding box.
+	* @param {number} minX
+	* @param {number} minY
+	* @param {number} maxX
+	* @param {number} maxY
+	* @returns {number[]} An array of indices correponding to the found items.
+	*/
+	range(minX, minY, maxX, maxY) {
+		if (!this._finished) throw new Error("Data not yet indexed - call index.finish().");
+		const { ids, coords, nodeSize } = this;
+		const stack = [
+			0,
+			ids.length - 1,
+			0
+		];
+		const result = [];
+		while (stack.length) {
+			const axis = stack.pop() || 0;
+			const right = stack.pop() || 0;
+			const left = stack.pop() || 0;
+			if (right - left <= nodeSize) {
+				for (let i = left; i <= right; i++) {
+					const x = coords[2 * i];
+					const y = coords[2 * i + 1];
+					if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[i]);
+				}
+				continue;
+			}
+			const m = left + right >> 1;
+			const x = coords[2 * m];
+			const y = coords[2 * m + 1];
+			if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[m]);
+			if (axis === 0 ? minX <= x : minY <= y) {
+				stack.push(left);
+				stack.push(m - 1);
+				stack.push(1 - axis);
+			}
+			if (axis === 0 ? maxX >= x : maxY >= y) {
+				stack.push(m + 1);
+				stack.push(right);
+				stack.push(1 - axis);
+			}
+		}
+		return result;
+	}
+	/**
+	* Search the index for items within a given radius.
+	* @param {number} qx
+	* @param {number} qy
+	* @param {number} r Query radius.
+	* @returns {number[]} An array of indices correponding to the found items.
+	*/
+	within(qx, qy, r) {
+		if (!this._finished) throw new Error("Data not yet indexed - call index.finish().");
+		const { ids, coords, nodeSize } = this;
+		const stack = [
+			0,
+			ids.length - 1,
+			0
+		];
+		const result = [];
+		const r2 = r * r;
+		while (stack.length) {
+			const axis = stack.pop() || 0;
+			const right = stack.pop() || 0;
+			const left = stack.pop() || 0;
+			if (right - left <= nodeSize) {
+				for (let i = left; i <= right; i++) if (sqDist(coords[2 * i], coords[2 * i + 1], qx, qy) <= r2) result.push(ids[i]);
+				continue;
+			}
+			const m = left + right >> 1;
+			const x = coords[2 * m];
+			const y = coords[2 * m + 1];
+			if (sqDist(x, y, qx, qy) <= r2) result.push(ids[m]);
+			if (axis === 0 ? qx - r <= x : qy - r <= y) {
+				stack.push(left);
+				stack.push(m - 1);
+				stack.push(1 - axis);
+			}
+			if (axis === 0 ? qx + r >= x : qy + r >= y) {
+				stack.push(m + 1);
+				stack.push(right);
+				stack.push(1 - axis);
+			}
+		}
+		return result;
+	}
+};
+/**
+* @param {Uint16Array | Uint32Array} ids
+* @param {InstanceType<TypedArrayConstructor>} coords
+* @param {number} nodeSize
+* @param {number} left
+* @param {number} right
+* @param {number} axis
+*/
+function sort(ids, coords, nodeSize, left, right, axis) {
+	if (right - left <= nodeSize) return;
+	const m = left + right >> 1;
+	select(ids, coords, m, left, right, axis);
+	sort(ids, coords, nodeSize, left, m - 1, 1 - axis);
+	sort(ids, coords, nodeSize, m + 1, right, 1 - axis);
+}
+/**
+* Custom Floyd-Rivest selection algorithm: sort ids and coords so that
+* [left..k-1] items are smaller than k-th item (on either x or y axis)
+* @param {Uint16Array | Uint32Array} ids
+* @param {InstanceType<TypedArrayConstructor>} coords
+* @param {number} k
+* @param {number} left
+* @param {number} right
+* @param {number} axis
+*/
+function select(ids, coords, k, left, right, axis) {
+	while (right > left) {
+		if (right - left > 600) {
+			const n = right - left + 1;
+			const m = k - left + 1;
+			const z = Math.log(n);
+			const s = .5 * Math.exp(2 * z / 3);
+			const sd = .5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
+			select(ids, coords, k, Math.max(left, Math.floor(k - m * s / n + sd)), Math.min(right, Math.floor(k + (n - m) * s / n + sd)), axis);
+		}
+		const t = coords[2 * k + axis];
+		let i = left;
+		let j = right;
+		swapItem(ids, coords, left, k);
+		if (coords[2 * right + axis] > t) swapItem(ids, coords, left, right);
+		while (i < j) {
+			swapItem(ids, coords, i, j);
+			i++;
+			j--;
+			while (coords[2 * i + axis] < t) i++;
+			while (coords[2 * j + axis] > t) j--;
+		}
+		if (coords[2 * left + axis] === t) swapItem(ids, coords, left, j);
+		else {
+			j++;
+			swapItem(ids, coords, j, right);
+		}
+		if (j <= k) left = j + 1;
+		if (k <= j) right = j - 1;
+	}
+}
+/**
+* @param {Uint16Array | Uint32Array} ids
+* @param {InstanceType<TypedArrayConstructor>} coords
+* @param {number} i
+* @param {number} j
+*/
+function swapItem(ids, coords, i, j) {
+	swap(ids, i, j);
+	swap(coords, 2 * i, 2 * j);
+	swap(coords, 2 * i + 1, 2 * j + 1);
+}
+/**
+* @param {InstanceType<TypedArrayConstructor>} arr
+* @param {number} i
+* @param {number} j
+*/
+function swap(arr, i, j) {
+	const tmp = arr[i];
+	arr[i] = arr[j];
+	arr[j] = tmp;
+}
+/**
+* @param {number} ax
+* @param {number} ay
+* @param {number} bx
+* @param {number} by
+*/
+function sqDist(ax, ay, bx, by) {
+	const dx = ax - bx;
+	const dy = ay - by;
+	return dx * dx + dy * dy;
+}
+
+//#endregion
+//#region ../../node_modules/.pnpm/supercluster@8.0.1/node_modules/supercluster/index.js
+const defaultOptions = {
+	minZoom: 0,
+	maxZoom: 16,
+	minPoints: 2,
+	radius: 40,
+	extent: 512,
+	nodeSize: 64,
+	log: false,
+	generateId: false,
+	reduce: null,
+	map: (props) => props
+};
+const fround = Math.fround || ((tmp) => ((x) => {
+	tmp[0] = +x;
+	return tmp[0];
+}))(new Float32Array(1));
+const OFFSET_ZOOM = 2;
+const OFFSET_ID = 3;
+const OFFSET_PARENT = 4;
+const OFFSET_NUM = 5;
+const OFFSET_PROP = 6;
+var Supercluster = class {
+	constructor(options) {
+		this.options = Object.assign(Object.create(defaultOptions), options);
+		this.trees = new Array(this.options.maxZoom + 1);
+		this.stride = this.options.reduce ? 7 : 6;
+		this.clusterProps = [];
+	}
+	load(points) {
+		const { log, minZoom, maxZoom } = this.options;
+		if (log) console.time("total time");
+		const timerId = `prepare ${points.length} points`;
+		if (log) console.time(timerId);
+		this.points = points;
+		const data = [];
+		for (let i = 0; i < points.length; i++) {
+			const p = points[i];
+			if (!p.geometry) continue;
+			const [lng, lat] = p.geometry.coordinates;
+			const x = fround(lngX(lng));
+			const y = fround(latY(lat));
+			data.push(x, y, Infinity, i, -1, 1);
+			if (this.options.reduce) data.push(0);
+		}
+		let tree = this.trees[maxZoom + 1] = this._createTree(data);
+		if (log) console.timeEnd(timerId);
+		for (let z = maxZoom; z >= minZoom; z--) {
+			const now = +Date.now();
+			tree = this.trees[z] = this._createTree(this._cluster(tree, z));
+			if (log) console.log("z%d: %d clusters in %dms", z, tree.numItems, +Date.now() - now);
+		}
+		if (log) console.timeEnd("total time");
+		return this;
+	}
+	getClusters(bbox, zoom) {
+		let minLng = ((bbox[0] + 180) % 360 + 360) % 360 - 180;
+		const minLat = Math.max(-90, Math.min(90, bbox[1]));
+		let maxLng = bbox[2] === 180 ? 180 : ((bbox[2] + 180) % 360 + 360) % 360 - 180;
+		const maxLat = Math.max(-90, Math.min(90, bbox[3]));
+		if (bbox[2] - bbox[0] >= 360) {
+			minLng = -180;
+			maxLng = 180;
+		} else if (minLng > maxLng) {
+			const easternHem = this.getClusters([
+				minLng,
+				minLat,
+				180,
+				maxLat
+			], zoom);
+			const westernHem = this.getClusters([
+				-180,
+				minLat,
+				maxLng,
+				maxLat
+			], zoom);
+			return easternHem.concat(westernHem);
+		}
+		const tree = this.trees[this._limitZoom(zoom)];
+		const ids = tree.range(lngX(minLng), latY(maxLat), lngX(maxLng), latY(minLat));
+		const data = tree.data;
+		const clusters = [];
+		for (const id of ids) {
+			const k = this.stride * id;
+			clusters.push(data[k + OFFSET_NUM] > 1 ? getClusterJSON(data, k, this.clusterProps) : this.points[data[k + OFFSET_ID]]);
+		}
+		return clusters;
+	}
+	getChildren(clusterId) {
+		const originId = this._getOriginId(clusterId);
+		const originZoom = this._getOriginZoom(clusterId);
+		const errorMsg = "No cluster with the specified id.";
+		const tree = this.trees[originZoom];
+		if (!tree) throw new Error(errorMsg);
+		const data = tree.data;
+		if (originId * this.stride >= data.length) throw new Error(errorMsg);
+		const r = this.options.radius / (this.options.extent * Math.pow(2, originZoom - 1));
+		const x = data[originId * this.stride];
+		const y = data[originId * this.stride + 1];
+		const ids = tree.within(x, y, r);
+		const children = [];
+		for (const id of ids) {
+			const k = id * this.stride;
+			if (data[k + OFFSET_PARENT] === clusterId) children.push(data[k + OFFSET_NUM] > 1 ? getClusterJSON(data, k, this.clusterProps) : this.points[data[k + OFFSET_ID]]);
+		}
+		if (children.length === 0) throw new Error(errorMsg);
+		return children;
+	}
+	getLeaves(clusterId, limit, offset) {
+		limit = limit || 10;
+		offset = offset || 0;
+		const leaves = [];
+		this._appendLeaves(leaves, clusterId, limit, offset, 0);
+		return leaves;
+	}
+	getTile(z, x, y) {
+		const tree = this.trees[this._limitZoom(z)];
+		const z2 = Math.pow(2, z);
+		const { extent, radius } = this.options;
+		const p = radius / extent;
+		const top = (y - p) / z2;
+		const bottom = (y + 1 + p) / z2;
+		const tile = { features: [] };
+		this._addTileFeatures(tree.range((x - p) / z2, top, (x + 1 + p) / z2, bottom), tree.data, x, y, z2, tile);
+		if (x === 0) this._addTileFeatures(tree.range(1 - p / z2, top, 1, bottom), tree.data, z2, y, z2, tile);
+		if (x === z2 - 1) this._addTileFeatures(tree.range(0, top, p / z2, bottom), tree.data, -1, y, z2, tile);
+		return tile.features.length ? tile : null;
+	}
+	getClusterExpansionZoom(clusterId) {
+		let expansionZoom = this._getOriginZoom(clusterId) - 1;
+		while (expansionZoom <= this.options.maxZoom) {
+			const children = this.getChildren(clusterId);
+			expansionZoom++;
+			if (children.length !== 1) break;
+			clusterId = children[0].properties.cluster_id;
+		}
+		return expansionZoom;
+	}
+	_appendLeaves(result, clusterId, limit, offset, skipped) {
+		const children = this.getChildren(clusterId);
+		for (const child of children) {
+			const props = child.properties;
+			if (props && props.cluster) if (skipped + props.point_count <= offset) skipped += props.point_count;
+			else skipped = this._appendLeaves(result, props.cluster_id, limit, offset, skipped);
+			else if (skipped < offset) skipped++;
+			else result.push(child);
+			if (result.length === limit) break;
+		}
+		return skipped;
+	}
+	_createTree(data) {
+		const tree = new KDBush(data.length / this.stride | 0, this.options.nodeSize, Float32Array);
+		for (let i = 0; i < data.length; i += this.stride) tree.add(data[i], data[i + 1]);
+		tree.finish();
+		tree.data = data;
+		return tree;
+	}
+	_addTileFeatures(ids, data, x, y, z2, tile) {
+		for (const i of ids) {
+			const k = i * this.stride;
+			const isCluster = data[k + OFFSET_NUM] > 1;
+			let tags, px, py;
+			if (isCluster) {
+				tags = getClusterProperties(data, k, this.clusterProps);
+				px = data[k];
+				py = data[k + 1];
+			} else {
+				const p = this.points[data[k + OFFSET_ID]];
+				tags = p.properties;
+				const [lng, lat] = p.geometry.coordinates;
+				px = lngX(lng);
+				py = latY(lat);
+			}
+			const f = {
+				type: 1,
+				geometry: [[Math.round(this.options.extent * (px * z2 - x)), Math.round(this.options.extent * (py * z2 - y))]],
+				tags
+			};
+			let id;
+			if (isCluster || this.options.generateId) id = data[k + OFFSET_ID];
+			else id = this.points[data[k + OFFSET_ID]].id;
+			if (id !== void 0) f.id = id;
+			tile.features.push(f);
+		}
+	}
+	_limitZoom(z) {
+		return Math.max(this.options.minZoom, Math.min(Math.floor(+z), this.options.maxZoom + 1));
+	}
+	_cluster(tree, zoom) {
+		const { radius, extent, reduce, minPoints } = this.options;
+		const r = radius / (extent * Math.pow(2, zoom));
+		const data = tree.data;
+		const nextData = [];
+		const stride = this.stride;
+		for (let i = 0; i < data.length; i += stride) {
+			if (data[i + OFFSET_ZOOM] <= zoom) continue;
+			data[i + OFFSET_ZOOM] = zoom;
+			const x = data[i];
+			const y = data[i + 1];
+			const neighborIds = tree.within(data[i], data[i + 1], r);
+			const numPointsOrigin = data[i + OFFSET_NUM];
+			let numPoints = numPointsOrigin;
+			for (const neighborId of neighborIds) {
+				const k = neighborId * stride;
+				if (data[k + OFFSET_ZOOM] > zoom) numPoints += data[k + OFFSET_NUM];
+			}
+			if (numPoints > numPointsOrigin && numPoints >= minPoints) {
+				let wx = x * numPointsOrigin;
+				let wy = y * numPointsOrigin;
+				let clusterProperties;
+				let clusterPropIndex = -1;
+				const id = ((i / stride | 0) << 5) + (zoom + 1) + this.points.length;
+				for (const neighborId of neighborIds) {
+					const k = neighborId * stride;
+					if (data[k + OFFSET_ZOOM] <= zoom) continue;
+					data[k + OFFSET_ZOOM] = zoom;
+					const numPoints2 = data[k + OFFSET_NUM];
+					wx += data[k] * numPoints2;
+					wy += data[k + 1] * numPoints2;
+					data[k + OFFSET_PARENT] = id;
+					if (reduce) {
+						if (!clusterProperties) {
+							clusterProperties = this._map(data, i, true);
+							clusterPropIndex = this.clusterProps.length;
+							this.clusterProps.push(clusterProperties);
+						}
+						reduce(clusterProperties, this._map(data, k));
+					}
+				}
+				data[i + OFFSET_PARENT] = id;
+				nextData.push(wx / numPoints, wy / numPoints, Infinity, id, -1, numPoints);
+				if (reduce) nextData.push(clusterPropIndex);
+			} else {
+				for (let j = 0; j < stride; j++) nextData.push(data[i + j]);
+				if (numPoints > 1) for (const neighborId of neighborIds) {
+					const k = neighborId * stride;
+					if (data[k + OFFSET_ZOOM] <= zoom) continue;
+					data[k + OFFSET_ZOOM] = zoom;
+					for (let j = 0; j < stride; j++) nextData.push(data[k + j]);
+				}
+			}
+		}
+		return nextData;
+	}
+	_getOriginId(clusterId) {
+		return clusterId - this.points.length >> 5;
+	}
+	_getOriginZoom(clusterId) {
+		return (clusterId - this.points.length) % 32;
+	}
+	_map(data, i, clone) {
+		if (data[i + OFFSET_NUM] > 1) {
+			const props = this.clusterProps[data[i + OFFSET_PROP]];
+			return clone ? Object.assign({}, props) : props;
+		}
+		const original = this.points[data[i + OFFSET_ID]].properties;
+		const result = this.options.map(original);
+		return clone && result === original ? Object.assign({}, result) : result;
+	}
+};
+function getClusterJSON(data, i, clusterProps) {
+	return {
+		type: "Feature",
+		id: data[i + OFFSET_ID],
+		properties: getClusterProperties(data, i, clusterProps),
+		geometry: {
+			type: "Point",
+			coordinates: [xLng(data[i]), yLat(data[i + 1])]
+		}
+	};
+}
+function getClusterProperties(data, i, clusterProps) {
+	const count = data[i + OFFSET_NUM];
+	const abbrev = count >= 1e4 ? `${Math.round(count / 1e3)}k` : count >= 1e3 ? `${Math.round(count / 100) / 10}k` : count;
+	const propIndex = data[i + OFFSET_PROP];
+	const properties = propIndex === -1 ? {} : Object.assign({}, clusterProps[propIndex]);
+	return Object.assign(properties, {
+		cluster: true,
+		cluster_id: data[i + OFFSET_ID],
+		point_count: count,
+		point_count_abbreviated: abbrev
+	});
+}
+function lngX(lng) {
+	return lng / 360 + .5;
+}
+function latY(lat) {
+	const sin = Math.sin(lat * Math.PI / 180);
+	const y = .5 - .25 * Math.log((1 + sin) / (1 - sin)) / Math.PI;
+	return y < 0 ? 0 : y > 1 ? 1 : y;
+}
+function xLng(x) {
+	return (x - .5) * 360;
+}
+function yLat(y) {
+	const y2 = (180 - y * 360) * Math.PI / 180;
+	return 360 * Math.atan(Math.exp(y2)) / Math.PI - 90;
+}
+
+//#endregion
+//#region src/overlays/marker-clusterer/algorithms/supercluster.ts
+const DEFAULT_OPTIONS = {
+	radius: 60,
+	minZoom: 0,
+	maxZoom: 16,
+	extent: 512,
+	nodeSize: 64
+};
+var SuperclusterAlgorithm = class {
+	options;
+	index;
+	itemMap = /* @__PURE__ */ new Map();
+	dirty = true;
+	constructor(options) {
+		this.options = {
+			...DEFAULT_OPTIONS,
+			...options
+		};
+		this.index = new Supercluster({
+			radius: this.options.radius,
+			minZoom: this.options.minZoom,
+			maxZoom: this.options.maxZoom,
+			extent: this.options.extent,
+			nodeSize: this.options.nodeSize
+		});
+	}
+	cluster(items, ctx) {
+		if (this.dirty || this.itemMap.size !== items.length) this.load(items);
+		const { south, west, north, east } = ctx.bounds;
+		const rawClusters = this.index.getClusters([
+			west,
+			south,
+			east,
+			north
+		], Math.floor(ctx.zoom));
+		const clusters = [];
+		const singlePoints = [];
+		for (const feature of rawClusters) {
+			const [lng, lat] = feature.geometry.coordinates;
+			const props = feature.properties;
+			if ("cluster" in props && props.cluster === true) {
+				const clusterProps = props;
+				const clusterId = feature.id;
+				const leaves = this.getLeaves(clusterId);
+				let minLat = Infinity;
+				let maxLat = -Infinity;
+				let minLng = Infinity;
+				let maxLng = -Infinity;
+				for (const leaf of leaves) {
+					minLat = Math.min(minLat, leaf.position.lat);
+					maxLat = Math.max(maxLat, leaf.position.lat);
+					minLng = Math.min(minLng, leaf.position.lng);
+					maxLng = Math.max(maxLng, leaf.position.lng);
+				}
+				clusters.push({
+					id: `sc-${String(clusterId)}`,
+					position: {
+						lat,
+						lng
+					},
+					count: clusterProps.point_count,
+					bounds: {
+						south: minLat,
+						north: maxLat,
+						west: minLng,
+						east: maxLng
+					},
+					items: leaves
+				});
+			} else {
+				const pointProps = props;
+				const item = this.itemMap.get(pointProps.itemId);
+				if (item) singlePoints.push(item);
+			}
+		}
+		return {
+			clusters,
+			points: singlePoints
+		};
+	}
+	setOptions(options) {
+		if (typeof options === "object" && options !== null) {
+			const next = {
+				...this.options,
+				...options
+			};
+			this.options = next;
+			this.index = new Supercluster({
+				radius: next.radius,
+				minZoom: next.minZoom,
+				maxZoom: next.maxZoom,
+				extent: next.extent,
+				nodeSize: next.nodeSize
+			});
+			this.dirty = true;
+		}
+	}
+	destroy() {
+		this.itemMap.clear();
+	}
+	load(items) {
+		this.itemMap.clear();
+		const features = [];
+		for (const item of items) {
+			this.itemMap.set(item.id, item);
+			features.push({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: [item.position.lng, item.position.lat]
+				},
+				properties: {
+					itemId: item.id,
+					data: item.data,
+					markerOptions: item.markerOptions
+				}
+			});
+		}
+		this.index.load(features);
+		this.dirty = false;
+	}
+	getLeaves(clusterId) {
+		if (clusterId === void 0) return [];
+		const numericId = typeof clusterId === "string" ? parseInt(clusterId, 10) : clusterId;
+		if (typeof numericId !== "number" || isNaN(numericId)) return [];
+		const leaves = this.index.getLeaves(numericId, Infinity);
+		const result = [];
+		for (const leaf of leaves) {
+			const props = leaf.properties;
+			const item = this.itemMap.get(props.itemId);
+			if (item) result.push(item);
+		}
+		return result;
+	}
+};
+
+//#endregion
+//#region src/overlays/marker-clusterer/algorithms/createAlgorithm.ts
+function isBuiltInConfig(value) {
+	return "type" in value && typeof value.type === "string";
+}
+function omitUndefined(obj) {
+	const result = {};
+	for (const key of Object.keys(obj)) if (obj[key] !== void 0) result[key] = obj[key];
+	return result;
+}
+function createAlgorithm(config) {
+	switch (config.type) {
+		case "grid": return new GridAlgorithm(omitUndefined({
+			gridSize: config.gridSize,
+			minClusterSize: config.minClusterSize,
+			maxZoom: config.maxZoom
+		}));
+		case "radius": return new RadiusAlgorithm(omitUndefined({
+			radius: config.radius,
+			minClusterSize: config.minClusterSize,
+			maxZoom: config.maxZoom
+		}));
+		case "supercluster": return new SuperclusterAlgorithm(omitUndefined({
+			radius: config.radius,
+			minZoom: config.minZoom,
+			maxZoom: config.maxZoom,
+			extent: config.extent,
+			nodeSize: config.nodeSize
+		}));
+	}
+}
+
+//#endregion
+//#region src/overlays/marker-clusterer/MarkerClusterer.tsx
+function DefaultClusterIcon({ count }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 40,
+			height: 40,
+			borderRadius: "50%",
+			backgroundColor: "rgba(0, 100, 255, 0.7)",
+			color: "#fff",
+			fontWeight: "bold",
+			fontSize: 14,
+			border: "2px solid rgba(0, 100, 255, 0.9)"
+		},
+		children: count
+	});
+}
+function getMapBounds(map) {
+	const bounds = map.getBounds();
+	if (bounds instanceof naver.maps.LatLngBounds) {
+		const sw = bounds.getSW();
+		const ne = bounds.getNE();
+		return {
+			south: sw.lat(),
+			west: sw.lng(),
+			north: ne.lat(),
+			east: ne.lng()
+		};
+	}
+	const b = bounds;
+	if ("south" in b && "north" in b && "west" in b && "east" in b) return {
+		south: b.south,
+		north: b.north,
+		west: b.west,
+		east: b.east
+	};
+	return {
+		south: -90,
+		north: 90,
+		west: -180,
+		east: 180
+	};
+}
+function padBounds(bounds, padding) {
+	const latPad = (bounds.north - bounds.south) * padding * .01;
+	const lngPad = (bounds.east - bounds.west) * padding * .01;
+	return {
+		south: bounds.south - latPad,
+		north: bounds.north + latPad,
+		west: bounds.west - lngPad,
+		east: bounds.east + lngPad
+	};
+}
+/**
+* 다수의 `<Marker>`를 자동으로 클러스터링해주는 컴포넌트.
+*
+* ## 동작 방식
+*
+* 1. `<Marker>`는 `<MarkerClusterer>` 내부에서 직접 마커를 생성하지 않고
+*    내부 registry에 위치·데이터를 등록합니다.
+* 2. `MarkerClusterer`는 지도 이벤트(`idle`, `move`, `zoom`) 발생 시
+*    현재 줌·뷰포트 기준으로 클러스터를 재계산합니다.
+* 3. 클러스터 마커는 `<Marker>` JSX로 렌더링되며, children으로 클러스터 아이콘이 전달됩니다.
+* 4. 클러스터에 포함되지 않은 단독 포인트는 원래 `<Marker>` children을 그대로 표시합니다.
+*
+* ## 기본 사용법
+*
+* ```tsx
+* <NaverMap ...>
+*   <MarkerClusterer
+*     algorithm={{ type: "supercluster", radius: 60 }}
+*     clusterIcon={({ count }) => <ClusterBadge count={count} />}
+*     onClusterClick={({ cluster, helpers }) =>
+*       helpers.zoomToCluster(cluster, { maxZoom: 16 })
+*     }
+*   >
+*     {points.map(p => (
+*       <Marker
+*         key={p.id}
+*         position={p.position}
+*         item={p}
+*       >
+*         <CustomPin />
+*       </Marker>
+*     ))}
+*   </MarkerClusterer>
+* </NaverMap>
+* ```
+*
+* ## 주의 사항
+*
+* - `<MarkerClusterer>`는 반드시 `<NaverMap>` 내부에 위치해야 합니다.
+* - `enabled={false}`로 설정하면 클러스터링이 해제되고 각 `<Marker>`가 개별 마커로 렌더링됩니다.
+*
+* @typeParam TData - children `<Marker>`의 `item` prop 타입
+*/
+function MarkerClusterer(props) {
+	const { algorithm: algorithmProp, clusterIcon, onClusterClick, behavior, clusterData, enabled = true, children } = props;
+	const { map, sdkStatus } = useNaverMap();
+	const registryRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [registryVersion, setRegistryVersion] = (0, react.useState)(0);
+	const registry = (0, react.useMemo)(() => ({
+		enabled,
+		register(item) {
+			registryRef.current.set(item.id, item);
+			setRegistryVersion((v) => v + 1);
+		},
+		unregister(id) {
+			registryRef.current.delete(id);
+			setRegistryVersion((v) => v + 1);
+		}
+	}), [enabled]);
+	const algorithmRef = (0, react.useRef)(null);
+	const algorithm = (0, react.useMemo)(() => {
+		if (algorithmProp && !isBuiltInConfig(algorithmProp)) return algorithmProp;
+		const config = algorithmProp ?? {
+			type: "supercluster",
+			radius: 60
+		};
+		if (!isBuiltInConfig(config)) return config;
+		return createAlgorithm(config);
+	}, [algorithmProp]);
+	(0, react.useEffect)(() => {
+		const prev = algorithmRef.current;
+		algorithmRef.current = algorithm;
+		return () => {
+			if (prev && prev !== algorithm) prev.destroy?.();
+		};
+	}, [algorithm]);
+	const [clusters, setClusters] = (0, react.useState)([]);
+	const [visibleIds, setVisibleIds] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const helpersRef = (0, react.useRef)({
+		zoomToCluster: () => {},
+		fitBounds: () => {}
+	});
+	(0, react.useEffect)(() => {
+		if (!map) return;
+		helpersRef.current = {
+			zoomToCluster(cluster, options) {
+				if (cluster.bounds) {
+					const bounds = options?.padding ? padBounds(cluster.bounds, options.padding) : cluster.bounds;
+					const latLngBounds = new naver.maps.LatLngBounds(new naver.maps.LatLng(bounds.south, bounds.west), new naver.maps.LatLng(bounds.north, bounds.east));
+					map.fitBounds(latLngBounds);
+					if (options?.maxZoom !== void 0) {
+						if (map.getZoom() > options.maxZoom) map.setZoom(options.maxZoom);
+					}
+				} else {
+					const nextZoom = Math.min(map.getZoom() + 1, options?.maxZoom ?? 21);
+					map.setCenter(new naver.maps.LatLng(cluster.position.lat, cluster.position.lng));
+					map.setZoom(nextZoom);
+				}
+			},
+			fitBounds(bounds, options) {
+				const paddedBounds = options?.padding ? padBounds(bounds, options.padding) : bounds;
+				const latLngBounds = new naver.maps.LatLngBounds(new naver.maps.LatLng(paddedBounds.south, paddedBounds.west), new naver.maps.LatLng(paddedBounds.north, paddedBounds.east));
+				map.fitBounds(latLngBounds);
+			}
+		};
+	}, [map]);
+	const onClusterClickRef = (0, react.useRef)(onClusterClick);
+	(0, react.useEffect)(() => {
+		onClusterClickRef.current = onClusterClick;
+	}, [onClusterClick]);
+	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: rawClusters, points } = algorithm.cluster(items, {
+			zoom,
+			bounds
+		});
+		const maxItems = clusterData?.maxItemsInCluster;
+		const includeItems = clusterData?.includeItems ?? true;
+		setClusters(rawClusters.map((c) => ({
+			...c,
+			items: includeItems ? maxItems !== void 0 ? c.items?.slice(0, maxItems) : c.items : void 0
+		})));
+		setVisibleIds(new Set(points.map((p) => p.id)));
+	}, [
+		map,
+		sdkStatus,
+		enabled,
+		algorithm,
+		clusterData?.includeItems,
+		clusterData?.maxItemsInCluster
+	]);
+	(0, react.useEffect)(() => {
+		recompute();
+	}, [recompute, registryVersion]);
+	(0, react.useEffect)(() => {
+		if (!map || sdkStatus !== "ready" || !enabled) return;
+		const recomputeOn = behavior?.recomputeOn ?? "idle";
+		const debounceMs = behavior?.debounceMs ?? 200;
+		let timerId = null;
+		const listeners = [];
+		const debouncedRecompute = () => {
+			if (timerId !== null) clearTimeout(timerId);
+			timerId = setTimeout(() => {
+				recompute();
+				timerId = null;
+			}, debounceMs);
+		};
+		if (recomputeOn === "idle") listeners.push(naver.maps.Event.addListener(map, "idle", debouncedRecompute));
+		else if (recomputeOn === "move") listeners.push(naver.maps.Event.addListener(map, "bounds_changed", debouncedRecompute));
+		else if (recomputeOn === "zoom") listeners.push(naver.maps.Event.addListener(map, "zoom_changed", debouncedRecompute));
+		recompute();
+		return () => {
+			if (timerId !== null) clearTimeout(timerId);
+			if (listeners.length > 0) naver.maps.Event.removeListener(listeners);
+		};
+	}, [
+		map,
+		sdkStatus,
+		enabled,
+		behavior?.recomputeOn,
+		behavior?.debounceMs,
+		recompute
+	]);
+	(0, react.useEffect)(() => {
+		if (enabled) return;
+		setClusters([]);
+		setVisibleIds(/* @__PURE__ */ new Set());
+	}, [enabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClustererContext.Provider, {
+		value: registry,
+		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";
+
 //#endregion
 //#region src/overlays/infowindow/InfoWindow.tsx
 function toInfoWindowOptions(props) {
@@ -2632,10 +3893,12 @@ const version = "0.0.1";
 
 //#endregion
 exports.Circle = Circle;
+exports.ClustererContext = ClustererContext;
 exports.Ellipse = Ellipse;
 exports.GroundOverlay = GroundOverlay;
 exports.InfoWindow = InfoWindow;
 exports.Marker = Marker;
+exports.MarkerClusterer = MarkerClusterer;
 exports.NaverMap = NaverMap;
 exports.NaverMapContext = NaverMapContext;
 exports.NaverMapProvider = NaverMapProvider;