@mint-ui/map 1.2.0-test.7 → 1.2.0-test.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,7 +24,6 @@ export declare abstract class MintMapController {
24
24
  abstract updateMarker(marker: Marker, options: MarkerOptions): void;
25
25
  abstract clearDrawable(drawable: Drawable): boolean;
26
26
  abstract markerToTheTop(marker: Marker): void;
27
- abstract restoreMarkerZIndex(marker: Marker): void;
28
27
  abstract isMapDragged(): boolean;
29
28
  abstract setMapDragged(value: boolean): void;
30
29
  abstract setMarkerZIndex(marker: Marker, zIndex: number): void;
@@ -45,6 +45,7 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
45
45
  * 비교 전략:
46
46
  * 1. markers 배열 비교
47
47
  * 2. selectedItems 배열 비교 (외부 제어)
48
+ * 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
48
49
  *
49
50
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
50
51
  */
@@ -131,6 +131,12 @@ var WoongKonvaMarkerComponent = function (_a) {
131
131
  x: 0,
132
132
  y: 0
133
133
  }); // --------------------------------------------------------------------------
134
+ // Event Handler Refs (클로저 문제 방지)
135
+ // --------------------------------------------------------------------------
136
+
137
+ var onClickRef = React.useRef(onClick);
138
+ var onMouseOverRef = React.useRef(onMouseOver);
139
+ var onMouseOutRef = React.useRef(onMouseOut); // --------------------------------------------------------------------------
134
140
  // Performance Refs (캐싱 & 최적화)
135
141
  // --------------------------------------------------------------------------
136
142
 
