npm - @mint-ui/map - Versions diffs - 0.4.5-beta → 0.4.6-beta - Mend

@mint-ui/map 0.4.5-beta → 0.4.6-beta

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.

Files changed (65) hide show

package/dist/index.es.js CHANGED Viewed

@@ -10,106 +10,9 @@ var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: f
 var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
 styleInject(css_248z$2);
-var MintMapControllerContext = createContext(null);
-function MintMapProvider(_a) {
-  var controller = _a.controller,
-      children = _a.children;
-  return React.createElement(MintMapControllerContext.Provider, {
-    value: controller
-  }, children);
-}
-function useMintMapController() {
-  var controller = useContext(MintMapControllerContext);
-  if (controller === null) {
-    throw new Error('controller is not initialized');
-  }
-  return controller;
-}
-var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
-var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
-styleInject(css_248z$1);
-var cn$2 = classNames.bind(styles$1);
-function MintMapCore(_a) {
-  var _this = this;
-  var onLoad = _a.onLoad,
-      _b = _a.visible,
-      visible = _b === void 0 ? true : _b,
-      zoomLevel = _a.zoomLevel,
-      center = _a.center,
-      _c = _a.centerMoveWithPanning,
-      centerMoveWithPanning = _c === void 0 ? false : _c,
-      children = _a.children;
-  var controller = useMintMapController();
-  var elementRef = useRef(null);
-  var _d = useState(false),
-      mapInitialized = _d[0],
-      setMapInitialized = _d[1];
-  useEffect(function () {
-    (function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var map_1;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              if (!(elementRef && elementRef.current)) return [3, 2];
-              return [4, controller.initializingMap(elementRef.current)];
-            case 1:
-              map_1 = _a.sent();
-              setTimeout(function () {
-                setMapInitialized(true);
-                onLoad && onLoad(map_1, controller);
-              }, 100);
-              _a.label = 2;
-            case 2:
-              return [2];
-          }
-        });
-      });
-    })();
-    return function () {
-      controller && controller.destroyMap();
-    };
-  }, [controller, elementRef]);
-  useEffect(function () {
-    if (zoomLevel && controller && mapInitialized) {
-      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
-      if (prevZoomLevel !== zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
-      }
-    }
-  }, [zoomLevel]);
-  useEffect(function () {
-    if (center && controller && mapInitialized) {
-      var prevCenter = controller.getCenter();
-      if (!Position.equals(prevCenter, center)) {
-        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
-      }
-    }
-  }, [center]);
-  return React.createElement("div", {
-    className: cn$2('mint-map-root')
-  }, mapInitialized && children, React.createElement("div", {
-    className: cn$2('mint-map-container'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
-    },
-    ref: elementRef
-  }));
-}
-var LinePoints = function () {
+var LinePoints =
+/** @class */
+function () {
   function LinePoints(x1, y1, x2, y2) {
     this.x1 = x1;
     this.y1 = y1;
@@ -120,7 +23,20 @@ var LinePoints = function () {
   return LinePoints;
 }();
-var PolygonCalculator = function () {
+var PositionMirror =
+/** @class */
+function () {
+  function PositionMirror(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+  }
+  return PositionMirror;
+}();
+var PolygonCalculator =
+/** @class */
+function () {
   function PolygonCalculator() {}
   PolygonCalculator.getCenter = function (positions) {
@@ -144,10 +60,11 @@ var PolygonCalculator = function () {
       if (minY === undefined || pos.lng < minY) {
         minY = pos.lng;
       }
-    }
+    } //console.log('center min max => ', maxX, minX, maxY, minY)
     if (maxX && minX && maxY && minY) {
-      return new Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+      return new PositionMirror(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
     }
     throw new Error('Calculate Center Error!!!');
@@ -180,9 +97,10 @@ var PolygonCalculator = function () {
     var lines = this.convertPolygonToLinePoints(polygon);
     for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
-      var target = targets_1[_i];
-      var tempLine = this.convertPositionToPoints(target, new Position(target.lat, maxX));
-      var crossPoints = this.getCrossPointAll(lines, tempLine);
+      var target = targets_1[_i]; //x 축으로 긴 직선과 폴리곤 path 와의 교차 수 비교
+      var tempLine = this.convertPositionToPoints(target, new PositionMirror(target.lat, maxX));
+      var crossPoints = this.getCrossPointAll(lines, tempLine); // console.log('crossPoints',crossPoints);
       if (crossPoints.length > 0 && crossPoints.length % 2 != 0) {
         result.push(target);
@@ -204,16 +122,20 @@ var PolygonCalculator = function () {
   PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
     return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
-  };
+  }; //두 직선의 교점 구하기
   PolygonCalculator.getCrossPoint = function (sr, tr) {
-    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2);
+    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2); //분모로 사용됨
+    // p1 ==0 이면 평행선 또는 일치 이므로 제외(분모)
     if (p1 != 0) {
       var x = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.x1 - tr.x2) - (sr.x1 - sr.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
       var y = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
-      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0) {
+      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 //교점이 1선분 위에 있고
+      && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0 //교점이 2선분 위에 있을경우
+      ) {
         return {
           x: x,
           y: y
@@ -243,7 +165,7 @@ var PolygonCalculator = function () {
   PolygonCalculator.findCrossPoint = function (sr, tr) {
     for (var _i = 0, sr_2 = sr; _i < sr_2.length; _i++) {
-      var tmp = sr_2[_i];
+      var tmp = sr_2[_i]; //교점이 있으면 true
       if (this.getCrossPoint(tmp, tr)) {
         return true;
@@ -256,7 +178,9 @@ var PolygonCalculator = function () {
   return PolygonCalculator;
 }();
-var GeoCalulator = function () {
+var GeoCalulator =
+/** @class */
+function () {
   function GeoCalulator() {}
   GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
@@ -264,7 +188,8 @@ var GeoCalulator = function () {
     var dLon = this.deg2rad(pos2.lng - pos1.lng);
     var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    var d = this.EARTH_RADIUS * c;
+    var d = this.EARTH_RADIUS * c; // Distance in km
     return d;
   };
@@ -282,178 +207,480 @@ var GeoCalulator = function () {
         prevPos2 = context.prevPos2,
         velocityKmh = context.velocityKmh,
         prevVelocityKmh = context.prevVelocityKmh,
-        elapsedTimeMs = context.elapsedTimeMs;
+        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
+    //총 가야할 거리 (km)
     if (pos2 !== prevPos2) {
+      //목표가 바뀌면 거리 및 비율 재계산
       context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
       context.currDistance = 0;
       context.prevPos2 = pos2;
     }
-    var totalDistance = context.totalDistance;
+    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
+    //ms 속으로 환산
     if (velocityKmh !== prevVelocityKmh) {
+      //속도가 바뀌면 재계산
       context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
       context.prevVelocityKmh = velocityKmh;
     }
-    var vPerMs = context.vPerMs;
-    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs;
+    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
+    //실제 가는 거리 계산
+    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
+    //목표점까지 이동 후에도 남는 거리
     context.currDistance = nextDistance;
     if (totalDistance < context.currDistance) {
+      //이동 거리가 현재 목표점을 넘어가는 경우
       context.distanceRemain = context.currDistance - totalDistance;
       context.nextPos = pos2;
       return context;
     } else {
       context.distanceRemain = 0;
-    }
+    } //각 축으로 나가야할 비율
+    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
+    //방향값 체크
-    var ratio = nextDistance / totalDistance;
     var latCalib = pos2.lat > pos1.lat ? 1 : -1;
-    var lngCalib = pos2.lng > pos1.lng ? 1 : -1;
-    var newPos = new Position(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
+    var newPos = new PositionMirror(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
     if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
       newPos = pos2;
-    }
+    } // console.log('newPos', newPos);
+    //console.log('==============================================================\n');
     context.nextPos = newPos;
     return context;
   };
-  GeoCalulator.EARTH_RADIUS = 6371;
-  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000);
+  GeoCalulator.EARTH_RADIUS = 6371; //in km (6,371.230 km)
+  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000); //위도 기준 1도는 110km
   GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
   return GeoCalulator;
 }();
-var MintMapController = function () {
-  function MintMapController(props) {
-    this.mapApiLoaded = false;
-    this.mapInitialized = false;
-    this.processedTime = 0;
-    this.mapProps = props;
+/**
+ * 좌표값
+ * @description 위도/경도, DOM 상의 X/Y 좌표
+ */
+var Position =
+/** @class */
+function () {
+  function Position(lat, lng) {
+    /**
+     * 위도
+     * @description 위도(latitude)
+     */
+    this.lat = 0;
+    /**
+     * 경도
+     * @description 경도(longitude)
+     */
+    this.lng = 0;
+    this.lat = lat;
+    this.lng = lng;
   }
-  MintMapController.prototype.getMap = function () {
-    return this.map;
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
   };
-  MintMapController.prototype.getMapType = function () {
-    return this.type;
-  };
+  return Position;
+}();
-  MintMapController.prototype.positionToOffset = function (position) {
-    var div = this.mapDivElement;
-    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
-    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
-    var bounds = this.getCurrBounds();
-    var maxLng = bounds.ne.lng;
-    var minLng = bounds.sw.lng;
-    var lng = Math.abs(maxLng - minLng);
-    var x = w * (position.lng - minLng) / lng;
-    var maxLat = bounds.ne.lat;
-    var minLat = bounds.sw.lat;
-    var lat = Math.abs(maxLat - minLat);
-    var y = h * (maxLat - position.lat) / lat;
-    return new Offset(x, y);
-  };
+var Bounds =
+/** @class */
+function () {
+  function Bounds(nw, se, ne, sw) {
+    if (!(nw && se || ne && sw)) {
+      throw new Error('nw/se or ne/sw needed');
+    } //@ts-ignore
-  MintMapController.prototype.offsetToPosition = function (offset) {
-    var div = this.mapDivElement;
-    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
-    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
-    var bounds = this.getCurrBounds();
-    var maxLng = bounds.ne.lng;
-    var minLng = bounds.sw.lng;
-    var lng = Math.abs(maxLng - minLng);
-    var lngVal = offset.x * lng / w + minLng;
-    var maxLat = bounds.ne.lat;
-    var minLat = bounds.sw.lat;
-    var lat = Math.abs(maxLat - minLat);
-    var latVal = (offset.y * lat / h - maxLat) * -1;
-    return new Position(latVal, lngVal);
-  };
-  MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
-    return __awaiter(this, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
-          if (checkLoaded()) {
-            resolve(false);
-            return;
-          }
+    this.nw = nw;
+    this.se = se;
+    this.ne = ne;
+    this.sw = sw;
-          var prevElement = id ? document.getElementById(id) : undefined;
+    if (nw && se) {
+      this.covertNWSEtoNESW(nw, se);
+    } else if (ne && sw) {
+      this.covertNESWtoNWSE(ne, sw);
+    }
+  }
-          if (prevElement) {
-            prevElement.addEventListener('load', function () {
-              resolve(false);
-            });
-            return;
-          }
+  Bounds.fromNWSE = function (nw, se) {
+    return new Bounds(nw, se, undefined, undefined);
+  };
-          var script = document.createElement('script');
-          script.src = url;
-          script.async = true;
-          script.defer = true;
-          id && (script.id = id);
-          script.addEventListener('load', function () {
-            resolve(true);
-          });
-          document.body.appendChild(script);
-        })];
-      });
-    });
+  Bounds.fromNESW = function (ne, sw) {
+    return new Bounds(undefined, undefined, ne, sw);
   };
-  MintMapController.prototype.getRandomFunctionName = function (prefix) {
-    return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
+  Bounds.prototype.covertNWSEtoNESW = function (nw, se) {
+    this.ne = new Position(nw.lat, se.lng);
+    this.sw = new Position(se.lat, nw.lng);
   };
-  MintMapController.prototype.buildUrl = function (baseUrl, param) {
-    var params = Object.entries(param).map(function (_a) {
-      var key = _a[0],
-          value = _a[1];
-      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
-      return "".concat(key, "=").concat(temp);
-    }).join('&');
-    return "".concat(baseUrl, "?").concat(params);
+  Bounds.prototype.covertNESWtoNWSE = function (ne, sw) {
+    this.nw = new Position(ne.lat, sw.lng);
+    this.se = new Position(sw.lat, ne.lng);
   };
-  MintMapController.prototype.checkBoundsChangeThrottleTime = function () {
-    if (!this.mapProps.boundsChangeThrottlingTime) return true;
-    var time = new Date().getTime();
+  Bounds.prototype.getCenter = function () {
+    return new Position(this.se.lat + (this.nw.lat - this.se.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
+  };
-    if (this.processedTime > 0 && time - this.processedTime < this.mapProps.boundsChangeThrottlingTime) {
-      return false;
-    } else {
-      this.processedTime = time;
-      return true;
-    }
+  Bounds.prototype.includesPosition = function (pos) {
+    return this.nw.lng < pos.lng && this.se.lng > pos.lng && this.se.lat < pos.lat && this.nw.lat > pos.lat;
   };
-  MintMapController.prototype.getBaseToMapZoom = function (zoomBase) {
-    var baseMap = MapZoomInfo.BASE_TO_MAP.get(zoomBase);
+  Bounds.prototype.getIncludedPositions = function (positions) {
+    var result = [];
-    if (baseMap) {
-      var mapZoomInfo = baseMap.get(this.getMapType());
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+      var pos = positions_1[_i];
-      if (mapZoomInfo) {
-        return mapZoomInfo.level;
+      if (this.includesPosition(pos)) {
+        result.push(pos);
       }
     }
-    throw new Error("[getBaseToMapZoom][".concat(zoomBase, "] is not valid zoom level"));
+    return result;
   };
-  MintMapController.prototype.getMapToBaseZoom = function (mapZoom) {
-    var baseZoom = MapZoomInfo.MAP_TO_BASE.get(this.getMapType() + mapZoom);
-    if (baseZoom) {
-      return baseZoom;
-    }
+  Bounds.prototype.includes = function (positions) {
+    positions = Array.isArray(positions) ? positions : [positions];
+    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+      var pos = positions_2[_i];
+      if (!this.includesPosition(pos)) {
+        return false;
+      }
+    }
+    return true;
+  };
+  Bounds.prototype.includesOnlyOnePoint = function (positions) {
+    for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
+      var pos = positions_3[_i];
+      if (this.includesPosition(pos)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  Bounds.prototype.intersects = function (positions) {
+    return PolygonCalculator.intersects([this.nw, this.se], positions);
+  };
+  return Bounds;
+}();
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+ */
+var Offset =
+/** @class */
+function () {
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+   */
+  function Offset(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  return Offset;
+}();
+var MintMapControllerContext = createContext(null);
+function MintMapProvider(_a) {
+  var controller = _a.controller,
+      children = _a.children;
+  return React.createElement(MintMapControllerContext.Provider, {
+    value: controller
+  }, children);
+}
+function useMintMapController() {
+  var controller = useContext(MintMapControllerContext);
+  if (controller === null) {
+    throw new Error('controller is not initialized');
+  }
+  return controller;
+}
+var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
+var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
+styleInject(css_248z$1);
+var cn$3 = classNames.bind(styles$1);
+function MintMapCore(_a) {
+  var _this = this;
+  var onLoad = _a.onLoad,
+      _b = _a.visible,
+      visible = _b === void 0 ? true : _b,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
+      _c = _a.centerMoveWithPanning,
+      centerMoveWithPanning = _c === void 0 ? false : _c,
+      children = _a.children; //controller
+  var controller = useMintMapController(); //맵 초기화
+  var elementRef = useRef(null);
+  var _d = useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
+  useEffect(function () {
+    (function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var map_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(elementRef && elementRef.current)) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              ];
+            case 1:
+              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              setTimeout(function () {
+                setMapInitialized(true);
+                onLoad && onLoad(map_1, controller);
+              }, 100);
+              _a.label = 2;
+            case 2:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    })();
+    return function () {
+      controller && controller.destroyMap();
+    };
+  }, [controller, elementRef]); //줌레벨
+  useEffect(function () {
+    if (zoomLevel && controller && mapInitialized) {
+      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
+      }
+    }
+  }, [zoomLevel]); //센터
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+      if (!Position.equals(prevCenter, center)) {
+        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
+    }
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$3('mint-map-root')
+  }, mapInitialized && children, React.createElement("div", {
+    className: cn$3('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
+    ref: elementRef
+  }));
+}
+var MintMapController =
+/** @class */
+function () {
+  //constructor
+  function MintMapController(props) {
+    this.mapApiLoaded = false;
+    this.mapInitialized = false;
+    this.processedTime = 0; //props
+    this.mapProps = props;
+  } //기본 기능
+  MintMapController.prototype.getMap = function () {
+    return this.map;
+  };
+  MintMapController.prototype.getMapType = function () {
+    return this.type;
+  }; //기본 기능 - 좌표 변환
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new Offset(x, y);
+  };
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng); //const x = w * (position.lng - minLng) / lng
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat); //const y = h * (maxLat - position.lat) / lat
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new Position(latVal, lngVal);
+  }; //스크립트 로드
+  MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        //boolean -> script 로드 후 callback 실행 여부
+        //** callback 실행이 여기서 안된 경우는 바깥에서 해줘야한다.
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
+          //이미 로드되어 있으면 종료
+          if (checkLoaded()) {
+            resolve(false);
+            return;
+          }
+          var prevElement = id ? document.getElementById(id) : undefined; //기존 스크립트 로드 정보가 있으면
+          if (prevElement) {
+            // console.log(`already loaded script => ${id}`)
+            //로드 되어 있지 않으면 스크립트 load 이벤트 끼워넣기
+            prevElement.addEventListener('load', function () {
+              // console.log('script loaded!!!')
+              resolve(false);
+            });
+            return;
+          } //스크립트 로드 처리
+          var script = document.createElement('script');
+          script.src = url;
+          script.async = true;
+          script.defer = true;
+          id && (script.id = id);
+          script.addEventListener('load', function () {
+            resolve(true);
+          });
+          document.body.appendChild(script);
+        })];
+      });
+    });
+  };
+  MintMapController.prototype.getRandomFunctionName = function (prefix) {
+    return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
+  };
+  /**
+   * URL 빌더 메서드
+   *
+   * @param {string} baseUrl: 기본 URL
+   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+   * @returns {string} URL
+   */
+  MintMapController.prototype.buildUrl = function (baseUrl, param) {
+    var params = Object.entries(param).map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      return "".concat(key, "=").concat(temp);
+    }).join('&');
+    return "".concat(baseUrl, "?").concat(params);
+  };
+  /**
+   * 쓰로틀링 처리
+   * @returns
+   */
+  MintMapController.prototype.checkBoundsChangeThrottleTime = function () {
+    if (!this.mapProps.boundsChangeThrottlingTime) return true; //boundsChangeThrottlingTime 이내의 연속 요청은 제외시킴
+    var time = new Date().getTime();
+    if (this.processedTime > 0 && time - this.processedTime < this.mapProps.boundsChangeThrottlingTime) {
+      return false;
+    } else {
+      this.processedTime = time;
+      return true;
+    }
+  };
+  MintMapController.prototype.getBaseToMapZoom = function (zoomBase) {
+    var baseMap = MapZoomInfo.BASE_TO_MAP.get(zoomBase);
+    if (baseMap) {
+      var mapZoomInfo = baseMap.get(this.getMapType());
+      if (mapZoomInfo) {
+        return mapZoomInfo.level;
+      }
+    }
+    throw new Error("[getBaseToMapZoom][".concat(zoomBase, "] is not valid zoom level"));
+  };
+  MintMapController.prototype.getMapToBaseZoom = function (mapZoom) {
+    var baseZoom = MapZoomInfo.MAP_TO_BASE.get(this.getMapType() + mapZoom);
+    if (baseZoom) {
+      return baseZoom;
+    }
     throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
   };
