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

package/dist/index.umd.js

@@ -14,106 +14,9 @@
   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__default["default"](css_248z$2);
 
-  var MintMapControllerContext = React.createContext(null);
-  function MintMapProvider(_a) {
-    var controller = _a.controller,
-        children = _a.children;
-    return React__default["default"].createElement(MintMapControllerContext.Provider, {
-      value: controller
-    }, children);
-  }
-  function useMintMapController() {
-    var controller = React.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__default["default"](css_248z$1);
-
-  var cn$2 = classNames__default["default"].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 = React.useRef(null);
-
-    var _d = React.useState(false),
-        mapInitialized = _d[0],
-        setMapInitialized = _d[1];
-
-    React.useEffect(function () {
-      (function () {
-        return tslib.__awaiter(_this, void 0, void 0, function () {
-          var map_1;
-          return tslib.__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]);
-    React.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]);
-    React.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__default["default"].createElement("div", {
-      className: cn$2('mint-map-root')
-    }, mapInitialized && children, React__default["default"].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;
@@ -124,7 +27,20 @@
     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) {
@@ -148,10 +64,11 @@
         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!!!');
@@ -184,9 +101,10 @@
       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);
@@ -208,16 +126,20 @@
 
     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
@@ -247,7 +169,7 @@
 
     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;
@@ -260,7 +182,9 @@
     return PolygonCalculator;
   }();
 
-  var GeoCalulator = function () {
+  var GeoCalulator =
+  /** @class */
+  function () {
     function GeoCalulator() {}
 
     GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
@@ -268,7 +192,8 @@
       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;
     };
 
@@ -286,178 +211,480 @@
           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 tslib.__awaiter(this, void 0, void 0, function () {
-        return tslib.__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(uuid.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 = React.createContext(null);
+  function MintMapProvider(_a) {
+    var controller = _a.controller,
+        children = _a.children;
+    return React__default["default"].createElement(MintMapControllerContext.Provider, {
+      value: controller
+    }, children);
+  }
+  function useMintMapController() {
+    var controller = React.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__default["default"](css_248z$1);
+
+  var cn$3 = classNames__default["default"].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 = React.useRef(null);
+
+    var _d = React.useState(false),
+        mapInitialized = _d[0],
+        setMapInitialized = _d[1];
+
+    React.useEffect(function () {
+      (function () {
+        return tslib.__awaiter(_this, void 0, void 0, function () {
+          var map_1;
+          return tslib.__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]); //줌레벨
+
+    React.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]); //센터
+
+    React.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__default["default"].createElement("div", {
+      className: cn$3('mint-map-root')
+    }, mapInitialized && children, React__default["default"].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 tslib.__awaiter(this, void 0, void 0, function () {
+        return tslib.__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(uuid.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"));
     };
@@ -465,7 +692,9 @@
     return MintMapController;
   }();
 
-  var MapZoomInfo = function () {
+  var MapZoomInfo =
+  /** @class */
+  function () {
     function MapZoomInfo() {}
 
     MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
@@ -662,16 +891,20 @@
       var max;
       return tslib.__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);
@@ -683,7 +916,9 @@
     });
   }
 
-  var NaverMintMapController = function (_super) {
+  var NaverMintMapController =
+  /** @class */
+  function (_super) {
     tslib.__extends(NaverMintMapController, _super);
 
     function NaverMintMapController(props) {
@@ -698,21 +933,30 @@
       _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 tools.ObjectPool().setFactory(function () {
+      if (!this.mapProps.markerCache) return; //marker pool setting
+
+      this.markerPool = new tools.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) {
@@ -730,7 +974,7 @@
           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) {
@@ -744,8 +988,13 @@
           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)) {
@@ -756,7 +1005,9 @@
     };
 
     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)) {
@@ -771,7 +1022,8 @@
           strokeColor: options.lineColor,
           strokeWeight: options.lineSize,
           strokeOpacity: options.lineOpacity
-        });
+        }); //@ts-ignore
+
         options.editable !== undefined && polyline.native.setEditable(options.editable);
       }
     };
@@ -795,7 +1047,7 @@
           _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) {
@@ -813,7 +1065,9 @@
           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)) {
@@ -824,7 +1078,9 @@
     };
 
     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)) {
@@ -843,7 +1099,8 @@
           strokeOpacity: options.lineOpacity,
           fillColor: options.fillColor,
           fillOpacity: options.fillOpacity
-        });
+        }); //@ts-ignore
+
         options.editable !== undefined && polygon.native.setEditable(options.editable);
       }
     };