@@ -420,10 +426,16 @@ var WoongKonvaMarkerComponent = function (_a) {
420
426
 
421
427
 
422
428
  var doRenderEvent = function () {
423
- if (!onClick && !onMouseOver && !onMouseOut) return;
424
- if (!renderEvent) return;
425
429
  var layer = eventLayerRef.current;
426
- if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
430
+ if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
431
+
432
+ if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
433
+ layer.destroyChildren();
434
+ layer.batchDraw();
435
+ return;
436
+ }
437
+
438
+ if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
427
439
 
428
440
  var shape = layer.findOne('.event-render-shape');
429
441
 
@@ -621,7 +633,7 @@ var WoongKonvaMarkerComponent = function (_a) {
621
633
 
622
634
 
623
635
  var setHovered = function (data) {
624
- if (!onMouseOver && !onMouseOut) return;
636
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
625
637
  hoveredItemRef.current = data;
626
638
 
627
639
  if (draggingRef.current) {
@@ -646,7 +658,7 @@ var WoongKonvaMarkerComponent = function (_a) {
646
658
 
647
659
 
648
660
  var handleLocalClick = function (data) {
649
- if (!onClick) return; // 1. 선택 상태 업데이트
661
+ if (!onClickRef.current) return; // 1. 선택 상태 업데이트
650
662
 
651
663
  if (enableMultiSelect) {
652
664
  // 다중 선택: Set과 Map 동시 업데이트
@@ -697,7 +709,7 @@ var WoongKonvaMarkerComponent = function (_a) {
697
709
  var handleClick = function (event) {
698
710
  var _a;
699
711
 
700
- if (!onClick) return;
712
+ if (!onClickRef.current) return;
701
713
  if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
702
714
 
703
715
  try {
@@ -706,7 +718,7 @@ var WoongKonvaMarkerComponent = function (_a) {
706
718
 
707
719
  if (data) {
708
720
  handleLocalClick(data);
709
- onClick(data, selectedIdsRef.current);
721
+ onClickRef.current(data, selectedIdsRef.current);
710
722
  }
711
723
  } catch (error) {
712
724
  console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -720,7 +732,7 @@ var WoongKonvaMarkerComponent = function (_a) {
720
732
  var handleMouseMove = function (event) {
721
733
  var _a;
722
734
 
723
- if (!onMouseOver && !onMouseOut) return;
735
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
724
736
  if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
725
737
 
726
738
  try {
@@ -730,8 +742,8 @@ var WoongKonvaMarkerComponent = function (_a) {
730
742
 
731
743
  if (prevHovered !== hoveredItem) {
732
744
  setHovered(hoveredItem);
733
- if (prevHovered && onMouseOut) onMouseOut(prevHovered);
734
- if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
745
+ if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
746
+ if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
735
747
  }
736
748
  } catch (error) {
737
749
  console.error('[WoongKonvaMarker] handleMouseMove error:', error);
@@ -761,7 +773,7 @@ var WoongKonvaMarkerComponent = function (_a) {
761
773
 
762
774
 
763
775
  var handleMouseLeave = function () {
764
- if (!onMouseOver && !onMouseOut) return;
776
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
765
777
  var prevHovered = hoveredItemRef.current;
766
778
 
767
779
  if (prevHovered) {
@@ -769,8 +781,8 @@ var WoongKonvaMarkerComponent = function (_a) {
769
781
  controller.setMapCursor('grab');
770
782
  doRenderEvent();
771
783
 
772
- if (onMouseOut) {
773
- onMouseOut(prevHovered);
784
+ if (onMouseOutRef.current) {
785
+ onMouseOutRef.current(prevHovered);
774
786
  }
775
787
  }
776
788
  }; // --------------------------------------------------------------------------
@@ -871,13 +883,20 @@ var WoongKonvaMarkerComponent = function (_a) {
871
883
  controller.addEventListener('IDLE', handleIdle);
872
884
  controller.addEventListener('ZOOMSTART', handleZoomStart);
873
885
  controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
874
- controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
875
- controller.addEventListener('CLICK', handleClick);
876
- controller.addEventListener('MOUSEMOVE', handleMouseMove);
877
- controller.addEventListener('DRAGSTART', handleDragStart);
878
- controller.addEventListener('DRAGEND', handleDragEnd); // 컨테이너에 mouseleave 이벤트 추가
886
+ controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
887
+
888
+ if (onClick) {
889
+ controller.addEventListener('CLICK', handleClick);
890
+ } // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
879
891
 
880
- mapDiv.addEventListener('mouseleave', handleMouseLeave);
892
+
893
+ if (onMouseOver || onMouseOut) {
894
+ controller.addEventListener('MOUSEMOVE', handleMouseMove);
895
+ mapDiv.addEventListener('mouseleave', handleMouseLeave);
896
+ }
897
+
898
+ controller.addEventListener('DRAGSTART', handleDragStart);
899
+ controller.addEventListener('DRAGEND', handleDragEnd);
881
900
  renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
882
901
 
883
902
  var componentInstance = null;
@@ -920,10 +939,13 @@ var WoongKonvaMarkerComponent = function (_a) {
920
939
  controller.removeEventListener('CLICK', handleClick);
921
940
  }
922
941
 
923
- controller.removeEventListener('MOUSEMOVE', handleMouseMove);
942
+ if (onMouseOver || onMouseOut) {
943
+ controller.removeEventListener('MOUSEMOVE', handleMouseMove);
944
+ mapDiv.removeEventListener('mouseleave', handleMouseLeave);
945
+ }
946
+
924
947
  controller.removeEventListener('DRAGSTART', handleDragStart);
925
- controller.removeEventListener('DRAGEND', handleDragEnd);
926
- mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
948
+ controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
927
949
 
928
950
  if (context$1 && componentInstance) {
929
951
  context$1.unregisterComponent(componentInstance);
@@ -940,6 +962,18 @@ var WoongKonvaMarkerComponent = function (_a) {
940
962
  spatialIndexRef.current.clear();
941
963
  };
942
964
  }, []); // --------------------------------------------------------------------------
965
+ // Lifecycle: 이벤트 핸들러 ref 동기화
966
+ // --------------------------------------------------------------------------
967
+
968
+ React.useEffect(function () {
969
+ onClickRef.current = onClick;
970
+ onMouseOverRef.current = onMouseOver;
971
+ onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
972
+
973
+ if (stageRef.current) {
974
+ doRenderEvent();
975
+ }
976
+ }, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
943
977
  // Lifecycle: 외부 selectedItems 동기화
944
978
  // --------------------------------------------------------------------------
945
979
 
@@ -1030,14 +1064,23 @@ var WoongKonvaMarkerComponent = function (_a) {
1030
1064
 
1031
1065
  renderAllImmediate();
1032
1066
  }, [markers]);
1067
+ var hasAnyHandler = onClick || onMouseOver || onMouseOut;
1033
1068
  return reactDom.createPortal(React__default["default"].createElement("div", {
1069
+ style: {
1070
+ zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
1071
+ position: 'absolute',
1072
+ width: '100%',
1073
+ height: '100%',
1074
+ pointerEvents: hasAnyHandler ? 'none' : 'auto'
1075
+ }
1076
+ }, React__default["default"].createElement("div", {
1034
1077
  ref: containerRef,
1035
1078
  style: {
1036
1079
  position: 'absolute',
1037
1080
  width: '100%',
1038
1081
  height: '100%'
1039
1082
  }
1040
- }), divElement);
1083
+ })), divElement);
1041
1084
  };
1042
1085
  /**
1043
1086
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
@@ -1045,33 +1088,29 @@ var WoongKonvaMarkerComponent = function (_a) {
1045
1088
  * 비교 전략:
1046
1089
  * 1. markers 배열 비교
1047
1090
  * 2. selectedItems 배열 비교 (외부 제어)
1091
+ * 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
1048
1092
  *
1049
1093
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
1050
1094
  */
1051
1095
 
1052
1096
 
1053
1097
  var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
1054
- // 1. markers 비교
1055
- var prevMarkers = prevProps.markers;
1056
- var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
1098
+ // markers 배열 비교 (참조 비교)
1099
+ if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
1057
1100
 
1058
- if (prevMarkers !== nextMarkers) {
1059
- // 길이가 다르면 변경됨
1060
- if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
1101
+ if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
1061
1102
 
1062
- for (var i = 0; i < prevMarkers.length; i++) {
1063
- if (prevMarkers[i].id !== nextMarkers[i].id) {
1064
- return false; // 변경됨 → 리렌더링
1065
- }
1066
- }
1067
- } // 2. selectedItems 비교 (참조만 비교)
1103
+ if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
1068
1104
 
1105
+ if (prevProps.onClick !== nextProps.onClick) return false;
1106
+ if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
1107
+ if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
1069
1108
 
1070
- if (prevProps.selectedItems !== nextProps.selectedItems) {
1071
- return false; // 변경됨 리렌더링
1072
- }
1109
+ if (prevProps.renderBase !== nextProps.renderBase) return false;
1110
+ if (prevProps.renderEvent !== nextProps.renderEvent) return false;
1111
+ if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
1073
1112
 
1074
- return true; // 같음 → 리렌더링 스킵
1113
+ return true;
1075
1114
  });
1076
1115
 
1077
1116
  Object.defineProperty(exports, 'CanvasDataType', {
@@ -172,7 +172,7 @@ function MapMarkerWrapper(_a) {
172
172
  var onMouseOverHandler = function (e) {
173
173
  var _a;
174
174
 
175
- var marker = markerRef.current;
175
+ var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
176
176
 
177
177
  if (marker) {
178
178
  var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -185,25 +185,6 @@ function MapMarkerWrapper(_a) {
185
185
 
186
186
  next && topOnHover && controller.markerToTheTop(marker);
187
187
  }
188
- }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
189
-
190
-
191
- var onMouseLeaveHandler = function (e) {
192
- var _a;
193
-
194
- var marker = markerRef.current;
195
-
196
- if (marker) {
197
- var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
198
- var next = true;
199
-
200
- if (mouseOutHandler) {
201
- var hasNext = mouseOutHandler(e);
202
- hasNext !== undefined && (next = hasNext);
203
- }
204
-
205
- next && topOnHover && controller.restoreMarkerZIndex(marker);
206
- }
207
188
  }; //create object
208
189
 
209
190
 
@@ -221,12 +202,10 @@ function MapMarkerWrapper(_a) {
221
202
  }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
222
203
 
223
204
  divElement.addEventListener('mouseover', onMouseOverHandler);
224
- divElement.addEventListener('mouseleave', onMouseLeaveHandler);
225
205
  return function () {
226
206
  divElement.removeEventListener('click', onClickHandler);
227
207
  divElement.removeEventListener('mousedown', onMousedownHandler);
228
208
  divElement.removeEventListener('mouseover', onMouseOverHandler);
229
- divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
230
209
 
231
210
  if (markerRef.current) {
232
211
  controller.clearDrawable(markerRef.current);
@@ -28,7 +28,6 @@ export declare class GoogleMintMapController extends MintMapController {
28
28
  private getMaxZIndex;
29
29
  setMarkerZIndex(marker: Marker, zIndex: number): void;
30
30
  markerToTheTop(marker: Marker): void;
31
- restoreMarkerZIndex(marker: Marker): void;
32
31
  clearDrawable(drawable: Drawable): boolean;
33
32
  private dragged;
34
33
  isMapDragged(): boolean;
@@ -340,10 +340,6 @@ function (_super) {
340
340
  }
341
341
  };
342
342
 
343
- GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
344
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
345
- };
346
-
347
343
  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
348
344
  if (drawable && drawable.native) {
349
345
  if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -31,7 +31,6 @@ export declare class KakaoMintMapController extends MintMapController {
31
31
  private getMaxZIndex;
32
32
  setMarkerZIndex(marker: Marker, zIndex: number): void;
33
33
  markerToTheTop(marker: Marker): void;
34
- restoreMarkerZIndex(marker: Marker): void;
35
34
  clearDrawable(drawable: Drawable): boolean;
36
35
  private dragged;
37
36
  isMapDragged(): boolean;
@@ -348,10 +348,6 @@ function (_super) {
348
348
  }
349
349
  };
350
350
 
351
- KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
352
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
353
- };
354
-
355
351
  KakaoMintMapController.prototype.clearDrawable = function (drawable) {
356
352
  var _this = this;
357
353
 
@@ -27,12 +27,9 @@ export declare class NaverMintMapController extends MintMapController {
27
27
  createMarker(marker: Marker): void;
28
28
  updateMarker(marker: Marker, options: MarkerOptions): void;
29
29
  private markerMaxZIndex;
30
- private markerOriginalZIndex;
31
30
  private getMaxZIndex;
32
- private getCurrentZIndex;
33
31
  setMarkerZIndex(marker: Marker, zIndex: number): void;
34
32
  markerToTheTop(marker: Marker): void;
35
- restoreMarkerZIndex(marker: Marker): void;
36
33
  clearDrawable(drawable: Drawable): boolean;
37
34
  private dragged;
38
35
  isMapDragged(): boolean;
@@ -340,54 +340,20 @@ function (_super) {
340
340
  }
341
341
  };
342
342
 
343
- NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
344
- if (this.map && marker.element && marker.element instanceof HTMLElement) {
345
- var parent_1 = marker.element.parentElement;
346
-
347
- if (parent_1 && parent_1.style.zIndex) {
348
- var zIndex = Number(parent_1.style.zIndex);
349
- return isNaN(zIndex) ? undefined : zIndex;
350
- }
351
- }
352
-
353
- return undefined;
354
- };
355
-
356
343
  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
357
344
  if (this.map && marker.element && marker.element instanceof HTMLElement) {
358
- var parent_2 = marker.element.parentElement;
345
+ var parent_1 = marker.element.parentElement;
359
346
 
360
- if (parent_2) {
361
- parent_2.style.zIndex = String(zIndex);
347
+ if (parent_1) {
348
+ parent_1.style.zIndex = String(zIndex);
362
349
  }
363
350
  }
364
351
  };
365
352
 
366
353
  NaverMintMapController.prototype.markerToTheTop = function (marker) {
367
- // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
368
- if (this.markerOriginalZIndex !== undefined) {
369
- return;
370
- }
371
-
372
- var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
373
-
374
- this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
375
354
  this.setMarkerZIndex(marker, this.getMaxZIndex(1));
376
355
  };
377
356
 
378
- NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
379
- if (this.markerOriginalZIndex !== undefined) {
380
- if (this.markerOriginalZIndex === null) {
381
- // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
382
- this.setMarkerZIndex(marker, 0);
383
- } else {
384
- this.setMarkerZIndex(marker, this.markerOriginalZIndex);
385
- }
386
-
387
- this.markerOriginalZIndex = undefined;
388
- }
389
- };
390
-
391
357
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
392
358
  var _a;
393
359
 
package/dist/index.es.js CHANGED
@@ -2750,7 +2750,7 @@ function MapMarkerWrapper(_a) {
2750
2750
  var onMouseOverHandler = function (e) {
2751
2751
  var _a;
2752
2752
 
2753
- var marker = markerRef.current;
2753
+ var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
2754
2754
 
2755
2755
  if (marker) {
2756
2756
  var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -2763,25 +2763,6 @@ function MapMarkerWrapper(_a) {
2763
2763
 
2764
2764
  next && topOnHover && controller.markerToTheTop(marker);
2765
2765
  }
2766
- }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
2767
-
2768
-
2769
- var onMouseLeaveHandler = function (e) {
2770
- var _a;
2771
-
2772
- var marker = markerRef.current;
2773
-
2774
- if (marker) {
2775
- var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
2776
- var next = true;
2777
-
2778
- if (mouseOutHandler) {
2779
- var hasNext = mouseOutHandler(e);
2780
- hasNext !== undefined && (next = hasNext);
2781
- }
2782
-
2783
- next && topOnHover && controller.restoreMarkerZIndex(marker);
2784
- }
2785
2766
  }; //create object
2786
2767
 
2787
2768
 
@@ -2799,12 +2780,10 @@ function MapMarkerWrapper(_a) {
2799
2780
  }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
2800
2781
 
2801
2782
  divElement.addEventListener('mouseover', onMouseOverHandler);
2802
- divElement.addEventListener('mouseleave', onMouseLeaveHandler);
2803
2783
  return function () {
2804
2784
  divElement.removeEventListener('click', onClickHandler);
2805
2785
  divElement.removeEventListener('mousedown', onMousedownHandler);
2806
2786
  divElement.removeEventListener('mouseover', onMouseOverHandler);
2807
- divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
2808
2787
 
2809
2788
  if (markerRef.current) {
2810
2789
  controller.clearDrawable(markerRef.current);
@@ -5481,6 +5460,12 @@ var WoongKonvaMarkerComponent = function (_a) {
5481
5460
  x: 0,
5482
5461
  y: 0
5483
5462
  }); // --------------------------------------------------------------------------
5463
+ // Event Handler Refs (클로저 문제 방지)
5464
+ // --------------------------------------------------------------------------
5465
+
5466
+ var onClickRef = useRef(onClick);
5467
+ var onMouseOverRef = useRef(onMouseOver);
5468
+ var onMouseOutRef = useRef(onMouseOut); // --------------------------------------------------------------------------
5484
5469
  // Performance Refs (캐싱 & 최적화)
5485
5470
  // --------------------------------------------------------------------------
5486
5471
 
@@ -5770,10 +5755,16 @@ var WoongKonvaMarkerComponent = function (_a) {
5770
5755
 
5771
5756
 
5772
5757
  var doRenderEvent = function () {
5773
- if (!onClick && !onMouseOver && !onMouseOut) return;
5774
- if (!renderEvent) return;
5775
5758
  var layer = eventLayerRef.current;
5776
- if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
5759
+ if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
5760
+
5761
+ if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
5762
+ layer.destroyChildren();
5763
+ layer.batchDraw();
5764
+ return;
5765
+ }
5766
+
5767
+ if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
5777
5768
 
5778
5769
  var shape = layer.findOne('.event-render-shape');
5779
5770
 
@@ -5971,7 +5962,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5971
5962
 
5972
5963
 
5973
5964
  var setHovered = function (data) {
5974
- if (!onMouseOver && !onMouseOut) return;
5965
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
5975
5966
  hoveredItemRef.current = data;
5976
5967
 
5977
5968
  if (draggingRef.current) {
@@ -5996,7 +5987,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5996
5987
 
5997
5988
 
5998
5989
  var handleLocalClick = function (data) {
5999
- if (!onClick) return; // 1. 선택 상태 업데이트
5990
+ if (!onClickRef.current) return; // 1. 선택 상태 업데이트
6000
5991
 
6001
5992
  if (enableMultiSelect) {
6002
5993
  // 다중 선택: Set과 Map 동시 업데이트
@@ -6047,7 +6038,7 @@ var WoongKonvaMarkerComponent = function (_a) {
6047
6038
  var handleClick = function (event) {
6048
6039
  var _a;
6049
6040
 
6050
- if (!onClick) return;
6041
+ if (!onClickRef.current) return;
6051
6042
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6052
6043
 
6053
6044
  try {
@@ -6056,7 +6047,7 @@ var WoongKonvaMarkerComponent = function (_a) {
6056
6047
 
6057
6048
  if (data) {
6058
6049
  handleLocalClick(data);
6059
- onClick(data, selectedIdsRef.current);
6050
+ onClickRef.current(data, selectedIdsRef.current);
6060
6051
  }
6061
6052
  } catch (error) {
6062
6053
  console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6070,7 +6061,7 @@ var WoongKonvaMarkerComponent = function (_a) {
6070
6061
  var handleMouseMove = function (event) {
6071
6062
  var _a;
6072
6063
 
6073
- if (!onMouseOver && !onMouseOut) return;
6064
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
6074
6065
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6075
6066
 
6076
6067
  try {
@@ -6080,8 +6071,8 @@ var WoongKonvaMarkerComponent = function (_a) {
6080
6071
 
6081
6072
  if (prevHovered !== hoveredItem) {
6082
6073
  setHovered(hoveredItem);
6083
- if (prevHovered && onMouseOut) onMouseOut(prevHovered);
6084
- if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
6074
+ if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
6075
+ if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
6085
6076
  }
6086
6077
  } catch (error) {
6087
6078
  console.error('[WoongKonvaMarker] handleMouseMove error:', error);
@@ -6111,7 +6102,7 @@ var WoongKonvaMarkerComponent = function (_a) {
6111
6102
 
6112
6103
 
6113
6104
  var handleMouseLeave = function () {
6114
- if (!onMouseOver && !onMouseOut) return;
6105
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
6115
6106
  var prevHovered = hoveredItemRef.current;
6116
6107
 
6117
6108
  if (prevHovered) {
@@ -6119,8 +6110,8 @@ var WoongKonvaMarkerComponent = function (_a) {
6119
6110
  controller.setMapCursor('grab');
6120
6111
  doRenderEvent();
6121
6112
 
6122
- if (onMouseOut) {
6123
- onMouseOut(prevHovered);
6113
+ if (onMouseOutRef.current) {
6114
+ onMouseOutRef.current(prevHovered);
6124
6115
  }
6125
6116
  }
6126
6117
  }; // --------------------------------------------------------------------------
@@ -6221,13 +6212,20 @@ var WoongKonvaMarkerComponent = function (_a) {
6221
6212
  controller.addEventListener('IDLE', handleIdle);
6222
6213
  controller.addEventListener('ZOOMSTART', handleZoomStart);
6223
6214
  controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
6224
- controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
6225
- controller.addEventListener('CLICK', handleClick);
6226
- controller.addEventListener('MOUSEMOVE', handleMouseMove);
6227
- controller.addEventListener('DRAGSTART', handleDragStart);
6228
- controller.addEventListener('DRAGEND', handleDragEnd); // 컨테이너에 mouseleave 이벤트 추가
6215
+ controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
6216
+
6217
+ if (onClick) {
6218
+ controller.addEventListener('CLICK', handleClick);
6219
+ } // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
6220
+
6229
6221
 
6230
- mapDiv.addEventListener('mouseleave', handleMouseLeave);
6222
+ if (onMouseOver || onMouseOut) {
6223
+ controller.addEventListener('MOUSEMOVE', handleMouseMove);
6224
+ mapDiv.addEventListener('mouseleave', handleMouseLeave);
6225
+ }
6226
+
6227
+ controller.addEventListener('DRAGSTART', handleDragStart);
6228
+ controller.addEventListener('DRAGEND', handleDragEnd);
6231
6229
  renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
6232
6230
 
6233
6231
  var componentInstance = null;
@@ -6270,10 +6268,13 @@ var WoongKonvaMarkerComponent = function (_a) {
6270
6268
  controller.removeEventListener('CLICK', handleClick);
6271
6269
  }
6272
6270
 
6273
- controller.removeEventListener('MOUSEMOVE', handleMouseMove);
6271
+ if (onMouseOver || onMouseOut) {
6272
+ controller.removeEventListener('MOUSEMOVE', handleMouseMove);
6273
+ mapDiv.removeEventListener('mouseleave', handleMouseLeave);
6274
+ }
6275
+
6274
6276
  controller.removeEventListener('DRAGSTART', handleDragStart);
6275
- controller.removeEventListener('DRAGEND', handleDragEnd);
6276
- mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
6277
+ controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
6277
6278
 
6278
6279
  if (context && componentInstance) {
6279
6280
  context.unregisterComponent(componentInstance);
@@ -6290,6 +6291,18 @@ var WoongKonvaMarkerComponent = function (_a) {
6290
6291
  spatialIndexRef.current.clear();
6291
6292
  };
6292
6293
  }, []); // --------------------------------------------------------------------------
6294
+ // Lifecycle: 이벤트 핸들러 ref 동기화
6295
+ // --------------------------------------------------------------------------
6296
+
6297
+ useEffect(function () {
6298
+ onClickRef.current = onClick;
6299
+ onMouseOverRef.current = onMouseOver;
6300
+ onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
6301
+
6302
+ if (stageRef.current) {
6303
+ doRenderEvent();
6304
+ }
6305
+ }, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
6293
6306
  // Lifecycle: 외부 selectedItems 동기화
6294
6307
  // --------------------------------------------------------------------------
6295
6308
 
@@ -6380,14 +6393,23 @@ var WoongKonvaMarkerComponent = function (_a) {
6380
6393
 
6381
6394
  renderAllImmediate();
6382
6395
  }, [markers]);
6396
+ var hasAnyHandler = onClick || onMouseOver || onMouseOut;
6383
6397
  return createPortal(React.createElement("div", {
6398
+ style: {
6399
+ zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
6400
+ position: 'absolute',
6401
+ width: '100%',
6402
+ height: '100%',
6403
+ pointerEvents: hasAnyHandler ? 'none' : 'auto'
6404
+ }
6405
+ }, React.createElement("div", {
6384
6406
  ref: containerRef,
6385
6407
  style: {
6386
6408
  position: 'absolute',
6387
6409
  width: '100%',
6388
6410
  height: '100%'
6389
6411
  }
6390
- }), divElement);
6412
+ })), divElement);
6391
6413
  };
6392
6414
  /**
6393
6415
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
@@ -6395,33 +6417,29 @@ var WoongKonvaMarkerComponent = function (_a) {
6395
6417
  * 비교 전략:
6396
6418
  * 1. markers 배열 비교
6397
6419
  * 2. selectedItems 배열 비교 (외부 제어)
6420
+ * 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
6398
6421
  *
6399
6422
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
6400
6423
  */
6401
6424
 
6402
6425
 
6403
6426
  var WoongKonvaMarker = React.memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
6404
- // 1. markers 비교
6405
- var prevMarkers = prevProps.markers;
6406
- var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
6427
+ // markers 배열 비교 (참조 비교)
6428
+ if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
6407
6429
 
6408
- if (prevMarkers !== nextMarkers) {
6409
- // 길이가 다르면 변경됨
6410
- if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
6430
+ if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
6411
6431
 
6412
- for (var i = 0; i < prevMarkers.length; i++) {
6413
- if (prevMarkers[i].id !== nextMarkers[i].id) {
6414
- return false; // 변경됨 → 리렌더링
6415
- }
6416
- }
6417
- } // 2. selectedItems 비교 (참조만 비교)
6432
+ if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
6418
6433
 
6434
+ if (prevProps.onClick !== nextProps.onClick) return false;
6435
+ if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
6436
+ if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
6419
6437
 
6420
- if (prevProps.selectedItems !== nextProps.selectedItems) {
6421
- return false; // 변경됨 리렌더링
6422
- }
6438
+ if (prevProps.renderBase !== nextProps.renderBase) return false;
6439
+ if (prevProps.renderEvent !== nextProps.renderEvent) return false;
6440
+ if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
6423
6441
 
6424
- return true; // 같음 → 리렌더링 스킵
6442
+ return true;
6425
6443
  });
6426
6444
 
6427
6445
  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n position: absolute;\n z-index: 1;\n}";
@@ -7164,54 +7182,20 @@ function (_super) {
7164
7182
  }
7165
7183
  };
7166
7184
 
7167
- NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
7168
- if (this.map && marker.element && marker.element instanceof HTMLElement) {
7169
- var parent_1 = marker.element.parentElement;
7170
-
7171
- if (parent_1 && parent_1.style.zIndex) {
7172
- var zIndex = Number(parent_1.style.zIndex);
7173
- return isNaN(zIndex) ? undefined : zIndex;
7174
- }
7175
- }
7176
-
7177
- return undefined;
7178
- };
7179
-
7180
7185
  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
7181
7186
  if (this.map && marker.element && marker.element instanceof HTMLElement) {
7182
- var parent_2 = marker.element.parentElement;
7187
+ var parent_1 = marker.element.parentElement;
7183
7188
 
7184
- if (parent_2) {
7185
- parent_2.style.zIndex = String(zIndex);
7189
+ if (parent_1) {
7190
+ parent_1.style.zIndex = String(zIndex);
7186
7191
  }
7187
7192
  }
7188
7193
  };
7189
7194
 
7190
7195
  NaverMintMapController.prototype.markerToTheTop = function (marker) {
7191
- // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
7192
- if (this.markerOriginalZIndex !== undefined) {
7193
- return;
7194
- }
7195
-
7196
- var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
7197
-
7198
- this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
7199
7196
  this.setMarkerZIndex(marker, this.getMaxZIndex(1));
7200
7197
  };
7201
7198
 
7202
- NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
7203
- if (this.markerOriginalZIndex !== undefined) {
7204
- if (this.markerOriginalZIndex === null) {
7205
- // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
7206
- this.setMarkerZIndex(marker, 0);
7207
- } else {
7208
- this.setMarkerZIndex(marker, this.markerOriginalZIndex);
7209
- }
7210
-
7211
- this.markerOriginalZIndex = undefined;
7212
- }
7213
- };
7214
-
7215
7199
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
7216
7200
  var _a;
7217
7201
 
@@ -7966,10 +7950,6 @@ function (_super) {
7966
7950
  }
7967
7951
  };
7968
7952
 
7969
- GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
7970
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
7971
- };
7972
-
7973
7953
  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
7974
7954
  if (drawable && drawable.native) {
7975
7955
  if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -8692,10 +8672,6 @@ function (_super) {
8692
8672
  }
8693
8673
  };
8694
8674
 
8695
- KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
8696
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
8697
- };
8698
-
8699
8675
  KakaoMintMapController.prototype.clearDrawable = function (drawable) {
8700
8676
  var _this = this;
8701
8677
 
package/dist/index.umd.js CHANGED
@@ -2754,7 +2754,7 @@
2754
2754
  var onMouseOverHandler = function (e) {
2755
2755
  var _a;
2756
2756
 
2757
- var marker = markerRef.current;
2757
+ var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
2758
2758
 
2759
2759
  if (marker) {
2760
2760
  var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -2767,25 +2767,6 @@
2767
2767
 
2768
2768
  next && topOnHover && controller.markerToTheTop(marker);
2769
2769
  }
2770
- }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
2771
-
2772
-
2773
- var onMouseLeaveHandler = function (e) {
2774
- var _a;
2775
-
2776
- var marker = markerRef.current;
2777
-
2778
- if (marker) {
2779
- var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
2780
- var next = true;
2781
-
2782
- if (mouseOutHandler) {
2783
- var hasNext = mouseOutHandler(e);
2784
- hasNext !== undefined && (next = hasNext);
2785
- }
2786
-
2787
- next && topOnHover && controller.restoreMarkerZIndex(marker);
2788
- }
2789
2770
  }; //create object
2790
2771
 
2791
2772
 
@@ -2803,12 +2784,10 @@
2803
2784
  }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
2804
2785
 
2805
2786
  divElement.addEventListener('mouseover', onMouseOverHandler);
2806
- divElement.addEventListener('mouseleave', onMouseLeaveHandler);
2807
2787
  return function () {
2808
2788
  divElement.removeEventListener('click', onClickHandler);
2809
2789
  divElement.removeEventListener('mousedown', onMousedownHandler);
2810
2790
  divElement.removeEventListener('mouseover', onMouseOverHandler);
2811
- divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
2812
2791
 
2813
2792
  if (markerRef.current) {
2814
2793
  controller.clearDrawable(markerRef.current);
@@ -5485,6 +5464,12 @@
5485
5464
  x: 0,
5486
5465
  y: 0
5487
5466
  }); // --------------------------------------------------------------------------
5467
+ // Event Handler Refs (클로저 문제 방지)
5468
+ // --------------------------------------------------------------------------
5469
+
5470
+ var onClickRef = React.useRef(onClick);
5471
+ var onMouseOverRef = React.useRef(onMouseOver);
5472
+ var onMouseOutRef = React.useRef(onMouseOut); // --------------------------------------------------------------------------
5488
5473
  // Performance Refs (캐싱 & 최적화)
5489
5474
  // --------------------------------------------------------------------------
5490
5475
 
@@ -5774,10 +5759,16 @@
5774
5759
 
5775
5760
 
5776
5761
  var doRenderEvent = function () {
5777
- if (!onClick && !onMouseOver && !onMouseOut) return;
5778
- if (!renderEvent) return;
5779
5762
  var layer = eventLayerRef.current;
5780
- if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
5763
+ if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
5764
+
5765
+ if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
5766
+ layer.destroyChildren();
5767
+ layer.batchDraw();
5768
+ return;
5769
+ }
5770
+
5771
+ if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
5781
5772
 
5782
5773
  var shape = layer.findOne('.event-render-shape');
5783
5774
 
@@ -5975,7 +5966,7 @@
5975
5966
 
5976
5967
 
5977
5968
  var setHovered = function (data) {
5978
- if (!onMouseOver && !onMouseOut) return;
5969
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
5979
5970
  hoveredItemRef.current = data;
5980
5971
 
5981
5972
  if (draggingRef.current) {
@@ -6000,7 +5991,7 @@
6000
5991
 
6001
5992
 
6002
5993
  var handleLocalClick = function (data) {
6003
- if (!onClick) return; // 1. 선택 상태 업데이트
5994
+ if (!onClickRef.current) return; // 1. 선택 상태 업데이트
6004
5995
 
6005
5996
  if (enableMultiSelect) {
6006
5997
  // 다중 선택: Set과 Map 동시 업데이트
@@ -6051,7 +6042,7 @@
6051
6042
  var handleClick = function (event) {
6052
6043
  var _a;
6053
6044
 
6054
- if (!onClick) return;
6045
+ if (!onClickRef.current) return;
6055
6046
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6056
6047
 
6057
6048
  try {
@@ -6060,7 +6051,7 @@
6060
6051
 
6061
6052
  if (data) {
6062
6053
  handleLocalClick(data);
6063
- onClick(data, selectedIdsRef.current);
6054
+ onClickRef.current(data, selectedIdsRef.current);
6064
6055
  }
6065
6056
  } catch (error) {
6066
6057
  console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6074,7 +6065,7 @@
6074
6065
  var handleMouseMove = function (event) {
6075
6066
  var _a;
6076
6067
 
6077
- if (!onMouseOver && !onMouseOut) return;
6068
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
6078
6069
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6079
6070
 
6080
6071
  try {
@@ -6084,8 +6075,8 @@
6084
6075
 
6085
6076
  if (prevHovered !== hoveredItem) {
6086
6077
  setHovered(hoveredItem);
6087
- if (prevHovered && onMouseOut) onMouseOut(prevHovered);
6088
- if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
6078
+ if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
6079
+ if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
6089
6080
  }
6090
6081
  } catch (error) {
6091
6082
  console.error('[WoongKonvaMarker] handleMouseMove error:', error);
@@ -6115,7 +6106,7 @@
6115
6106
 
6116
6107
 
6117
6108
  var handleMouseLeave = function () {
6118
- if (!onMouseOver && !onMouseOut) return;
6109
+ if (!onMouseOverRef.current && !onMouseOutRef.current) return;
6119
6110
  var prevHovered = hoveredItemRef.current;
6120
6111
 
6121
6112
  if (prevHovered) {
@@ -6123,8 +6114,8 @@
6123
6114
  controller.setMapCursor('grab');
6124
6115
  doRenderEvent();
6125
6116
 
6126
- if (onMouseOut) {
6127
- onMouseOut(prevHovered);
6117
+ if (onMouseOutRef.current) {
6118
+ onMouseOutRef.current(prevHovered);
6128
6119
  }
6129
6120
  }
6130
6121
  }; // --------------------------------------------------------------------------
@@ -6225,13 +6216,20 @@
6225
6216
  controller.addEventListener('IDLE', handleIdle);
6226
6217
  controller.addEventListener('ZOOMSTART', handleZoomStart);
6227
6218
  controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
6228
- controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
6229
- controller.addEventListener('CLICK', handleClick);
6230
- controller.addEventListener('MOUSEMOVE', handleMouseMove);
6231
- controller.addEventListener('DRAGSTART', handleDragStart);
6232
- controller.addEventListener('DRAGEND', handleDragEnd); // 컨테이너에 mouseleave 이벤트 추가
6219
+ controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
6220
+
6221
+ if (onClick) {
6222
+ controller.addEventListener('CLICK', handleClick);
6223
+ } // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
6224
+
6233
6225
 
6234
- mapDiv.addEventListener('mouseleave', handleMouseLeave);
6226
+ if (onMouseOver || onMouseOut) {
6227
+ controller.addEventListener('MOUSEMOVE', handleMouseMove);
6228
+ mapDiv.addEventListener('mouseleave', handleMouseLeave);
6229
+ }
6230
+
6231
+ controller.addEventListener('DRAGSTART', handleDragStart);
6232
+ controller.addEventListener('DRAGEND', handleDragEnd);
6235
6233
  renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
6236
6234
 
6237
6235
  var componentInstance = null;
@@ -6274,10 +6272,13 @@
6274
6272
  controller.removeEventListener('CLICK', handleClick);
6275
6273
  }
6276
6274
 
6277
- controller.removeEventListener('MOUSEMOVE', handleMouseMove);
6275
+ if (onMouseOver || onMouseOut) {
6276
+ controller.removeEventListener('MOUSEMOVE', handleMouseMove);
6277
+ mapDiv.removeEventListener('mouseleave', handleMouseLeave);
6278
+ }
6279
+
6278
6280
  controller.removeEventListener('DRAGSTART', handleDragStart);
6279
- controller.removeEventListener('DRAGEND', handleDragEnd);
6280
- mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
6281
+ controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
6281
6282
 
6282
6283
  if (context && componentInstance) {
6283
6284
  context.unregisterComponent(componentInstance);
@@ -6294,6 +6295,18 @@
6294
6295
  spatialIndexRef.current.clear();
6295
6296
  };
6296
6297
  }, []); // --------------------------------------------------------------------------
6298
+ // Lifecycle: 이벤트 핸들러 ref 동기화
6299
+ // --------------------------------------------------------------------------
6300
+
6301
+ React.useEffect(function () {
6302
+ onClickRef.current = onClick;
6303
+ onMouseOverRef.current = onMouseOver;
6304
+ onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
6305
+
6306
+ if (stageRef.current) {
6307
+ doRenderEvent();
6308
+ }
6309
+ }, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
6297
6310
  // Lifecycle: 외부 selectedItems 동기화
6298
6311
  // --------------------------------------------------------------------------
6299
6312
 
@@ -6384,14 +6397,23 @@
6384
6397
 
6385
6398
  renderAllImmediate();
6386
6399
  }, [markers]);
6400
+ var hasAnyHandler = onClick || onMouseOver || onMouseOut;
6387
6401
  return reactDom.createPortal(React__default["default"].createElement("div", {
6402
+ style: {
6403
+ zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
6404
+ position: 'absolute',
6405
+ width: '100%',
6406
+ height: '100%',
6407
+ pointerEvents: hasAnyHandler ? 'none' : 'auto'
6408
+ }
6409
+ }, React__default["default"].createElement("div", {
6388
6410
  ref: containerRef,
6389
6411
  style: {
6390
6412
  position: 'absolute',
6391
6413
  width: '100%',
6392
6414
  height: '100%'
6393
6415
  }
6394
- }), divElement);
6416
+ })), divElement);
6395
6417
  };
6396
6418
  /**
6397
6419
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
@@ -6399,33 +6421,29 @@
6399
6421
  * 비교 전략:
6400
6422
  * 1. markers 배열 비교
6401
6423
  * 2. selectedItems 배열 비교 (외부 제어)
6424
+ * 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
6402
6425
  *
6403
6426
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
6404
6427
  */
6405
6428
 
6406
6429
 
6407
6430
  var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
6408
- // 1. markers 비교
6409
- var prevMarkers = prevProps.markers;
6410
- var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
6431
+ // markers 배열 비교 (참조 비교)
6432
+ if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
6411
6433
 
6412
- if (prevMarkers !== nextMarkers) {
6413
- // 길이가 다르면 변경됨
6414
- if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
6434
+ if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
6415
6435
 
6416
- for (var i = 0; i < prevMarkers.length; i++) {
6417
- if (prevMarkers[i].id !== nextMarkers[i].id) {
6418
- return false; // 변경됨 → 리렌더링
6419
- }
6420
- }
6421
- } // 2. selectedItems 비교 (참조만 비교)
6436
+ if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
6422
6437
 
6438
+ if (prevProps.onClick !== nextProps.onClick) return false;
6439
+ if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
6440
+ if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
6423
6441
 
6424
- if (prevProps.selectedItems !== nextProps.selectedItems) {
6425
- return false; // 변경됨 리렌더링
6426
- }
6442
+ if (prevProps.renderBase !== nextProps.renderBase) return false;
6443
+ if (prevProps.renderEvent !== nextProps.renderEvent) return false;
6444
+ if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
6427
6445
 
6428
- return true; // 같음 → 리렌더링 스킵
6446
+ return true;
6429
6447
  });
6430
6448
 
6431
6449
  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n position: absolute;\n z-index: 1;\n}";
@@ -7168,54 +7186,20 @@
7168
7186
  }
7169
7187
  };
7170
7188
 
7171
- NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
7172
- if (this.map && marker.element && marker.element instanceof HTMLElement) {
7173
- var parent_1 = marker.element.parentElement;
7174
-
7175
- if (parent_1 && parent_1.style.zIndex) {
7176
- var zIndex = Number(parent_1.style.zIndex);
7177
- return isNaN(zIndex) ? undefined : zIndex;
7178
- }
7179
- }
7180
-
7181
- return undefined;
7182
- };
7183
-
7184
7189
  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
7185
7190
  if (this.map && marker.element && marker.element instanceof HTMLElement) {
7186
- var parent_2 = marker.element.parentElement;
7191
+ var parent_1 = marker.element.parentElement;
7187
7192
 
7188
- if (parent_2) {
7189
- parent_2.style.zIndex = String(zIndex);
7193
+ if (parent_1) {
7194
+ parent_1.style.zIndex = String(zIndex);
7190
7195
  }
7191
7196
  }
7192
7197
  };
7193
7198
 
7194
7199
  NaverMintMapController.prototype.markerToTheTop = function (marker) {
7195
- // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
7196
- if (this.markerOriginalZIndex !== undefined) {
7197
- return;
7198
- }
7199
-
7200
- var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
7201
-
7202
- this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
7203
7200
  this.setMarkerZIndex(marker, this.getMaxZIndex(1));
7204
7201
  };
7205
7202
 
7206
- NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
7207
- if (this.markerOriginalZIndex !== undefined) {
7208
- if (this.markerOriginalZIndex === null) {
7209
- // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
7210
- this.setMarkerZIndex(marker, 0);
7211
- } else {
7212
- this.setMarkerZIndex(marker, this.markerOriginalZIndex);
7213
- }
7214
-
7215
- this.markerOriginalZIndex = undefined;
7216
- }
7217
- };
7218
-
7219
7203
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
7220
7204
  var _a;
7221
7205
 
@@ -7970,10 +7954,6 @@
7970
7954
  }
7971
7955
  };
7972
7956
 
7973
- GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
7974
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
7975
- };
7976
-
7977
7957
  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
7978
7958
  if (drawable && drawable.native) {
7979
7959
  if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -8696,10 +8676,6 @@
8696
8676
  }
8697
8677
  };
8698
8678
 
8699
- KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
8700
- // 이 기능은 Naver Maps에서만 사용 가능합니다.
8701
- };
8702
-
8703
8679
  KakaoMintMapController.prototype.clearDrawable = function (drawable) {
8704
8680
  var _this = this;
8705
8681
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mint-ui/map",
3
- "version": "1.2.0-test.7",
3
+ "version": "1.2.0-test.8",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",