@@ -461,7 +688,9 @@ var MintMapController = function () {
   return MintMapController;
 }();
-var MapZoomInfo = function () {
+var MapZoomInfo =
+/** @class */
+function () {
   function MapZoomInfo() {}
   MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
@@ -658,16 +887,20 @@ function waiting(evaluation, timeoutSeconds) {
     var max;
     return __generator(this, function (_a) {
       max = (timeoutSeconds || 5) * 1000;
-      return [2, new Promise(function (resolve) {
+      return [2
+      /*return*/
+      , new Promise(function (resolve) {
         var start = new Date().getTime();
         var inter = setInterval(function () {
+          //타임아웃 체크
           var time = new Date().getTime();
           if (time - start > max) {
             clearInterval(inter);
             resolve(false);
             return;
-          }
+          } //평가식 체크
           if (evaluation()) {
             clearInterval(inter);
@@ -679,7 +912,9 @@ function waiting(evaluation, timeoutSeconds) {
   });
 }
-var NaverMintMapController = function (_super) {
+var NaverMintMapController =
+/** @class */
+function (_super) {
   __extends(NaverMintMapController, _super);
   function NaverMintMapController(props) {
@@ -694,21 +929,30 @@ var NaverMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    return _this;
+    return _this; // console.log(`${this.type} controller loadded`);
   }
   NaverMintMapController.prototype.initMarkerPool = function () {
     var _this = this;
-    if (!this.mapProps.markerCache) return;
-    this.markerPool = new ObjectPool().setFactory(function () {
+    if (!this.mapProps.markerCache) return; //marker pool setting
+    this.markerPool = new ObjectPool() //logging on
+    //.setLog(true)
+    //factory 셋팅
+    .setFactory(function () {
+      //console.log('pool item created');
       return new naver.maps.Marker({
         position: new Position(0, 0),
         map: _this.map || undefined
       });
-    }).setClear(function (item) {
+    }) //clear function 셋팅
+    .setClear(function (item) {
+      //console.log('pool item cleared');
       item.setMap(null);
-    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    }) //초기 pool 사이즈
+    .createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000) //TTL 체크 간격 (기본 5초)
+    .setCheckLiveTimeInterval(1000);
   };
   NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -726,7 +970,7 @@ var NaverMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('controller createPolyline start', polyline);
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
@@ -740,8 +984,13 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: lineOpacity,
         clickable: true,
         visible: visible
-      });
-      editable && pol_1.setEditable(editable);
+      }); //@ts-ignore
+      editable && pol_1.setEditable(editable); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, naver.maps.drawing.DrawingMode.POLYLINE)
+      // }
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -752,7 +1001,9 @@ var NaverMintMapController = function (_super) {
   };
   NaverMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof naver.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
       if (Array.isArray(options.position)) {
@@ -767,7 +1018,8 @@ var NaverMintMapController = function (_super) {
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
-      });
+      }); //@ts-ignore
       options.editable !== undefined && polyline.native.setEditable(options.editable);
     }
   };
@@ -791,7 +1043,7 @@ var NaverMintMapController = function (_super) {
         _g = _a.visible,
         visible = _g === void 0 ? true : _g;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('polygon', polygon);
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
@@ -809,7 +1061,9 @@ var NaverMintMapController = function (_super) {
         fillOpacity: fillOpacity,
         clickable: true,
         visible: visible
-      });
+      }); //@ts-ignore
+      //pol.setEditable(editable)
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -820,7 +1074,9 @@ var NaverMintMapController = function (_super) {
   };
   NaverMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof naver.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
       if (Array.isArray(options.position)) {
@@ -839,7 +1095,8 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
       options.editable !== undefined && polygon.native.setEditable(options.editable);
     }
   };
@@ -854,7 +1111,8 @@ var NaverMintMapController = function (_super) {
         map: this.map,
         position: marker.options.position,
         visible: marker.options.visible === undefined || marker.options.visible
-      };
+      }; //console.log('controller createMarker', marker.options);
       marker.element && (options.icon = {
         content: marker.element,
         anchor: marker.options.anchor
@@ -881,10 +1139,18 @@ var NaverMintMapController = function (_super) {
   };
   NaverMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof naver.maps.Marker) {
       var map = marker.native.getMap();
       if (map) {
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        */
+        //Position
         if (options.position && options.position instanceof Position) {
           marker.native.setPosition(options.position);
         }
@@ -897,7 +1163,21 @@ var NaverMintMapController = function (_super) {
           marker.native.setIcon(__assign(__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
           }));
-        }
+        } // const newOption = {
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        // } as naver.maps.MarkerOptions
+        // if(options.anchor){
+        //   newOption.icon = {...marker.native.getIcon(), anchor:options.anchor}
+        // }
+        // marker.native.setOptions({
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        //   icon:{...marker.native.getIcon(), anchor:options.anchor}
+        // })
       }
     }
   };