@@ -858,7 +1115,8 @@
           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
@@ -885,10 +1143,18 @@
     };
 
     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);
           }
@@ -901,7 +1167,21 @@
             marker.native.setIcon(tslib.__assign(tslib.__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}
+          // })
+
         }
       }
     };
@@ -981,7 +1261,7 @@
     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 () {
@@ -989,17 +1269,21 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
-          return [2, new Promise(function (resolve, error) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve, error) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var callbackName, loaded, params, callbackExecFlag, ok;
               return tslib.__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];
                     };
 
@@ -1008,17 +1292,22 @@
                       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;
                     })];
 
@@ -1031,7 +1320,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -1045,8 +1336,11 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          //div element
           this.mapDivElement = divElement;
-          return [2, new Promise(function (resolve) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
 
@@ -1057,17 +1351,26 @@
               return tslib.__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();
@@ -1104,43 +1407,59 @@
                     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*/
+                    ];
                 }
               });
             });
@@ -1167,7 +1486,8 @@
         (_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 () {
@@ -1212,7 +1532,9 @@
     return NaverMintMapController;
   }(MintMapController);
 
-  var GoogleMintMapController = function (_super) {
+  var GoogleMintMapController =
+  /** @class */
+  function (_super) {
     tslib.__extends(GoogleMintMapController, _super);
 
     function GoogleMintMapController(props) {
@@ -1221,7 +1543,8 @@
       _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'];
@@ -1232,10 +1555,11 @@
           _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) {
@@ -1253,12 +1577,13 @@
           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,
@@ -1268,7 +1593,8 @@
           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)) {
@@ -1279,8 +1605,9 @@
     };
 
     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) {
@@ -1313,7 +1640,7 @@
           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) {
@@ -1332,7 +1659,8 @@
           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)) {
@@ -1343,8 +1671,9 @@
     };
 
     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) {
@@ -1360,12 +1689,14 @@
     };
 
     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];
         }
       }
@@ -1381,7 +1712,7 @@
       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
@@ -1412,6 +1743,7 @@
     };
 
     GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+      //console.log('controller updateMarker', options);
       var _a, _b;
 
       if (marker && marker.native) {
@@ -1422,7 +1754,8 @@
             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) {
@@ -1518,7 +1851,7 @@
     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 () {
@@ -1526,17 +1859,21 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
-          return [2, new Promise(function (resolve) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var callbackName, loaded, params, callbackExecFlag, ok;
               return tslib.__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];
                     };
 
@@ -1546,17 +1883,23 @@
                       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;
                     })];
 
@@ -1569,7 +1912,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -1583,8 +1928,11 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          //div element
           this.mapDivElement = divElement;
-          return [2, new Promise(function (resolve) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var map;
 
@@ -1595,15 +1943,24 @@
               return tslib.__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();
@@ -1622,14 +1979,20 @@
                       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);
@@ -1639,13 +2002,16 @@
                     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*/
+                    ];
                 }
               });
             });
@@ -1668,7 +2034,7 @@
       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))
       }
     };
 
@@ -1703,7 +2069,9 @@
     return GoogleMintMapController;
   }(MintMapController);
 
-  var KakaoMintMapController = function (_super) {
+  var KakaoMintMapController =
+  /** @class */
+  function (_super) {
     tslib.__extends(KakaoMintMapController, _super);
 
     function KakaoMintMapController(props) {
@@ -1718,21 +2086,30 @@
       _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 tools.ObjectPool().setFactory(function () {
+      if (!this.mapProps.markerCache) return; //marker pool setting
+
+      this.markerPool = new tools.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) {
@@ -1748,7 +2125,7 @@
           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) {
@@ -1760,7 +2137,11 @@
           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)) {
@@ -1771,9 +2152,11 @@
     };
 
     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)) {
@@ -1784,6 +2167,7 @@
 
         polyline.native.setOptions({
           path: path || polyline.native.getPath(),
+          //visible:options.visible === undefined || options.visible,
           strokeColor: options.lineColor,
           strokeWeight: options.lineSize,
           strokeOpacity: options.lineOpacity
@@ -1809,15 +2193,17 @@
           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,
@@ -1826,8 +2212,12 @@
           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)) {
@@ -1838,9 +2228,11 @@
     };
 
     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)) {
@@ -1849,18 +2241,22 @@
           });
           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)
       }
     };
 