@@ -977,7 +1257,7 @@ var NaverMintMapController = function (_super) {
   NaverMintMapController.prototype.checkLoaded = function () {
     var _a, _b;
-    return (_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+    return ((_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
   NaverMintMapController.prototype.loadMapApi = function () {
@@ -985,17 +1265,21 @@ var NaverMintMapController = function (_super) {
       var _this = this;
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve, error) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve, error) {
           return __awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_naver');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('naver api loaded');
+                    loaded = true; //@ts-ignore
                     delete window[callbackName];
                   };
@@ -1004,17 +1288,22 @@ var NaverMintMapController = function (_super) {
                     submodules: this.scriptModules.join(','),
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
                 case 1:
                   callbackExecFlag = _a.sent();
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    loaded = true; //@ts-ignore
                     delete window[callbackName];
                   }
-                  return [4, waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return loaded;
                   })];
@@ -1027,7 +1316,9 @@ var NaverMintMapController = function (_super) {
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1041,8 +1332,11 @@ var NaverMintMapController = function (_super) {
       var _this = this;
       return __generator(this, function (_a) {
+        //div element
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -1053,17 +1347,26 @@ var NaverMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getElement() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     } else {
                       this.map.destroy();
                     }
                   }
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
                 case 1:
                   _e.sent();
@@ -1100,43 +1403,59 @@ var NaverMintMapController = function (_super) {
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
                   map = new naver.maps.Map(divElement, options);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
                   map.addListener('dragstart', function (e) {
+                    //console.log('map dragstart', e);
                     _this.dragStartPoint[0] = e.domEvent.clientX;
                     _this.dragStartPoint[1] = e.domEvent.clientY;
-                  });
+                  }); //@ts-ignore
                   map.addListener('dragend', function (e) {
+                    //console.log('map dragend', e);
                     if (_this.dragStartPoint[0] === e.domEvent.clientX && _this.dragStartPoint[1] === e.domEvent.clientY) {
                       _this.dragged = false;
                     } else {
                       _this.dragged = true;
-                    }
-                  });
+                    } //console.log('map dragend', this.dragged)
+                  }); //@ts-ignore
                   map.addListener('idle', function (e) {
+                    //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                  }); //@ts-ignore
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.coord.y, e.coord.x);
                     pos.offset = new Offset(e.offset.x, e.offset.y);
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
                     var pos = new Position(e.coord.y, e.coord.x);
-                    pos.offset = new Offset(e.offset.x, e.offset.y);
+                    pos.offset = new Offset(e.offset.x, e.offset.y); // console.log('mousemove', pos)
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
-                  resolve(map);
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
+                  resolve(map); //네이버는 로드 후에 idle 이 발생 안해서 직접 일으켜준다
                   map.trigger('idle');
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1163,7 +1482,8 @@ var NaverMintMapController = function (_super) {
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('naver map destroy error', e);
-    }
+    } // console.log(`${this.type} map destroyed`);
   };
   NaverMintMapController.prototype.getCurrBounds = function () {
@@ -1208,7 +1528,9 @@ var NaverMintMapController = function (_super) {
   return NaverMintMapController;
 }(MintMapController);
-var GoogleMintMapController = function (_super) {
+var GoogleMintMapController =
+/** @class */
+function (_super) {
   __extends(GoogleMintMapController, _super);
   function GoogleMintMapController(props) {
@@ -1217,7 +1539,8 @@ var GoogleMintMapController = function (_super) {
     _this.type = 'google';
     _this.map = null;
     _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
-    _this.scriptModules = ['marker'];
+    _this.scriptModules = ['marker']; //'drawing' , 'geometry' , 'journeySharing' , 'localContext' , 'places' , 'visualization']
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
@@ -1228,10 +1551,11 @@ var GoogleMintMapController = function (_super) {
         _this.map && google.maps.event.clearInstanceListeners(_this.map);
       } catch (e) {
         console.log('google map destroy error', e);
-      }
+      } // console.log(`${this.type} map destroyed`);
     };
-    return _this;
+    return _this; // console.log(`${this.type} controller loadded`);
   }
   GoogleMintMapController.prototype.createPolyline = function (polyline) {
@@ -1249,12 +1573,13 @@ var GoogleMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('polyline', polyline);
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
         return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
-      });
+      }); //console.log('polyline path',path);
       var pol_1 = new google.maps.Polyline({
         map: this.map,
         path: path,
@@ -1264,7 +1589,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polyline created', polyline);
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -1275,8 +1601,9 @@ var GoogleMintMapController = function (_super) {
   };
   GoogleMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof google.maps.Polyline) {
-      var polylineOption = this.getValidOptions(options);
+      var polylineOption = this.getValidOptions(options); //console.log('controller updatePolyline start', polylineOption);
       if (this.map && Array.isArray(options.position)) {
         var path = options.position.map(function (elem) {
@@ -1309,7 +1636,7 @@ var GoogleMintMapController = function (_super) {
         visible = _g === void 0 ? true : _g,
         _h = _a.editable,
         editable = _h === void 0 ? false : _h,
-        event = _a.event;
+        event = _a.event; //console.log('polygon', polygon);
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
@@ -1328,7 +1655,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polygon created', polygon);
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -1339,8 +1667,9 @@ var GoogleMintMapController = function (_super) {
   };
   GoogleMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof google.maps.Polygon) {
-      var polygonOption = this.getValidOptions(options);
+      var polygonOption = this.getValidOptions(options); //console.log('controller updatePolygon start', polygonOption);
       if (this.map && Array.isArray(options.position)) {
         var outLine = options.position.map(function (elem) {
@@ -1356,12 +1685,14 @@ var GoogleMintMapController = function (_super) {
   };
   GoogleMintMapController.prototype.getValidOptions = function (options) {
+    //console.log('getValidOptions DrawableOptions',options)
     var target = {};
     for (var _i = 0, _a = Object.getOwnPropertyNames(options); _i < _a.length; _i++) {
-      var name_1 = _a[_i];
+      var name_1 = _a[_i]; //@ts-ignore
       if (options[name_1] !== undefined) {
+        //@ts-ignore
         target[name_1] = options[name_1];
       }
     }
@@ -1377,7 +1708,7 @@ var GoogleMintMapController = function (_super) {
     if (this.map) {
       var googleMarker_1;
-      if (marker.element) {
+      if (marker.element && marker.element instanceof Element) {
         var options = {
           map: this.map,
           position: marker.options.position
@@ -1408,6 +1739,7 @@ var GoogleMintMapController = function (_super) {
   };
   GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     var _a, _b;
     if (marker && marker.native) {
@@ -1418,7 +1750,8 @@ var GoogleMintMapController = function (_super) {
           marker.native.setOptions({
             map: map,
             position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-            visible: options.visible === undefined || options.visible
+            visible: options.visible === undefined || options.visible // icon:{...marker.native.getIcon(), anchor:options.anchor}
           });
         }
       } else if (marker.native instanceof google.maps.marker.AdvancedMarkerView) {
@@ -1514,7 +1847,7 @@ var GoogleMintMapController = function (_super) {
   GoogleMintMapController.prototype.checkLoaded = function () {
     var _a, _b, _c;
-    return (_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView;
+    return ((_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView) ? true : false;
   };
   GoogleMintMapController.prototype.loadMapApi = function () {
@@ -1522,17 +1855,21 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_google');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('google api loaded');
+                    loaded = true; //@ts-ignore
                     delete window[callbackName];
                   };
@@ -1542,17 +1879,23 @@ var GoogleMintMapController = function (_super) {
                     v: 'beta',
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
                 case 1:
                   callbackExecFlag = _a.sent();
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    // console.log('google api loaded 222222');
+                    loaded = true; //@ts-ignore
                     delete window[callbackName];
                   }
-                  return [4, waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return loaded;
                   })];
@@ -1565,7 +1908,9 @@ var GoogleMintMapController = function (_super) {
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1579,8 +1924,11 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
       return __generator(this, function (_a) {
+        //div element
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var map;
@@ -1591,15 +1939,24 @@ var GoogleMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getDiv() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     }
                   }
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
                 case 1:
                   _e.sent();
@@ -1618,14 +1975,20 @@ var GoogleMintMapController = function (_super) {
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
-                  this.map = map;
+                  this.map = map; //@ts-ignore
                   map.addListener('idle', function () {
+                    //onBoundsChanged event
                     _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
-                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                    //onZoomChanged event
+                    // console.log('zoom_changed');
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom() || 10);
+                  }); //@ts-ignore
                   map.addListener('click', function (e) {
+                    // console.log('map click', e)
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.latLng.lat(), e.latLng.lng());
                     pos.offset = new Offset(e.pixel.x, e.pixel.y);
@@ -1635,13 +1998,16 @@ var GoogleMintMapController = function (_super) {
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
                     var pos = new Position(e.latLng.lat(), e.latLng.lng());
-                    pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                    pos.offset = new Offset(e.pixel.x, e.pixel.y); // console.log('mousemove', pos)
                     _this.mapProps.onMouseMove(pos);
                   });
-                  this.mapInitialized = true;
+                  this.mapInitialized = true; // console.log(`${this.type} map script initialized`, divElement);
                   resolve(map);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1664,7 +2030,7 @@ var GoogleMintMapController = function (_super) {
     if (bounds) {
       return this.fromGoogleBounds(bounds);
     } else {
-      throw new Error('bounds is not found!!!');
+      throw new Error('bounds is not found!!!'); //return new Bounds(new Position(0,0), new Position(0,0))
     }
   };
@@ -1699,7 +2065,9 @@ var GoogleMintMapController = function (_super) {
   return GoogleMintMapController;
 }(MintMapController);
-var KakaoMintMapController = function (_super) {
+var KakaoMintMapController =
+/** @class */
+function (_super) {
   __extends(KakaoMintMapController, _super);
   function KakaoMintMapController(props) {
@@ -1714,21 +2082,30 @@ var KakaoMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    return _this;
+    return _this; // console.log(`${this.type} controller loadded`);
   }
   KakaoMintMapController.prototype.initMarkerPool = function () {
     var _this = this;
-    if (!this.mapProps.markerCache) return;
-    this.markerPool = new ObjectPool().setFactory(function () {
+    if (!this.mapProps.markerCache) return; //marker pool setting
+    this.markerPool = new ObjectPool() //logging on
+    //.setLog(true)
+    //factory 셋팅
+    .setFactory(function () {
+      //console.log('pool item created');
       return new kakao.maps.CustomOverlay({
         position: _this.positionToLatLng(new Position(0, 0)),
         map: _this.map || undefined
       });
-    }).setClear(function (item) {
+    }) //clear function 셋팅
+    .setClear(function (item) {
+      //console.log('pool item cleared');
       item.setMap(null);
-    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    }) //초기 pool 사이즈
+    .createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000) //TTL 체크 간격 (기본 5초)
+    .setCheckLiveTimeInterval(1000);
   };
   KakaoMintMapController.prototype.createPolyline = function (polyline) {
@@ -1744,7 +2121,7 @@ var KakaoMintMapController = function (_super) {
         lineOpacity = _d === void 0 ? 1 : _d;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('controller createPolyline start', polyline);
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
@@ -1756,7 +2133,11 @@ var KakaoMintMapController = function (_super) {
         strokeColor: lineColor,
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity
-      });
+      }); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, kakao.maps.drawing.DrawingMode.POLYLINE)
+      // }
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -1767,9 +2148,11 @@ var KakaoMintMapController = function (_super) {
   };
   KakaoMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     var _this = this;
     if (polyline && polyline.native && polyline.native instanceof kakao.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
       if (Array.isArray(options.position)) {
@@ -1780,6 +2163,7 @@ var KakaoMintMapController = function (_super) {
       polyline.native.setOptions({
         path: path || polyline.native.getPath(),
+        //visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
@@ -1805,15 +2189,17 @@ var KakaoMintMapController = function (_super) {
         fillOpacity = _f === void 0 ? 0.5 : _f;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('polygon', polygon);
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
         return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
       });
       var path = [outLine];
-      innerPositions && path.push(innerPositions.map(function (inner) {
-        return _this.positionToLatLng(inner);
+      innerPositions && path.push.apply(path, innerPositions.map(function (inner) {
+        return inner.map(function (innerItem) {
+          return _this.positionToLatLng(innerItem);
+        });
       }));
       var pol_2 = new kakao.maps.Polygon({
         map: this.map,
@@ -1822,8 +2208,12 @@ var KakaoMintMapController = function (_super) {
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity,
         fillColor: fillColor,
-        fillOpacity: fillOpacity
-      });
+        fillOpacity: fillOpacity // clickable:true,
+        // visible:visible,
+      }); //@ts-ignore
+      //pol.setEditable(editable)
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -1834,9 +2224,11 @@ var KakaoMintMapController = function (_super) {
   };
   KakaoMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     var _this = this;
     if (polygon && polygon.native && polygon.native instanceof kakao.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
       if (Array.isArray(options.position)) {
@@ -1845,18 +2237,22 @@ var KakaoMintMapController = function (_super) {
         });
         paths = [outLine];
         options.innerPositions && paths.push.apply(paths, options.innerPositions.map(function (inner) {
-          return _this.positionToLatLng(inner);
+          return inner.map(function (innerItem) {
+            return _this.positionToLatLng(innerItem);
+          });
         }));
       }
       polygon.native.setOptions({
         path: paths || polygon.native.getPath(),
+        // visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
+      // options.editable !== undefined && polygon.native.setEditable(options.editable)
     }
   };
@@ -1868,8 +2264,10 @@ var KakaoMintMapController = function (_super) {
     if (this.map) {
       var options = {
         map: this.map,
-        position: this.positionToLatLng(marker.options.position)
-      };
+        position: this.positionToLatLng(marker.options.position) // visible:marker.options.visible === undefined || marker.options.visible,
+      }; //console.log('controller createMarker', marker.options);
       marker.element && (options.content = marker.element);
       var kakaoMarker_1;
@@ -1882,7 +2280,7 @@ var KakaoMintMapController = function (_super) {
       } else {
         kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
         marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
         marker.native = kakaoMarker_1;
       }
@@ -1895,10 +2293,12 @@ var KakaoMintMapController = function (_super) {
   };
   KakaoMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof kakao.maps.CustomOverlay) {
       var map = marker.native.getMap();
       if (map) {
+        //Position
         if (options.position && options.position instanceof Position) {
           marker.native.setPosition(this.positionToLatLng(options.position));
         }
@@ -1907,11 +2307,16 @@ var KakaoMintMapController = function (_super) {
           marker.native.setVisible(options.visible);
         }
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
       }
     }
   };
+  KakaoMintMapController.prototype.removeParentElementsMargin = function (marker) {
+    //맵 별로 offset 통일을 위해서 margin 제거
+    marker.element && marker.element instanceof HTMLElement && marker.element.parentElement && (marker.element.parentElement.style.margin = '0');
+  };
   KakaoMintMapController.prototype.getMaxZIndex = function (increment, parent) {
     if (increment === void 0) {
       increment = 0;
@@ -1921,14 +2326,16 @@ var KakaoMintMapController = function (_super) {
       var targetPane = parent.parentElement;
       var max = 0;
-      for (var i = 0; i < targetPane.childElementCount; i++) {
-        var elem = targetPane.children[i];
+      if (targetPane) {
+        for (var i = 0; i < targetPane.childElementCount; i++) {
+          var elem = targetPane.children[i];
-        if (elem instanceof HTMLElement) {
-          var index = Number(elem.style.zIndex);
+          if (elem instanceof HTMLElement) {
+            var index = Number(elem.style.zIndex);
-          if (!isNaN(index) && index > max) {
-            max = index;
+            if (!isNaN(index) && index > max) {
+              max = index;
+            }
           }
         }
       }
@@ -1999,7 +2406,7 @@ var KakaoMintMapController = function (_super) {
   KakaoMintMapController.prototype.checkLoaded = function () {
     var _a, _b;
-    return (_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+    return ((_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
   KakaoMintMapController.prototype.loadMapApi = function () {
@@ -2007,7 +2414,9 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var params, ok;
@@ -2021,13 +2430,17 @@ var KakaoMintMapController = function (_super) {
                     libraries: this.scriptModules.join(','),
                     autoload: false
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
                 case 1:
                   _a.sent();
-                  window.kakao.maps.load();
-                  return [4, waiting(function () {
+                  window.kakao.maps.load(function () {});
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return _this.checkLoaded() ? true : false;
                   })];
@@ -2040,7 +2453,9 @@ var KakaoMintMapController = function (_super) {
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -2055,7 +2470,9 @@ var KakaoMintMapController = function (_super) {
       return __generator(this, function (_a) {
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -2066,17 +2483,12 @@ var KakaoMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
-                  if (this.mapInitialized && this.map) {
-                    if (this.map.getElement() === divElement) {
-                      resolve(this.map);
-                      return [2];
-                    } else {
-                      this.map.destroy();
-                    }
-                  }
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
                 case 1:
                   _e.sent();
@@ -2086,7 +2498,7 @@ var KakaoMintMapController = function (_super) {
                 case 2:
                   options = {
                     center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
-                    level: this.getBaseToMapZoom((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel),
+                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 10),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
@@ -2109,31 +2521,58 @@ var KakaoMintMapController = function (_super) {
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+                  // map.addListener('dragstart', (e)=>{
+                  //   //console.log('map dragstart', e);
+                  //   this.dragStartPoint[0] = e.domEvent.clientX
+                  //   this.dragStartPoint[1] = e.domEvent.clientY
+                  // })
+                  //@ts-ignore
+                  // map.addListener('dragend', (e)=>{
+                  //   //console.log('map dragend', e);
+                  //   if(this.dragStartPoint[0] === e.domEvent.clientX && this.dragStartPoint[1] === e.domEvent.clientY){
+                  //     this.dragged = false
+                  //   }else{
+                  //     this.dragged = true
+                  //   }
+                  //   //console.log('map dragend', this.dragged)
+                  // })
+                  //@ts-ignore
                   map.addListener('idle', function (e) {
+                    //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
-                  });
+                  }); //@ts-ignore
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.getZoomLevel());
-                  });
+                  }); //@ts-ignore
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
                     pos.offset = new Offset(e.point.x, e.point.y);
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
                     var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
-                    pos.offset = new Offset(e.point.x, e.point.y);
+                    pos.offset = new Offset(e.point.x, e.point.y); // console.log('mousemove', pos)
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
                   resolve(map);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -2143,6 +2582,14 @@ var KakaoMintMapController = function (_super) {
   };
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    */
     var mapValue = this.getBaseToMapZoom(value);
     if (mapValue > 14) {
@@ -2161,7 +2608,8 @@ var KakaoMintMapController = function (_super) {
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('kakao map destroy error', e);
-    }
+    } // console.log(`${this.type} map destroyed`);
   };
   KakaoMintMapController.prototype.getCurrBounds = function () {
@@ -2200,519 +2648,134 @@ var KakaoMintMapController = function (_super) {
   };
   KakaoMintMapController.prototype.positionToLatLng = function (pos) {
-    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : undefined;
+    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
   };
   KakaoMintMapController.prototype.latLngToPosition = function (latLng) {
-    return latLng ? new Position(latLng.getLat(), latLng.getLng()) : undefined;
+    return latLng ? new Position(latLng.getLat(), latLng.getLng()) : new Position(0, 0);
   };
   return KakaoMintMapController;
 }(MintMapController);
-var Position = function () {
-  function Position(lat, lng) {
-    this.lat = 0;
-    this.lng = 0;
-    this.lat = lat;
-    this.lng = lng;
-  }
-  Position.equals = function (pos1, pos2) {
-    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
-  };
-  return Position;
-}();
-var Bounds = function () {
-  function Bounds(nw, se, ne, sw) {
-    if (!(nw && se || ne && sw)) {
-      throw new Error('nw/se or ne/sw needed');
-    }
-    this.nw = nw;
-    this.se = se;
-    this.ne = ne;
-    this.sw = sw;
-    if (nw && se) {
-      this.covertNWSEtoNESW(nw, se);
-    } else if (ne && sw) {
-      this.covertNESWtoNWSE(ne, sw);
-    }
-  }
-  Bounds.fromNWSE = function (nw, se) {
-    return new Bounds(nw, se, undefined, undefined);
-  };
-  Bounds.fromNESW = function (ne, sw) {
-    return new Bounds(undefined, undefined, ne, sw);
-  };
-  Bounds.prototype.covertNWSEtoNESW = function (nw, se) {
-    this.ne = new Position(nw.lat, se.lng);
-    this.sw = new Position(se.lat, nw.lng);
-  };
-  Bounds.prototype.covertNESWtoNWSE = function (ne, sw) {
-    this.nw = new Position(ne.lat, sw.lng);
-    this.se = new Position(sw.lat, ne.lng);
-  };
-  Bounds.prototype.getCenter = function () {
-    return new Position(this.se.lat + (this.nw.lat - this.se.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
-  };
-  Bounds.prototype.includesPosition = function (pos) {
-    return this.nw.lng < pos.lng && this.se.lng > pos.lng && this.se.lat < pos.lat && this.nw.lat > pos.lat;
-  };
-  Bounds.prototype.getIncludedPositions = function (positions) {
-    var result = [];
-    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
-      var pos = positions_1[_i];
-      if (this.includesPosition(pos)) {
-        result.push(pos);
-      }
-    }
-    return result;
-  };
-  Bounds.prototype.includes = function (positions) {
-    positions = Array.isArray(positions) ? positions : [positions];
-    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
-      var pos = positions_2[_i];
-      if (!this.includesPosition(pos)) {
-        return false;
-      }
-    }
-    return true;
-  };
-  Bounds.prototype.includesOnlyOnePoint = function (positions) {
-    for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
-      var pos = positions_3[_i];
+var cn$2 = classNames.bind(styles$2); //지도 기본 센터
-      if (this.includesPosition(pos)) {
-        return true;
-      }
-    }
-    return false;
-  };
-  Bounds.prototype.intersects = function (positions) {
-    return PolygonCalculator.intersects([this.nw, this.se], positions);
-  };
-  return Bounds;
-}();
-var Offset = function () {
-  function Offset(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-  return Offset;
-}();
-var Drawable = function () {
-  function Drawable() {}
-  return Drawable;
-}();
-var Marker = function (_super) {
-  __extends(Marker, _super);
-  function Marker(options) {
-    var _this = _super.call(this) || this;
-    _this.options = options;
-    return _this;
-  }
-  return Marker;
-}(Drawable);
-var Polyline = function (_super) {
-  __extends(Polyline, _super);
-  function Polyline(options) {
-    var _this = _super.call(this) || this;
-    _this.options = options;
-    return _this;
-  }
-  return Polyline;
-}(Drawable);
-var Polygon = function (_super) {
-  __extends(Polygon, _super);
-  function Polygon(options) {
-    var _this = _super.call(this) || this;
-    _this.options = options;
-    return _this;
-  }
-  Polygon.prototype.getCenter = function () {
-    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-      var paths = this.options.position.map(function (elem) {
-        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-      });
-      return PolygonCalculator.getCenter(paths);
-    }
-    throw new Error('center 를 찾을 수 없습니다.');
-  };
-  return Polygon;
-}(Drawable);
-var cn$1 = classNames.bind(styles$2);
 var DEFAULT_CENTER = {
   lat: 37.5036845,
   lng: 127.0448698
-};
-function MintMap(_a) {
-  var mapLoadingComponent = _a.mapLoadingComponent,
-      _b = _a.dissolveEffectWhenLoaded,
-      dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
-      mapType = _a.mapType,
-      children = _a.children,
-      _c = _a.base,
-      base = _c === void 0 ? {
-    center: DEFAULT_CENTER,
-    zoomLevel: 12
-  } : _c,
-      props = __rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
-  var loadingRef = useRef(null);
-  var _d = useState(),
-      controller = _d[0],
-      setController = _d[1];
-  var loading = useMemo(function () {
-    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
-  }, [mapLoadingComponent]);
-  useEffect(function () {
-    if (mapType && mapType.length > 0) {
-      setController(undefined);
-      var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
-        mapType: mapType
-      }, props), {
-        base: base
-      })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
-        mapType: mapType
-      }, props), {
-        base: base
-      })) : mapType === 'kakao' ? new KakaoMintMapController(__assign(__assign({
-        mapType: mapType
-      }, props), {
-        base: base
-      })) : null;
-      if (newController_1) {
-        newController_1.loadMapApi().then(function () {
-          setController(newController_1);
-        });
-      } else {
-        throw new Error("Not Supported Map type ".concat(mapType));
-      }
-    } else {
-      setController(undefined);
-    }
-  }, [mapType]);
-  return React.createElement(React.Fragment, null, controller ? React.createElement(MintMapProvider, {
-    controller: controller
-  }, dissolveEffectWhenLoaded && React.createElement("div", {
-    className: cn$1('ani-fade-out'),
-    style: {
-      position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: '100%',
-      height: '100%',
-      background: 'white',
-      zIndex: 1000,
-      animationFillMode: 'forwards',
-      animationDuration: '0.7s'
-    },
-    onAnimationEnd: function (e) {
-      e.target.style.display = 'none';
-    }
-  }), React.createElement(MintMapCore, __assign({
-    mapType: mapType
-  }, props, {
-    base: base
-  }), children)) : React.createElement(React.Fragment, null, dissolveEffectWhenLoaded && React.createElement("div", {
-    ref: function (refs) {
-      loadingRef.current = refs;
-    },
-    style: {
-      position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: '100%',
-      height: '100%',
-      zIndex: 1000
-    }
-  }), loading));
-}
-function PointLoading(_a) {
-  var _b = _a.text,
-      text = _b === void 0 ? 'Loading' : _b,
-      _c = _a.pointCount,
-      pointCount = _c === void 0 ? 4 : _c,
-      _d = _a.speedMs,
-      speedMs = _d === void 0 ? 200 : _d;
-  var pointStringPool = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
-    return Array.from(Array(idx + 1)).map(function () {
-      return '.';
-    }).join('');
-  }))[0];
-  var _e = useState(''),
-      pointString = _e[0],
-      setPointString = _e[1];
-  useEffect(function () {
-    var pointStringIndex = 0;
-    var interval = setInterval(function () {
-      pointStringIndex += 1;
-      if (pointStringIndex >= pointCount) {
-        pointStringIndex = 0;
-      }
-      setPointString(pointStringPool[pointStringIndex]);
-    }, speedMs);
-    return function () {
-      interval && clearInterval(interval);
-    };
-  }, []);
-  return React.createElement("div", {
-    className: cn$1('loading-point-container')
-  }, React.createElement("div", {
-    style: {
-      width: '300px',
-      fontSize: '16px',
-      fontWeight: 600,
-      color: 'gray',
-      transform: 'translateX(130px)'
-    }
-  }, "".concat(text, " ").concat(pointString)));
-}
-function MapLoadingWithImage(_a) {
-  var _b = _a.size,
-      size = _b === void 0 ? 256 : _b;
-  var _c = useState(),
-      width = _c[0],
-      setWidth = _c[1];
-  var _d = useState(),
-      height = _d[0],
-      setHeight = _d[1];
-  var render = useMemo(function () {
-    if (!height || !width) {
-      return;
-    }
-    var row = Math.ceil(height / size);
-    var col = Math.ceil(width / size);
-    console.log('re render', width, height, row, col);
-    return Array.from(Array(row)).map(function () {
-      return React.createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, Array.from(Array(col)).map(function () {
-        var duration = Number((Math.random() * 4).toFixed(1)) + 1;
-        var delay = Number((Math.random() * 4).toFixed(1)) + 2;
-        return React.createElement(LoadingImage, {
-          size: size,
-          duration: duration,
-          delay: delay
-        });
-      }));
-    });
-  }, [width, height]);
-  return React.createElement("div", {
-    ref: function (refs) {
-      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
-      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
-    },
-    style: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, render);
-}
-function LoadingImage(_a) {
-  var _b = _a.size,
-      size = _b === void 0 ? 256 : _b,
-      _c = _a.duration,
-      duration = _c === void 0 ? 1 : _c,
-      _d = _a.delay,
-      delay = _d === void 0 ? 1 : _d;
-  var scale = 256 / 4000;
-  return React.createElement("svg", {
-    className: cn$1("ani-fade-in"),
-    style: {
-      flex: "0 0 ".concat(size, "px"),
-      opacity: 0,
-      animationDelay: "".concat(delay, "s"),
-      animationDuration: "".concat(duration, "s"),
-      animationFillMode: 'forwards'
-    },
-    width: size,
-    height: size,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React.createElement("g", {
-    transform: "scale(".concat(scale, ")"),
-    "clip-path": "url(#clip0_5_701)"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    transform: "translate(0 4000) rotate(-90)",
-    fill: "#F8F8F8"
-  }), React.createElement("path", {
-    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
-    fill: "#F6E4DD"
-  }), React.createElement("path", {
-    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "958",
-    cy: "3092",
-    r: "95",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "1127",
-    cy: "3176",
-    r: "56",
-    fill: "#A2CAEE"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
-    fill: "#FBEDB1"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
-    fill: "#FBEDB1"
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: "clip0_5_701"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    fill: "white",
-    transform: "translate(0 4000) rotate(-90)"
-  }))));
+};
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MintMapProps} MintMapProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+function MintMap(_a) {
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      _b = _a.dissolveEffectWhenLoaded,
+      dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
+      mapType = _a.mapType,
+      children = _a.children,
+      _c = _a.base,
+      base = _c === void 0 ? {
+    center: DEFAULT_CENTER,
+    zoomLevel: 12
+  } : _c,
+      props = __rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
+  var loadingRef = useRef(null);
+  var _d = useState(),
+      controller = _d[0],
+      setController = _d[1];
+  var loading = useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
+  }, [mapLoadingComponent]);
+  useEffect(function () {
+    if (mapType && mapType.length > 0) {
+      setController(undefined);
+      var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
+        mapType: mapType
+      }, props), {
+        base: base
+      })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
+        mapType: mapType
+      }, props), {
+        base: base
+      })) : mapType === 'kakao' ? new KakaoMintMapController(__assign(__assign({
+        mapType: mapType
+      }, props), {
+        base: base
+      })) : null;
+      if (newController_1) {
+        newController_1.loadMapApi().then(function () {
+          setController(newController_1); // fade in 로직은 일단 스킵
+          // if(dissolveEffectWhenLoaded && loadingRef.current){
+          // 	const elemStyle = loadingRef.current.style
+          // 	elemStyle.background = 'white'
+          // 	elemStyle.opacity = '0'
+          // 	elemStyle.animationDuration = '0.1s'
+          // 	loadingRef.current.addEventListener('animationend', ()=>{
+          // 		setController(newController as MintMapController)
+          // 	}, {
+          // 		once:true
+          // 	})
+          // 	loadingRef.current.classList.add(cn('ani-fade-in'))
+          // }else{
+          // 	setController(newController as MintMapController)
+          // }
+        });
+      } else {
+        throw new Error("Not Supported Map type ".concat(mapType));
+      }
+    } else {
+      setController(undefined);
+    }
+  }, [mapType]);
+  return React.createElement(React.Fragment, null, controller ? React.createElement(MintMapProvider, {
+    controller: controller
+  }, dissolveEffectWhenLoaded && React.createElement("div", {
+    className: cn$2('ani-fade-out'),
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      background: 'white',
+      zIndex: 1000,
+      animationFillMode: 'forwards',
+      animationDuration: '0.7s'
+    },
+    onAnimationEnd: function (e) {
+      e.target.style.display = 'none';
+    }
+  }), React.createElement(MintMapCore, __assign({
+    mapType: mapType
+  }, props, {
+    base: base
+  }), children)) : React.createElement(React.Fragment, null, dissolveEffectWhenLoaded && React.createElement("div", {
+    ref: function (refs) {
+      loadingRef.current = refs;
+    },
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      zIndex: 1000
+    }
+  }), loading));
 }
-var MintMapCanvasRenderer = function () {
+var MintMapCanvasRenderer =
+/** @class */
+function () {
   function MintMapCanvasRenderer(context) {
     this.context = context;
   }
@@ -2720,7 +2783,9 @@ var MintMapCanvasRenderer = function () {
   return MintMapCanvasRenderer;
 }();
-var AnimationPlayer = function () {
+var AnimationPlayer =
+/** @class */
+function () {
   function AnimationPlayer(drawFunction, fps) {
     this.prevtime = 0;
     this.elapsedTime = 0;
@@ -2755,21 +2820,27 @@ var AnimationPlayer = function () {
   };
   AnimationPlayer.prototype.resume = function () {
-    this.playing = true;
+    this.playing = true; //@ts-ignore
     window.requestAnimationFrame(this.makeFrame.bind(this));
   };
   AnimationPlayer.prototype.makeFrame = function (timestamp) {
+    //frame 간 시간 변화
     if (this.prevtime === 0) {
       this.prevtime = timestamp;
     }
-    this.deltaTime += timestamp - this.prevtime;
+    this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
     this.prevtime = timestamp;
     if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
-      this.elapsedTime += this.deltaTime;
-      var stopFlag = this.draw(this.deltaTime, this.elapsedTime);
+      //다음 루프 준비
+      this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
+      var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
       this.deltaTime = 0;
       if (stopFlag) {
@@ -2778,6 +2849,7 @@ var AnimationPlayer = function () {
     }
     if (this.playing) {
+      //@ts-ignore
       window.requestAnimationFrame(this.makeFrame.bind(this));
     }
   };
@@ -2811,13 +2883,16 @@ function useMarkerMoving(_a) {
       _h = _a.velocity,
       velocity = _h === void 0 ? 10 : _h,
       onMovingStart = _a.onMovingStart,
-      onMovingEnd = _a.onMovingEnd;
+      onMovingEnd = _a.onMovingEnd; //controller
   var controller = useMintMapController();
   useEffect(function () {
+    //console.log('velocity changed!!!!', velocity);
     contextRef.current && (contextRef.current.velocityKmh = velocity);
   }, [velocity]);
   var contextRef = useRef();
   useEffect(function () {
+    //console.log('ani marker', marker);
     if (marker) {
       var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
       var stopNext_1 = false;
@@ -2835,15 +2910,19 @@ function useMarkerMoving(_a) {
       var draw = function (frameGapTime, _elapsedTime) {
         if (!marker) {
           console.log('myMarker is not exist!!!');
-          return true;
-        }
+          return true; //종료
+        } //지난 시간
-        context_1.elapsedTimeMs = frameGapTime;
+        context_1.elapsedTimeMs = frameGapTime; //next position 계산
         while (true) {
-          GeoCalulator.computeNextPositionAndDistances(context_1);
+          //계산
+          GeoCalulator.computeNextPositionAndDistances(context_1); //타겟에 도착했으면, 원래 얼마나 더 갈수 있었는지 체크해서
+          //그 만큼 더 가도록 계속 처리하기위해 다시 계산
           if (context_1.nextPos === context_1.pos2) {
+            //다음 목표가 시작점과 같으면 loop 카운트 +1
             if (currTargetIndex_1 === startPositionIndex) {
               loopCount_1 += 1;
             }
@@ -2851,9 +2930,11 @@ function useMarkerMoving(_a) {
             if (!loop && loopCount_1 > 0) {
               stopNext_1 = true;
               break;
-            }
+            } //현재 출발점
+            context_1.pos1 = positions[currTargetIndex_1]; //현재 목표점
-            context_1.pos1 = positions[currTargetIndex_1];
             currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
             if (currTargetIndex_1 === 0 && !positionClosed) {
@@ -2873,7 +2954,7 @@ function useMarkerMoving(_a) {
         if (stopNext_1) {
           onMovingEnd && onMovingEnd();
-          return true;
+          return true; //종료
         }
         return false;
@@ -2920,13 +3001,102 @@ function useMarkerMoving(_a) {
   return [start, stop, resume];
 }
+var Drawable =
+/** @class */
+function () {
+  function Drawable() {}
+  return Drawable;
+}();
+var Marker =
+/** @class */
+function (_super) {
+  __extends(Marker, _super);
+  /**
+   * 지도에 표시할 마커정보
+   */
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+    _this.options = options;
+    return _this;
+  }
+  return Marker;
+}(Drawable);
+var Polyline =
+/** @class */
+function (_super) {
+  __extends(Polyline, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+    _this.options = options;
+    return _this;
+  }
+  return Polyline;
+}(Drawable);
+var Polygon =
+/** @class */
+function (_super) {
+  __extends(Polygon, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+    _this.options = options;
+    return _this;
+  }
+  /**
+   * 폴리곤의 중점을 구한다.
+   */
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+      });
+      return PolygonCalculator.getCenter(paths);
+    }
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+  return Polygon;
+}(Drawable);
 var offsetCalibration = function (mapType, divElement, options) {
+  //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
   if (mapType === 'google') {
     divElement.style.transform = "translate(50%, 100%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   } else if (mapType === 'kakao') {
     divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   }
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapMarkerWrapper(_a) {
   var startAnimationClassName = _a.startAnimationClassName,
@@ -2937,19 +3107,24 @@ function MapMarkerWrapper(_a) {
       topOnHover = _c === void 0 ? false : _c,
       movingAnimation = _a.movingAnimation,
       children = _a.children,
-      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
+  var controller = useMintMapController(); //element
-  var controller = useMintMapController();
   var divRef = useRef(document.createElement('div'));
-  var divElement = divRef.current;
-  var divCloneRef = useRef();
-  var markerRef = useRef();
+  var divElement = divRef.current; //element clone for animation
+  var divCloneRef = useRef(); //marker
+  var markerRef = useRef(); //moving animation
   var _d = useState({}),
       movingState = _d[0],
       setMovingState = _d[1];
   useEffect(function () {
+    // console.log('movingState', movingState);
     if (movingState.autoStart) {
       setTimeout(function () {
         start();
@@ -2957,18 +3132,20 @@ function MapMarkerWrapper(_a) {
     }
   }, [movingState]);
   useEffect(function () {
+    // console.log('movingAnimation changed', movingAnimation);
     if (movingAnimation) {
       setMovingState(__assign(__assign({}, movingAnimation), {
         marker: markerRef.current
       }));
     }
-  }, [movingAnimation]);
-  var start = useMarkerMoving(movingState)[0];
+  }, [movingAnimation]); //marker moving hook
+  var start = useMarkerMoving(movingState)[0]; //event handlers
   var onClickHandler = function (e) {
     var _a;
-    var marker = markerRef.current;
+    var marker = markerRef.current; //console.log('onClickHandler', marker);
     if (marker) {
       controller.setMapDragged(false);
@@ -2987,7 +3164,7 @@ function MapMarkerWrapper(_a) {
   var onMouseOverHandler = function (e) {
     var _a;
-    var marker = markerRef.current;
+    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
     if (marker) {
       var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -3000,20 +3177,26 @@ function MapMarkerWrapper(_a) {
       next && topOnHover && controller.markerToTheTop(marker);
     }
-  };
+  }; //create object
   useEffect(function () {
+    // console.log('drawable created')
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
+      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로,
+      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
+      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
       if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
         divCloneRef.current.classList.add(endAnimationClassName);
         var aniListener_1 = function () {
+          //console.log('animationend!!!', divCloneRef.current);
           divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
           if (markerRef.current) {
-            controller.clearDrawable(markerRef.current);
+            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
           }
           divCloneRef.current = undefined;
@@ -3026,35 +3209,42 @@ function MapMarkerWrapper(_a) {
         divElement.removeEventListener('mouseover', onMouseOverHandler);
         if (markerRef.current) {
-          controller.clearDrawable(markerRef.current);
+          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
         }
       }
     };
-  }, []);
+  }, []); //create / update object
   useEffect(function () {
     if (options) {
       if (markerRef.current) {
-        controller.updateMarker(markerRef.current, options);
-        offsetCalibration(controller.getMapType(), divElement, options);
+        //console.log('update Marker')
+        controller.updateMarker(markerRef.current, options); //marker offset 보정
-        if (markerRef.current.options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
         }
       } else {
+        //console.log('create Marker')
         markerRef.current = new Marker(options);
         markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current);
-        offsetCalibration(controller.getMapType(), divElement, options);
+        controller.createMarker(markerRef.current); //marker offset 보정
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        } //moving 애니메이션 시작
-        if (markerRef.current.options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
-        }
         if (movingAnimation) {
           setMovingState(__assign(__assign({}, movingAnimation), {
             marker: markerRef.current
           }));
-        }
+        } //start animation
         if (startAnimationClassName) {
           divElement.style.visibility = 'hidden';
@@ -3085,26 +3275,41 @@ function MapMarkerWrapper(_a) {
   return createPortal(children, divElement);
 }
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapPolygonWrapper(_a) {
   var children = _a.children,
-      options = __rest(_a, ["children"]);
+      options = __rest(_a, ["children"]); //controller
+  var controller = useMintMapController(); //lifecycle
-  var controller = useMintMapController();
   useEffect(function () {
     return function () {
       if (polygonRef.current) {
+        // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
       }
     };
-  }, []);
+  }, []); //create/update object
   var polygonRef = useRef();
   useEffect(function () {
+    //console.log('Polygon useEffect')
     if (options) {
       if (polygonRef.current) {
+        //console.log('update Polygon', options)
         controller.updatePolygon(polygonRef.current, options);
       } else {
         var polygon = new Polygon(options);
-        polygonRef.current = polygon;
+        polygonRef.current = polygon; //console.log('create Polygon', options)
         controller.createPolygon(polygon);
       }
     }
@@ -3176,11 +3381,13 @@ function MapBuildingProjection(props) {
   var wallPolygons = useRef();
   var titlePosition = useRef();
   useEffect(function () {
+    //베이스 폴리곤
     var base = {
       position: basePolygonPath
     };
     var height = numberOfFloor * heightOfFloor;
-    var projectionHeight = GeoCalulator.convertMeterToLatitudeValue(height);
+    var projectionHeight = GeoCalulator.convertMeterToLatitudeValue(height); //roof
     var roofPaths = [];
     for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
@@ -3190,7 +3397,8 @@ function MapBuildingProjection(props) {
     roofPolygon.current = {
       position: roofPaths
-    };
+    }; //walls
     wallPolygons.current = [];
     for (var i = 0; i < basePolygonPath.length; i++) {
@@ -3201,13 +3409,14 @@ function MapBuildingProjection(props) {
       wallPolygons.current.push({
         position: [start, startNext, endNext, end]
       });
-    }
+    } //latitude 기준으로 배열 재정렬
     wallPolygons.current.sort(function (a, b) {
       var maxA = getMaxLat(a.position);
       var maxB = getMaxLat(b.position);
       return maxA.lat < maxB.lat ? 1 : -1;
-    });
+    }); //latitude 가장 높은값과 longitude 중간값으로 타이틀 위치 결정
     if (title || titleElement) {
       var maxPos = getMaxLat(wallPolygons.current[0].position);
@@ -3255,27 +3464,271 @@ function MapBuildingProjection(props) {
       left: 'calc(50% - 75px)',
       top: '-35px'
     }
-  }, React.createElement("div", {
+  }, React.createElement("div", {
+    style: {
+      maxWidth: '150px',
+      border: '1px solid gray',
+      borderRadius: '5px',
+      padding: '2px 5px',
+      background: 'white',
+      fontSize: '12px',
+      fontWeight: 600,
+      color: '#006fd1'
+    }
+  }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
+}
+var cn$1 = classNames.bind(styles$2);
+function PointLoading(_a) {
+  var _b = _a.text,
+      text = _b === void 0 ? 'Loading' : _b,
+      _c = _a.pointCount,
+      pointCount = _c === void 0 ? 4 : _c,
+      _d = _a.speedMs,
+      speedMs = _d === void 0 ? 200 : _d;
+  var pointStringPool = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+    return Array.from(Array(idx + 1)).map(function () {
+      return '.';
+    }).join('');
+  }))[0];
+  var _e = useState(''),
+      pointString = _e[0],
+      setPointString = _e[1];
+  useEffect(function () {
+    var pointStringIndex = 0;
+    var interval = setInterval(function () {
+      pointStringIndex += 1;
+      if (pointStringIndex >= pointCount) {
+        pointStringIndex = 0;
+      }
+      setPointString(pointStringPool[pointStringIndex]);
+    }, speedMs);
+    return function () {
+      interval && clearInterval(interval);
+    };
+  }, []);
+  return React.createElement("div", {
+    className: cn$1('loading-point-container')
+  }, React.createElement("div", {
+    style: {
+      width: '300px',
+      fontSize: '16px',
+      fontWeight: 600,
+      color: 'gray',
+      transform: 'translateX(130px)'
+    }
+  }, "".concat(text, " ").concat(pointString)));
+}
+function MapLoadingWithImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b;
+  var _c = useState(),
+      width = _c[0],
+      setWidth = _c[1];
+  var _d = useState(),
+      height = _d[0],
+      setHeight = _d[1];
+  var render = useMemo(function () {
+    if (!height || !width) {
+      return;
+    }
+    var row = Math.ceil(height / size);
+    var col = Math.ceil(width / size);
+    console.log('re render', width, height, row, col);
+    return Array.from(Array(row)).map(function () {
+      return React.createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, Array.from(Array(col)).map(function () {
+        var duration = Number((Math.random() * 4).toFixed(1)) + 1;
+        var delay = Number((Math.random() * 4).toFixed(1)) + 2;
+        return React.createElement(LoadingImage, {
+          size: size,
+          duration: duration,
+          delay: delay
+        });
+      }));
+    });
+  }, [width, height]);
+  return React.createElement("div", {
+    ref: function (refs) {
+      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
+      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
+    },
     style: {
-      maxWidth: '150px',
-      border: '1px solid gray',
-      borderRadius: '5px',
-      padding: '2px 5px',
-      background: 'white',
-      fontSize: '12px',
-      fontWeight: 600,
-      color: '#006fd1'
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
     }
-  }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
+  }, render);
+}
+function LoadingImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b,
+      _c = _a.duration,
+      duration = _c === void 0 ? 1 : _c,
+      _d = _a.delay,
+      delay = _d === void 0 ? 1 : _d;
+  var scale = 256 / 4000;
+  return React.createElement("svg", {
+    className: cn$1("ani-fade-in"),
+    style: {
+      flex: "0 0 ".concat(size, "px"),
+      opacity: 0,
+      animationDelay: "".concat(delay, "s"),
+      animationDuration: "".concat(duration, "s"),
+      animationFillMode: 'forwards'
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("g", {
+    transform: "scale(".concat(scale, ")"),
+    "clip-path": "url(#clip0_5_701)"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    transform: "translate(0 4000) rotate(-90)",
+    fill: "#F8F8F8"
+  }), React.createElement("path", {
+    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+    fill: "#F6E4DD"
+  }), React.createElement("path", {
+    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "958",
+    cy: "3092",
+    r: "95",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "1127",
+    cy: "3176",
+    r: "56",
+    fill: "#A2CAEE"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
+    fill: "#FBEDB1"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
+    fill: "#FBEDB1"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_5_701"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    fill: "white",
+    transform: "translate(0 4000) rotate(-90)"
+  }))));
 }
 var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-  var _a;
+  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
   var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1;
+  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
   var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
-  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7));
+  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
   var boundsPos = [];
   var tempX1, tempY1, tempX2, tempY2;
@@ -3300,7 +3753,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
         size: basePixelSize
       });
     }
-  }
+  } //좌표마다 검사해서 인접셀 병합 처리
   var centerList = [];
   var totalItemCount = 0;
@@ -3311,7 +3765,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
     for (var k = 0; k < boundsPos[i].length; k++) {
       var curr = boundsPos[i][k];
       if (curr.checked) continue;
-      curr.checked = true;
+      curr.checked = true; //현재기준 8방향 객체 모으기
       var incList = [];
       if (boundsPos[i]) {
@@ -3383,7 +3838,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
   for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
     var center = centerList_1[_b];
     center.size = sizeFunction(center, status);
-  }
+  } // console.log('centerList', centerList, status);
   return centerList;
 };
@@ -3446,6 +3902,14 @@ var getAlignPosition = function (value, align) {
   throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapControlWrapper(_a) {
   var _b = _a.width,
@@ -3468,26 +3932,40 @@ function MapControlWrapper(_a) {
   }, children);
 }
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapPolylineWrapper(_a) {
   var children = _a.children,
-      options = __rest(_a, ["children"]);
+      options = __rest(_a, ["children"]); //controller
+  var controller = useMintMapController(); //lifecycle
-  var controller = useMintMapController();
   useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current);
+        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
       }
     };
-  }, []);
+  }, []); //create/update object
   var polylineRef = useRef();
   useEffect(function () {
+    //console.log('Polyline useEffect')
     if (options) {
       if (polylineRef.current) {
+        //console.log('update Polyline', options)
         controller.updatePolyline(polylineRef.current, options);
       } else {
         var polyline = new Polyline(options);
-        polylineRef.current = polyline;
+        polylineRef.current = polyline; //console.log('create Polyline', options)
         controller.createPolyline(polyline);
       }
     }
@@ -3499,10 +3977,19 @@ var console$1 = {
   log: function () {
   }
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapCanvasWrapper(_a) {
   var children = _a.children;
       __rest(_a, ["children"]);
-  var controller = useMintMapController();
+  var controller = useMintMapController(); //render switch
   var _b = useState(false),
       renderFlag = _b[0],
@@ -3510,18 +3997,28 @@ function MapCanvasWrapper(_a) {
   var invokeRender = useCallback(function () {
     setRenderFlag(!renderFlag);
-  }, []);
-  var renderer = useRef();
-  var containerRef = useRef(null);
-  var canvasRef = useRef(null);
-  var contextRef = useRef();
+  }, []); //canvas renderer
+  var renderer = useRef(); //canvas container ref
+  var containerRef = useRef(null); //canvas ref
+  var canvasRef = useRef(null); //canvas context
+  var contextRef = useRef(); //clear rect
   var clearRect = useCallback(function () {
     if (contextRef.current && canvasRef.current) {
       contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
     }
     return true;
-  }, []);
+  }, []); //offset values
+  // const offsetProvider = useRef(new Offset(0, 0))
+  // const prevX = useRef(0)
+  // const prevY = useRef(0)
+  //scaling
   var scaleCanvas = useCallback(function (containerRef, canvasElement, canvasContext) {
     var devicePixelRatio = window.devicePixelRatio;
     var width = containerRef.offsetWidth;
@@ -3531,7 +4028,16 @@ function MapCanvasWrapper(_a) {
     canvasElement.style.width = "".concat(width, "px");
     canvasElement.style.height = "".concat(height, "px");
     canvasContext.scale(devicePixelRatio, devicePixelRatio);
-  }, []);
+  }, []); //init transform
+  // const initTransform = useCallback(()=>{
+  //   offsetProvider.current.x = 0
+  //   offsetProvider.current.y = 0
+  //   containerRef.current && (containerRef.current.style.transform = `translate(0px, 0px)`)
+  //   console.log('initTransform');
+  //   return true
+  // }, [])
+  //parse click param
   var parseClickParamToPosition = useCallback(function (mapType, e) {
     var latlng = e.latlng || e.latLng;
@@ -3555,15 +4061,17 @@ function MapCanvasWrapper(_a) {
     }
     return clickPosition;
-  }, []);
+  }, []); //box includes
   var includes = function (point, targetPoint, width, height) {
+    // console.log('includes', point, targetPoint, width, height);
     if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
       return true;
     }
     return false;
-  };
+  }; //process mouse event
   var processMouseEvent = useCallback(function (clickedOffset, eventName) {
     var items = renderItemsOnView.current;
@@ -3577,9 +4085,10 @@ function MapCanvasWrapper(_a) {
         if (!event_1) {
           continue;
-        }
+        } //includes check
-        var pos = item.position;
+        var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
         if (pos && !pos.offset) {
           pos.offset = controller.positionToOffset(pos);
@@ -3587,61 +4096,92 @@ function MapCanvasWrapper(_a) {
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
           continue;
-        }
+        } // const propagation =
         event_1(clickedOffset);
-        hitSet.add(item);
-        break;
+        hitSet.add(item); // if(eventName === 'onMouseOver' || propagation === false){
+        break; // }
       }
     }
     return hitSet;
-  }, []);
+  }, []); //initialize
   useEffect(function () {
     var resizeObserver;
     if (canvasRef.current && containerRef.current) {
       resizeObserver = new ResizeObserver(function (entries) {
         var elem = entries[0];
-        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current); // initTransform()
         renderMain();
       });
       resizeObserver.observe(containerRef.current);
       var map = controller.getMap();
       if (map) {
+        // const center = controller.getCenter()
+        // center.offset = controller.positionToOffset(center)
+        // if(center.offset){
+        //   prevX.current = center.offset.x
+        //   prevY.current = center.offset.y
+        // }
+        //naver 전용 이벤트 'zooming' 일때 캔버스 클리어처리
+        //@ts-ignore
         map.addListener('zooming', function () {
           clearRect();
-        });
+        }); //kakao 전용 이벤트 'zoom_start' 일때 캔버스 클리어처리
+        //@ts-ignore
         map.addListener('zoom_start', function () {
           clearRect();
-        });
+        }); //@ts-ignore
         map.addListener('center_changed', function () {
           if (containerRef.current) {
+            // const pos = controller.getCenter()
+            // pos.offset = controller.positionToOffset(pos)
+            // const deltaX = prevX.current - pos.offset.x
+            // const deltaY = prevY.current - pos.offset.y
+            // offsetProvider.current.x += deltaX
+            // offsetProvider.current.y += deltaY
+            // prevX.current = pos.offset.x
+            // prevY.current = pos.offset.y
+            // containerRef.current.style.transform = `translate(${offsetProvider.current.x}px, ${offsetProvider.current.y}px)`
             containerRef.current.style.visibility = 'hidden';
           }
-        });
+        }); //@ts-ignore
         map.addListener('idle', function () {
           if (containerRef.current) {
             containerRef.current.style.visibility = '';
           }
-          clearRect();
+          clearRect(); // contextRef.current?.translate(offsetProvider.current.x, offsetProvider.current.y)
+          // initTransform()
           invokeRender();
-        });
+        }); //@ts-ignore
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition);
-          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
           renderItemsMouseOverStatus.current.forEach(function (item) {
             if (!hitSet.has(item)) {
               item.onMouseOut && item.onMouseOut(clickedOffset);
             }
           });
           renderItemsMouseOverStatus.current = hitSet;