@@ -1872,8 +2268,10 @@
       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;
 
@@ -1886,7 +2284,7 @@
         } 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;
         }
 
@@ -1899,10 +2297,12 @@
     };
 
     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));
           }
@@ -1911,11 +2311,16 @@
             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;
@@ -1925,14 +2330,16 @@
         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;
+              }
             }
           }
         }
@@ -2003,7 +2410,7 @@
     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 () {
@@ -2011,7 +2418,9 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
-          return [2, new Promise(function (resolve) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var params, ok;
 
@@ -2025,13 +2434,17 @@
                       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;
                     })];
 
@@ -2044,7 +2457,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -2059,7 +2474,9 @@
 
         return tslib.__generator(this, function (_a) {
           this.mapDivElement = divElement;
-          return [2, new Promise(function (resolve) {
+          return [2
+          /*return*/
+          , new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
 
@@ -2070,17 +2487,12 @@
               return tslib.__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();
@@ -2090,7 +2502,7 @@
                   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
@@ -2113,31 +2525,58 @@
                     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*/
+                    ];
                 }
               });
             });
@@ -2147,6 +2586,14 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      */
       var mapValue = this.getBaseToMapZoom(value);
 
       if (mapValue > 14) {
@@ -2165,7 +2612,8 @@
         (_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 () {
@@ -2204,519 +2652,134 @@
     };
 
     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__default["default"].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) {
-    tslib.__extends(Marker, _super);
-
-    function Marker(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Marker;
-  }(Drawable);
-
-  var Polyline = function (_super) {
-    tslib.__extends(Polyline, _super);
-
-    function Polyline(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Polyline;
-  }(Drawable);
-
-  var Polygon = function (_super) {
-    tslib.__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__default["default"].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 = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
-
-    var loadingRef = React.useRef(null);
-
-    var _d = React.useState(),
-        controller = _d[0],
-        setController = _d[1];
-
-    var loading = React.useMemo(function () {
-      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
-    }, [mapLoadingComponent]);
-    React.useEffect(function () {
-      if (mapType && mapType.length > 0) {
-        setController(undefined);
-        var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
-          mapType: mapType
-        }, props), {
-          base: base
-        })) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
-          mapType: mapType
-        }, props), {
-          base: base
-        })) : mapType === 'kakao' ? new KakaoMintMapController(tslib.__assign(tslib.__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__default["default"].createElement(React__default["default"].Fragment, null, controller ? React__default["default"].createElement(MintMapProvider, {
-      controller: controller
-    }, dissolveEffectWhenLoaded && React__default["default"].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__default["default"].createElement(MintMapCore, tslib.__assign({
-      mapType: mapType
-    }, props, {
-      base: base
-    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].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 = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
-      return Array.from(Array(idx + 1)).map(function () {
-        return '.';
-      }).join('');
-    }))[0];
-
-    var _e = React.useState(''),
-        pointString = _e[0],
-        setPointString = _e[1];
-
-    React.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__default["default"].createElement("div", {
-      className: cn$1('loading-point-container')
-    }, React__default["default"].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 = React.useState(),
-        width = _c[0],
-        setWidth = _c[1];
-
-    var _d = React.useState(),
-        height = _d[0],
-        setHeight = _d[1];
-
-    var render = React.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__default["default"].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__default["default"].createElement(LoadingImage, {
-            size: size,
-            duration: duration,
-            delay: delay
-          });
-        }));
-      });
-    }, [width, height]);
-    return React__default["default"].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__default["default"].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__default["default"].createElement("g", {
-      transform: "scale(".concat(scale, ")"),
-      "clip-path": "url(#clip0_5_701)"
-    }, React__default["default"].createElement("rect", {
-      width: "4000",
-      height: "4000",
-      transform: "translate(0 4000) rotate(-90)",
-      fill: "#F8F8F8"
-    }), React__default["default"].createElement("path", {
-      d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
-      fill: "#E6E6E6"
-    }), React__default["default"].createElement("path", {
-      d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
-      fill: "#F6E4DD"
-    }), React__default["default"].createElement("path", {
-      d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
-      fill: "#DCEACA"
-    }), React__default["default"].createElement("path", {
-      d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
-      fill: "#E6E6E6"
-    }), React__default["default"].createElement("path", {
-      d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
-      fill: "#DCEACA"
-    }), React__default["default"].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__default["default"].createElement("circle", {
-      cx: "958",
-      cy: "3092",
-      r: "95",
-      fill: "#A2CAEE"
-    }), React__default["default"].createElement("circle", {
-      cx: "1127",
-      cy: "3176",
-      r: "56",
-      fill: "#A2CAEE"
-    }), React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("defs", null, React__default["default"].createElement("clipPath", {
-      id: "clip0_5_701"
-    }, React__default["default"].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 = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
+
+    var loadingRef = React.useRef(null);
+
+    var _d = React.useState(),
+        controller = _d[0],
+        setController = _d[1];
+
+    var loading = React.useMemo(function () {
+      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [mapLoadingComponent]);
+    React.useEffect(function () {
+      if (mapType && mapType.length > 0) {
+        setController(undefined);
+        var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
+          mapType: mapType
+        }, props), {
+          base: base
+        })) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
+          mapType: mapType
+        }, props), {
+          base: base
+        })) : mapType === 'kakao' ? new KakaoMintMapController(tslib.__assign(tslib.__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__default["default"].createElement(React__default["default"].Fragment, null, controller ? React__default["default"].createElement(MintMapProvider, {
+      controller: controller
+    }, dissolveEffectWhenLoaded && React__default["default"].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__default["default"].createElement(MintMapCore, tslib.__assign({
+      mapType: mapType
+    }, props, {
+      base: base
+    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].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;
     }
@@ -2724,7 +2787,9 @@
     return MintMapCanvasRenderer;
   }();
 
-  var AnimationPlayer = function () {
+  var AnimationPlayer =
+  /** @class */
+  function () {
     function AnimationPlayer(drawFunction, fps) {
       this.prevtime = 0;
       this.elapsedTime = 0;
@@ -2759,21 +2824,27 @@
     };
 
     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) {
@@ -2782,6 +2853,7 @@
       }
 
       if (this.playing) {
+        //@ts-ignore
         window.requestAnimationFrame(this.makeFrame.bind(this));
       }
     };
@@ -2815,13 +2887,16 @@
         _h = _a.velocity,
         velocity = _h === void 0 ? 10 : _h,
         onMovingStart = _a.onMovingStart,
-        onMovingEnd = _a.onMovingEnd;
+        onMovingEnd = _a.onMovingEnd; //controller
+
     var controller = useMintMapController();
     React.useEffect(function () {
+      //console.log('velocity changed!!!!', velocity);
       contextRef.current && (contextRef.current.velocityKmh = velocity);
     }, [velocity]);
     var contextRef = React.useRef();
     React.useEffect(function () {
+      //console.log('ani marker', marker);
       if (marker) {
         var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
         var stopNext_1 = false;
@@ -2839,15 +2914,19 @@
         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;
               }
@@ -2855,9 +2934,11 @@
               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) {
@@ -2877,7 +2958,7 @@
 
           if (stopNext_1) {
             onMovingEnd && onMovingEnd();
-            return true;
+            return true; //종료
           }
 
           return false;
@@ -2924,13 +3005,102 @@
     return [start, stop, resume];
   }
 
+  var Drawable =
+  /** @class */
+  function () {
+    function Drawable() {}
+
+    return Drawable;
+  }();
+
+  var Marker =
+  /** @class */
+  function (_super) {
+    tslib.__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) {
+    tslib.__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) {
+    tslib.__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,
@@ -2941,19 +3111,24 @@
         topOnHover = _c === void 0 ? false : _c,
         movingAnimation = _a.movingAnimation,
         children = _a.children,
-        options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+        options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
+
+
+    var controller = useMintMapController(); //element
 
-    var controller = useMintMapController();
     var divRef = React.useRef(document.createElement('div'));
-    var divElement = divRef.current;
-    var divCloneRef = React.useRef();
-    var markerRef = React.useRef();
+    var divElement = divRef.current; //element clone for animation
+
+    var divCloneRef = React.useRef(); //marker
+
+    var markerRef = React.useRef(); //moving animation
 
     var _d = React.useState({}),
         movingState = _d[0],
         setMovingState = _d[1];
 
     React.useEffect(function () {
+      // console.log('movingState', movingState);
       if (movingState.autoStart) {
         setTimeout(function () {
           start();
@@ -2961,18 +3136,20 @@
       }
     }, [movingState]);
     React.useEffect(function () {
+      // console.log('movingAnimation changed', movingAnimation);
       if (movingAnimation) {
         setMovingState(tslib.__assign(tslib.__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);
@@ -2991,7 +3168,7 @@
     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');
@@ -3004,20 +3181,26 @@
 
         next && topOnHover && controller.markerToTheTop(marker);
       }
-    };
+    }; //create object
+
 
     React.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;
@@ -3030,35 +3213,42 @@
           divElement.removeEventListener('mouseover', onMouseOverHandler);
 
           if (markerRef.current) {
-            controller.clearDrawable(markerRef.current);
+            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
           }
         }
       };
-    }, []);
+    }, []); //create / update object
+
     React.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(tslib.__assign(tslib.__assign({}, movingAnimation), {
               marker: markerRef.current
             }));
-          }
+          } //start animation
+
 
           if (startAnimationClassName) {
             divElement.style.visibility = 'hidden';
@@ -3089,26 +3279,41 @@
     return reactDom.createPortal(children, divElement);
   }
 
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
   function MapPolygonWrapper(_a) {
     var children = _a.children,
-        options = tslib.__rest(_a, ["children"]);
+        options = tslib.__rest(_a, ["children"]); //controller
+
+
+    var controller = useMintMapController(); //lifecycle
 
-    var controller = useMintMapController();
     React.useEffect(function () {
       return function () {
         if (polygonRef.current) {
+          // console.log('polygon cleared')
           controller.clearDrawable(polygonRef.current);
         }
       };
-    }, []);
+    }, []); //create/update object
+
     var polygonRef = React.useRef();
     React.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);
         }
       }