-        });
+        }); //@ts-ignore
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
           var clickedOffset = controller.positionToOffset(clickPosition);
@@ -3660,14 +4200,18 @@ function MapCanvasWrapper(_a) {
     return function () {
       resizeObserver && resizeObserver.disconnect();
     };
-  }, []);
+  }, []); //items setting
   var renderItems = useRef([]);
   var renderItemsOnView = useRef([]);
   var renderItemsMouseOverStatus = useRef(new Set());
   useEffect(function () {
     renderItems.current = (Array.isArray(children) ? children : children ? [children] : []).map(function (item) {
       return item.props;
-    });
+    }); //draw 를 위한 정렬 조건
+    //1. zIndex 가 있는 것들 끼리 정렬처리
+    //2. zIndex 가 없는 것들은 원래 배열 순서대로
     var zIndexList = [];
     var undefinedList = [];
@@ -3687,16 +4231,19 @@ function MapCanvasWrapper(_a) {
     }).forEach(function (item) {
       renderItems.current.push(item);
     });
-  }, [children]);
+  }, [children]); //rendering main
   var renderMain = useCallback(function () {
     var ctx = contextRef.current;
     var container = containerRef.current;
     if (!ctx || !container || !renderer.current) {
       return;
-    }
+    } //all clear
+    clearRect(); //draw
-    clearRect();
     var t = new Date().getTime();
     var items = renderItems.current;
     renderItemsOnView.current.length = 0;
@@ -3706,7 +4253,8 @@ function MapCanvasWrapper(_a) {
       var item = items_1[_i];
       if (item.visible === undefined || item.visible) {
-        var pos = item.position;
+        var pos = item.position; //위치 변환
         pos.offset = controller.positionToOffset(pos);
         if (item.anchor) {
@@ -3718,7 +4266,8 @@ function MapCanvasWrapper(_a) {
         if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
           continue;
-        }
+        } //그리기
         item.renderer(renderer.current, pos.offset, item.payload);
         renderItemsOnView.current.push(item);
@@ -3732,7 +4281,8 @@ function MapCanvasWrapper(_a) {
       }
     });
     console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
-  }, []);
+  }, []); //render!!!
   renderMain();
   return React.createElement("div", {
     ref: containerRef,
@@ -3751,7 +4301,16 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 function MapCanvasMarkerWrapper(_props) {
+  //실제 렌더링처리는 MapCanvasWrapper 에서...
   return React.createElement(React.Fragment, null);
 }