@@ -3180,11 +3385,13 @@
     var wallPolygons = React.useRef();
     var titlePosition = React.useRef();
     React.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++) {
@@ -3194,7 +3401,8 @@
 
       roofPolygon.current = {
         position: roofPaths
-      };
+      }; //walls
+
       wallPolygons.current = [];
 
       for (var i = 0; i < basePolygonPath.length; i++) {
@@ -3205,13 +3413,14 @@
         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);
@@ -3259,27 +3468,271 @@
         left: 'calc(50% - 75px)',
         top: '-35px'
       }
-    }, React__default["default"].createElement("div", {
+    }, React__default["default"].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__default["default"].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 = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+      return Array.from(Array(idx + 1)).map(function () {
+        return '.';
+      }).join('');
+    }))[0];
+
+    var _e = React.useState(''),
+        pointString = _e[0],
+        setPointString = _e[1];
+
+    React.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__default["default"].createElement("div", {
+      className: cn$1('loading-point-container')
+    }, React__default["default"].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 = React.useState(),
+        width = _c[0],
+        setWidth = _c[1];
+
+    var _d = React.useState(),
+        height = _d[0],
+        setHeight = _d[1];
+
+    var render = React.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__default["default"].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__default["default"].createElement(LoadingImage, {
+            size: size,
+            duration: duration,
+            delay: delay
+          });
+        }));
+      });
+    }, [width, height]);
+    return React__default["default"].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__default["default"].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__default["default"].createElement("g", {
+      transform: "scale(".concat(scale, ")"),
+      "clip-path": "url(#clip0_5_701)"
+    }, React__default["default"].createElement("rect", {
+      width: "4000",
+      height: "4000",
+      transform: "translate(0 4000) rotate(-90)",
+      fill: "#F8F8F8"
+    }), React__default["default"].createElement("path", {
+      d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+      fill: "#E6E6E6"
+    }), React__default["default"].createElement("path", {
+      d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+      fill: "#F6E4DD"
+    }), React__default["default"].createElement("path", {
+      d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+      fill: "#DCEACA"
+    }), React__default["default"].createElement("path", {
+      d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+      fill: "#E6E6E6"
+    }), React__default["default"].createElement("path", {
+      d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+      fill: "#DCEACA"
+    }), React__default["default"].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__default["default"].createElement("circle", {
+      cx: "958",
+      cy: "3092",
+      r: "95",
+      fill: "#A2CAEE"
+    }), React__default["default"].createElement("circle", {
+      cx: "1127",
+      cy: "3176",
+      r: "56",
+      fill: "#A2CAEE"
+    }), React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("defs", null, React__default["default"].createElement("clipPath", {
+      id: "clip0_5_701"
+    }, React__default["default"].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;
 
@@ -3304,7 +3757,8 @@
           size: basePixelSize
         });
       }
-    }
+    } //좌표마다 검사해서 인접셀 병합 처리
+
 
     var centerList = [];
     var totalItemCount = 0;
@@ -3315,7 +3769,8 @@
       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]) {
@@ -3387,7 +3842,8 @@
     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;
   };
@@ -3450,6 +3906,14 @@
 
     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,
@@ -3472,26 +3936,40 @@
     }, children);
   }
 
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
   function MapPolylineWrapper(_a) {
     var children = _a.children,
-        options = tslib.__rest(_a, ["children"]);
+        options = tslib.__rest(_a, ["children"]); //controller
+
+
+    var controller = useMintMapController(); //lifecycle
 
-    var controller = useMintMapController();
     React.useEffect(function () {
       return function () {
         if (polylineRef.current) {
-          controller.clearDrawable(polylineRef.current);
+          controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
         }
       };
-    }, []);
+    }, []); //create/update object
+
     var polylineRef = React.useRef();
     React.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);
         }
       }
@@ -3503,10 +3981,19 @@
     log: function () {
     }
   };
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
   function MapCanvasWrapper(_a) {
     var children = _a.children;
         tslib.__rest(_a, ["children"]);
-    var controller = useMintMapController();
+
+    var controller = useMintMapController(); //render switch
 
     var _b = React.useState(false),
         renderFlag = _b[0],
@@ -3514,18 +4001,28 @@
 
     var invokeRender = React.useCallback(function () {
       setRenderFlag(!renderFlag);
-    }, []);
-    var renderer = React.useRef();
-    var containerRef = React.useRef(null);
-    var canvasRef = React.useRef(null);
-    var contextRef = React.useRef();
+    }, []); //canvas renderer
+
+    var renderer = React.useRef(); //canvas container ref
+
+    var containerRef = React.useRef(null); //canvas ref
+
+    var canvasRef = React.useRef(null); //canvas context
+
+    var contextRef = React.useRef(); //clear rect
+
     var clearRect = React.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 = React.useCallback(function (containerRef, canvasElement, canvasContext) {
       var devicePixelRatio = window.devicePixelRatio;
       var width = containerRef.offsetWidth;
@@ -3535,7 +4032,16 @@
       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 = React.useCallback(function (mapType, e) {
       var latlng = e.latlng || e.latLng;
 
@@ -3559,15 +4065,17 @@
       }
 
       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 = React.useCallback(function (clickedOffset, eventName) {
       var items = renderItemsOnView.current;
@@ -3581,9 +4089,10 @@
 
           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);
@@ -3591,61 +4100,92 @@
 
           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
+
     React.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);
@@ -3664,14 +4204,18 @@
       return function () {
         resizeObserver && resizeObserver.disconnect();
       };
-    }, []);
+    }, []); //items setting
+
     var renderItems = React.useRef([]);
     var renderItemsOnView = React.useRef([]);
     var renderItemsMouseOverStatus = React.useRef(new Set());
     React.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 = [];
 
@@ -3691,16 +4235,19 @@
       }).forEach(function (item) {
         renderItems.current.push(item);
       });
-    }, [children]);
+    }, [children]); //rendering main
+
     var renderMain = React.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;
@@ -3710,7 +4257,8 @@
         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) {
@@ -3722,7 +4270,8 @@
 
           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);
@@ -3736,7 +4285,8 @@
         }
       });
       console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
-    }, []);
+    }, []); //render!!!
+
     renderMain();
     return React__default["default"].createElement("div", {
       ref: containerRef,
@@ -3755,7 +4305,16 @@
     }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
   }
 
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
   function MapCanvasMarkerWrapper(_props) {
+    //실제 렌더링처리는 MapCanvasWrapper 에서...
     return React__default["default"].createElement(React__default["default"].Fragment, null);
   }