@mint-ui/map 0.4.5-beta → 0.5.0-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,10 +27,23 @@
     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) {
+    PolygonCalculator.getRegionInfo = function (positions) {
       var maxX, minX, maxY, minY;
 
       for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
@@ -150,8 +66,41 @@
         }
       }
 
-      if (maxX && minX && maxY && minY) {
-        return new Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+      return {
+        maxLat: maxX,
+        minLat: minX,
+        maxLng: maxY,
+        minLng: minY,
+        centerLat: minX && maxX ? minX + (maxX - minX) / 2 : undefined,
+        centerLng: minY && maxY ? minY + (maxY - minY) / 2 : undefined
+      };
+    };
+
+    PolygonCalculator.getRegionStart = function (positions) {
+      var info = this.getRegionInfo(positions);
+
+      if (info.minLat && info.minLng) {
+        return new PositionMirror(info.minLat, info.minLng);
+      }
+
+      throw new Error('Calculate RegionStart Error!!!');
+    };
+
+    PolygonCalculator.getRegionEnd = function (positions) {
+      var info = this.getRegionInfo(positions);
+
+      if (info.maxLat && info.maxLng) {
+        return new PositionMirror(info.maxLat, info.maxLng);
+      }
+
+      throw new Error('Calculate RegionEnd Error!!!');
+    };
+
+    PolygonCalculator.getCenter = function (positions) {
+      var info = this.getRegionInfo(positions);
+
+      if (info.centerLat && info.centerLng) {
+        return new PositionMirror(info.centerLat, info.centerLng);
       }
 
       throw new Error('Calculate Center Error!!!');
@@ -184,9 +133,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 +158,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 +201,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;
@@ -257,10 +211,96 @@
       return false;
     };
 
+    PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
+      var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
+      return this.simplify(target.map(function (position) {
+        return [position.lng, position.lat];
+      }), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE).map(function (point) {
+        return new PositionMirror(point[1], point[0]);
+      });
+    };
+
+    PolygonCalculator.simplify = function (points, tolerance) {
+      if (points.length <= 2) {
+        return points;
+      }
+
+      var dMax = 0;
+      var index = 0; // Find the point with the maximum distance from the line segment
+
+      for (var i = 1; i < points.length - 1; i++) {
+        var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
+
+        if (d > dMax) {
+          dMax = d;
+          index = i;
+        }
+      } // If the maximum distance is greater than the tolerance, recursively simplify
+
+
+      if (dMax > tolerance) {
+        var left = this.simplify(points.slice(0, index + 1), tolerance);
+        var right = this.simplify(points.slice(index), tolerance); // Concatenate the simplified left and right segments
+
+        return left.slice(0, left.length - 1).concat(right);
+      } else {
+        // If the maximum distance is less than or equal to the tolerance, return the endpoints
+        return [points[0], points[points.length - 1]];
+      }
+    }; // Calculate the perpendicular distance from a point to a line segment
+
+
+    PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
+      var x = point[0];
+      var y = point[1];
+      var x1 = lineStart[0];
+      var y1 = lineStart[1];
+      var x2 = lineEnd[0];
+      var y2 = lineEnd[1];
+      var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
+      var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
+      return numerator / denominator;
+    };
+
+    PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
+      var _this = this;
+
+      var outer = this.calculatePolygonSizeMain(polygon);
+      var inner = 0;
+      innerPolygons && innerPolygons.map(function (innerPolygon) {
+        inner += _this.calculatePolygonSizeMain(innerPolygon);
+      });
+      return outer - inner;
+    };
+
+    PolygonCalculator.calculatePolygonSizeMain = function (polygon) {
+      var vertices = polygon.map(function (pos) {
+        return {
+          x: GeoCalulator.convertLongitudeToMeterValue(pos.lat, pos.lng),
+          y: GeoCalulator.convertLatitudeToMeterValue(pos.lat)
+        };
+      });
+      var n = vertices.length;
+      var sum = 0;
+
+      for (var i = 0; i < n; i++) {
+        var currentVertex = vertices[i];
+        var nextVertex = vertices[(i + 1) % n];
+        sum += currentVertex.x * nextVertex.y - currentVertex.y * nextVertex.x;
+      }
+
+      var area = Math.abs(sum) / 2;
+      return area;
+    };
+
+    PolygonCalculator.TOLERANCE_NAVER_STYLE = 0.0001;
+    PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 0.00001;
     return PolygonCalculator;
   }();
 
-  var GeoCalulator = function () {
+  var GeoCalulator =
+  /** @class */
+  function () {
     function GeoCalulator() {}
 
     GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
@@ -268,7 +308,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_EQUATORIAL_RADIUS_KM * c; // Distance in km
+
       return d;
     };
 
@@ -280,127 +321,470 @@
       return meter * this.LATITUDE_POSITION_VALUE_PER_METER;
     };
 
+    GeoCalulator.convertLatitudeToMeterValue = function (lat) {
+      return lat * this.METER_VALUE_PER_LATITUDE;
+    };
+
+    GeoCalulator.convertLongitudeToMeterValue = function (lat, lng) {
+      return lng * this.calculateLongitudeValueWithLatitudeInMeter(lat);
+    };
+
+    GeoCalulator.getCacheUnitOfLongitudeValueWithLatitudeInMeter = function (lat) {
+      return lat.toFixed(2);
+    };
+
+    GeoCalulator.getCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit) {
+      return this.CACHE_OF_LNG_PER_METER.get(latUnit);
+    };
+
+    GeoCalulator.setCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit, lngValue) {
+      if (this.CACHE_OF_LNG_PER_METER.size > 10) {
+        this.CACHE_OF_LNG_PER_METER.clear();
+      }
+
+      this.CACHE_OF_LNG_PER_METER.set(latUnit, lngValue);
+    };
+
+    GeoCalulator.calculateLongitudeValueWithLatitudeInMeter = function (lat) {
+      // const t = Date.now()
+      // Cache check
+      var latUnit = this.getCacheUnitOfLongitudeValueWithLatitudeInMeter(lat);
+      var fromCache = this.getCacheOfLongitudeValueWithLatitudeInMeter(latUnit);
+
+      if (fromCache !== undefined) {
+        // console.log(`cache hit!! ${Date.now() - t} ms`, fromCache, latUnit, this.CACHE_OF_LNG_PER_METER.size);
+        return fromCache;
+      } // Convert latitude and longitude to radians
+
+
+      var latRad = lat * Math.PI / 180; // Calculate Earth's radius at the given latitude
+
+      var radius = this.EARTH_EQUATORIAL_RADIUS * Math.sqrt(1 - Math.pow(this.EARTH_ECCENTRICITY * Math.sin(latRad), 2)); // Calculate the length of one degree of longitude in meters
+
+      var distance = 2 * Math.PI * radius * Math.cos(latRad) / 360; // Cache set
+
+      this.setCacheOfLongitudeValueWithLatitudeInMeter(latUnit, distance); // console.log(`calculated ${Date.now() - t} ms`)
+
+      return distance;
+    };
+
     GeoCalulator.computeNextPositionAndDistances = function (context) {
       var pos1 = context.pos1,
           pos2 = context.pos2,
           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_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
+
+    GeoCalulator.EARTH_EQUATORIAL_RADIUS_KM = GeoCalulator.EARTH_EQUATORIAL_RADIUS / 1000;
+    GeoCalulator.EARTH_ECCENTRICITY = 0.08181919;
+    GeoCalulator.METER_VALUE_PER_LATITUDE = 110.32 * 1000; //위도 기준 1도는 110.32km
+
+    GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / GeoCalulator.METER_VALUE_PER_LATITUDE;
+    GeoCalulator.CACHE_OF_LNG_PER_METER = new Map();
     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;
+    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];
+
+        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;
+    }
+
+    Offset.prototype.equals = function (other) {
+      return other && this.x === other.x && this.y === other.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 () {
@@ -415,6 +799,14 @@
     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) {
@@ -425,9 +817,15 @@
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
     };
+    /**
+     * 쓰로틀링 처리
+     * @returns
+     */
+
 
     MintMapController.prototype.checkBoundsChangeThrottleTime = function () {
-      if (!this.mapProps.boundsChangeThrottlingTime) return true;
+      if (!this.mapProps.boundsChangeThrottlingTime) return true; //boundsChangeThrottlingTime 이내의 연속 요청은 제외시킴
+
       var time = new Date().getTime();
 
       if (this.processedTime > 0 && time - this.processedTime < this.mapProps.boundsChangeThrottlingTime) {
@@ -465,7 +863,9 @@
     return MintMapController;
   }();
 
-  var MapZoomInfo = function () {
+  var MapZoomInfo =
+  /** @class */
+  function () {
     function MapZoomInfo() {}
 
     MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
@@ -662,16 +1062,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,36 +1087,104 @@
     });
   }
 
-  var NaverMintMapController = function (_super) {
-    tslib.__extends(NaverMintMapController, _super);
-
-    function NaverMintMapController(props) {
-      var _this = _super.call(this, props) || this;
-
-      _this.type = 'naver';
-      _this.map = null;
-      _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
-      _this.scriptModules = ['drawing'];
-      _this.polylineEvents = ['mouseover', 'mouseout'];
-      _this.polygonEvents = ['mouseover', 'mouseout'];
-      _this.markerEvents = ['click', 'mouseover', 'mouseout'];
-      _this.dragStartPoint = [0, 0];
-      _this.dragged = false;
-      return _this;
+  // export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
+  // export type MapUIEvent = 'click'|'dblclick'|''
+  var MapEvent =
+  /** @class */
+  function () {
+    function MapEvent() {
+      this.BOUNDS_CHANGED = 'bounds_changed';
+      this.CENTER_CHANGED = 'center_changed';
+      this.IDLE = 'idle';
+      this.ZOOM_CHANGED = 'zoom_changed';
+      this.ZOOMSTART = 'zoomstart';
+    }
+
+    MapEvent.prototype.get = function (eventName) {
+      var value = this[eventName];
+
+      if (typeof value === 'string') {
+        return value;
+      }
+    };
+
+    return MapEvent;
+  }();
+
+  var MapUIEvent =
+  /** @class */
+  function () {
+    function MapUIEvent() {
+      this.CLICK = 'click';
+      this.DBLCLICK = 'dblclick';
+      this.MOUSEDOWN = 'mousedown';
+      this.MOUSEUP = 'mouseup';
+      this.MOUSEOUT = 'mouseout';
+      this.MOUSEMOVE = 'mousemove';
+      this.MOUSEOVER = 'mouseover';
+      this.DRAG = 'drag';
+      this.DRAGSTART = 'dragstart';
+      this.DRAGEND = 'dragend';
+    }
+
+    MapUIEvent.prototype.get = function (eventName) {
+      var value = this[eventName];
+
+      if (typeof value === 'string') {
+        return value;
+      }
+    };
+
+    return MapUIEvent;
+  }();
+
+  var NaverMintMapController =
+  /** @class */
+  function (_super) {
+    tslib.__extends(NaverMintMapController, _super);
+
+    function NaverMintMapController(props) {
+      var _this = _super.call(this, props) || this;
+
+      _this.type = 'naver';
+      _this.map = null;
+      _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
+      _this.scriptModules = ['drawing']; //  , 'geocoder' , 'panorama' , 'visualization']
+
+      _this.mapEvent = new MapEvent();
+      _this.mapUIEvent = new MapUIEvent();
+      _this.polylineEvents = ['mouseover', 'mouseout'];
+      _this.polygonEvents = ['mouseover', 'mouseout'];
+      _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+      _this.dragStartPoint = [0, 0];
+      _this.dragged = false;
+      _this.eventMap = new Map();
+      Object.freeze(_this.mapEvent);
+      Object.freeze(_this.mapUIEvent);
+      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 +1202,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 +1216,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 +1233,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 +1250,8 @@
           strokeColor: options.lineColor,
           strokeWeight: options.lineSize,
           strokeOpacity: options.lineOpacity
-        });
+        }); //@ts-ignore
+
         options.editable !== undefined && polyline.native.setEditable(options.editable);
       }
     };
@@ -795,7 +1275,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 +1293,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 +1306,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 +1327,8 @@
           strokeOpacity: options.lineOpacity,
           fillColor: options.fillColor,
           fillOpacity: options.fillOpacity
-        });
+        }); //@ts-ignore
+
         options.editable !== undefined && polygon.native.setEditable(options.editable);
       }
     };
@@ -858,7 +1343,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 +1371,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 +1395,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 +1489,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 +1497,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 +1520,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 +1548,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -1045,8 +1564,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 +1579,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 +1635,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*/
+                    ];
                 }
               });
             });
@@ -1163,11 +1710,13 @@
       var _a;
 
       try {
+        this.removeAllEventListener();
         this.map && this.map.destroy();
         (_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 () {
@@ -1209,10 +1758,104 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
     };
 
+    NaverMintMapController.prototype.addEventListener = function (eventName, callback) {
+      var _this = this;
+
+      var naverEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+      if (!naverEventName) {
+        console.warn("MapEventName ".concat(eventName, " is not supported"));
+        return;
+      } // console.log(`${eventName} add`);
+
+
+      var map = this.eventMap.get(eventName);
+
+      if (!map) {
+        map = new Map();
+        this.eventMap.set(eventName, map);
+      }
+
+      var wrappingCallback = function (e) {
+        if (eventName in _this.mapEvent) {
+          var bounds = _this.getCurrBounds();
+
+          var param = {
+            name: eventName,
+            mapType: 'naver',
+            vendorEventName: naverEventName,
+            param: {
+              bounds: bounds,
+              center: bounds.getCenter(),
+              zoomLevel: _this.getZoomLevel()
+            }
+          };
+          callback(param);
+        } else if (eventName in _this.mapUIEvent) {
+          var position = new Position(e.coord.y, e.coord.x);
+          position.offset = new Offset(e.offset.x, e.offset.y);
+          var param = {
+            name: eventName,
+            mapType: 'naver',
+            vendorEventName: naverEventName,
+            param: {
+              position: position,
+              offset: position.offset
+            }
+          };
+          callback(param);
+        }
+      };
+
+      var naverEventListener = naver.maps.Event.addListener(this.map, naverEventName, wrappingCallback);
+      map.set(callback, naverEventListener);
+    };
+
+    NaverMintMapController.prototype.removeEventListener = function (eventName, callback) {
+      var map = this.eventMap.get(eventName);
+
+      if (map) {
+        var naverEventListener = map.get(callback);
+
+        if (naverEventListener) {
+          // console.log(`${naverEventListener.eventName} remove`);
+          naver.maps.Event.removeListener(naverEventListener);
+          map.delete(callback);
+        }
+      }
+    };
+
+    NaverMintMapController.prototype.removeAllEventListener = function (eventName) {
+      var _this = this;
+
+      if (eventName) {
+        this.clearEventListener(eventName);
+      } else {
+        this.eventMap.forEach(function (_map, eventName) {
+          _this.clearEventListener(eventName);
+        });
+        this.eventMap.clear();
+      }
+    };
+
+    NaverMintMapController.prototype.clearEventListener = function (eventName) {
+      var map = this.eventMap.get(eventName);
+
+      if (map) {
+        map.forEach(function (naverEventListener) {
+          // console.log(`${naverEventListener.eventName} remove`);
+          naver.maps.Event.removeListener(naverEventListener);
+        });
+        this.eventMap.delete(eventName);
+      }
+    };
+
     return NaverMintMapController;
   }(MintMapController);
 
-  var GoogleMintMapController = function (_super) {
+  var GoogleMintMapController =
+  /** @class */
+  function (_super) {
     tslib.__extends(GoogleMintMapController, _super);
 
     function GoogleMintMapController(props) {
@@ -1221,21 +1864,34 @@
       _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.mapEvent = new MapEvent();
+      _this.mapUIEvent = new MapUIEvent();
       _this.polylineEvents = ['mouseover', 'mouseout'];
       _this.polygonEvents = ['mouseover', 'mouseout'];
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragged = false;
+      _this.lastMousePosition = null;
 
       _this.destroyMap = function () {
         try {
+          _this.removeAllEventListener();
+
           _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;
+      _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+      //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
+
+      _this.mapEvent.ZOOMSTART = 'zoom_changed';
+      Object.freeze(_this.mapEvent);
+      Object.freeze(_this.mapUIEvent);
+      return _this; // console.log(`${this.type} controller loadded`);
     }
 
     GoogleMintMapController.prototype.createPolyline = function (polyline) {
@@ -1253,12 +1909,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 +1925,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 +1937,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 +1972,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 +1991,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 +2003,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 +2021,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 +2044,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 +2075,7 @@
     };
 
     GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+      //console.log('controller updateMarker', options);
       var _a, _b;
 
       if (marker && marker.native) {
@@ -1422,7 +2086,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 +2183,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 +2191,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 +2215,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 +2244,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -1583,8 +2260,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 +2275,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,30 +2311,53 @@
                       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);
 
                       _this.mapProps.onClick(pos);
+                    }); //@ts-ignore
+
+                    map.addListener('mousedown', function (e) {
+                      // console.log('map click', e)
+                      var pos = new Position(e.latLng.lat(), e.latLng.lng());
+                      pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                      _this.lastMousePosition = pos;
+                    }); //@ts-ignore
+
+                    map.addListener('mouseup', function (e) {
+                      // console.log('map click', e)
+                      var pos = new Position(e.latLng.lat(), e.latLng.lng());
+                      pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                      _this.lastMousePosition = pos;
                     });
                     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 +2380,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))
       }
     };
 
@@ -1700,10 +2412,120 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
     };
 
+    GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
+      var _this = this;
+
+      if (!this.map) {
+        return;
+      }
+
+      var googleEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+      if (!googleEventName) {
+        console.warn("MapEventName ".concat(eventName, " is not supported"));
+        return;
+      } // console.log(`${eventName} add`);
+
+
+      var map = this.eventMap.get(eventName);
+
+      if (!map) {
+        map = new Map();
+        this.eventMap.set(eventName, map);
+      }
+
+      var wrappingCallback = function (e) {
+        if (eventName in _this.mapEvent) {
+          var bounds = _this.getCurrBounds();
+
+          var param = {
+            name: eventName,
+            mapType: 'google',
+            vendorEventName: googleEventName,
+            param: {
+              bounds: bounds,
+              center: bounds.getCenter(),
+              zoomLevel: _this.getZoomLevel()
+            }
+          };
+          callback(param);
+        } else if (eventName in _this.mapUIEvent) {
+          if (eventName.startsWith('DRAG')) console.log(eventName, e);
+          var position = null;
+
+          if (e) {
+            position = new Position(e.latLng.lat(), e.latLng.lng());
+            position.offset = new Offset(e.pixel.x, e.pixel.y);
+          } else {
+            position = _this.lastMousePosition;
+          }
+
+          var param = {
+            name: eventName,
+            mapType: 'google',
+            vendorEventName: googleEventName,
+            param: {
+              position: position,
+              offset: position === null || position === void 0 ? void 0 : position.offset
+            }
+          };
+          callback(param);
+        }
+      };
+
+      var googleEventListener = this.map.addListener(googleEventName, wrappingCallback);
+      map.set(callback, googleEventListener);
+    };
+
+    GoogleMintMapController.prototype.removeEventListener = function (eventName, callback) {
+      var map = this.eventMap.get(eventName);
+
+      if (map) {
+        var listenerMap = this.eventMap.get(eventName);
+
+        if (listenerMap) {
+          var googleEventListener = listenerMap.get(callback);
+
+          if (googleEventListener) {
+            // console.log(`${eventName} remove`);
+            google.maps.event.removeListener(googleEventListener);
+            listenerMap.delete(callback);
+          }
+        }
+      }
+    };
+
+    GoogleMintMapController.prototype.removeAllEventListener = function (eventName) {
+      var _this = this;
+
+      if (eventName) {
+        this.clearEventListener(eventName);
+      } else {
+        this.eventMap.forEach(function (_map, eventName) {
+          _this.clearEventListener(eventName);
+        });
+        this.eventMap.clear();
+      }
+    };
+
+    GoogleMintMapController.prototype.clearEventListener = function (eventName) {
+      var map = this.eventMap.get(eventName);
+
+      if (map) {
+        map.forEach(function (googleEventListener) {
+          // console.log(`${eventName} remove`);
+          google.maps.event.removeListener(googleEventListener);
+        });
+        this.eventMap.delete(eventName);
+      }
+    };
+
     return GoogleMintMapController;
   }(MintMapController);
 
-  var KakaoMintMapController = function (_super) {
+  var KakaoMintMapController =
+  /** @class */
+  function (_super) {
     tslib.__extends(KakaoMintMapController, _super);
 
     function KakaoMintMapController(props) {
@@ -1712,27 +2534,44 @@
       _this.type = 'kakao';
       _this.map = null;
       _this.scriptUrl = 'https://dapi.kakao.com/v2/maps/sdk.js';
-      _this.scriptModules = ['services', 'clusterer'];
+      _this.scriptModules = ['services', 'clusterer']; //  , 'geocoder' , 'panorama' , 'visualization']
+
+      _this.mapEvent = new MapEvent();
+      _this.mapUIEvent = new MapUIEvent();
       _this.polylineEvents = ['mouseover', 'mouseout'];
       _this.polygonEvents = ['mouseover', 'mouseout'];
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragStartPoint = [0, 0];
       _this.dragged = false;
-      return _this;
+      _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+
+      _this.mapEvent.ZOOMSTART = 'zoom_start';
+      Object.freeze(_this.mapEvent);
+      Object.freeze(_this.mapUIEvent);
+      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 +2587,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 +2599,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 +2614,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 +2629,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 +2655,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 +2674,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 +2690,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 +2703,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 +2730,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 +2746,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 +2759,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 +2773,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 +2792,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 +2872,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 +2880,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 +2896,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 +2919,9 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    return [2];
+                    return [2
+                    /*return*/
+                    ];
                 }
               });
             });
@@ -2059,7 +2936,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 +2949,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 +2964,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 +2987,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 +3048,14 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      */
       var mapValue = this.getBaseToMapZoom(value);
 
       if (mapValue > 14) {
@@ -2165,7 +3074,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,191 +3114,138 @@
     };
 
     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);
+    KakaoMintMapController.prototype.addEventListener = function (eventName, callback) {
+      var _this = this;
 
-  var Position = function () {
-    function Position(lat, lng) {
-      this.lat = 0;
-      this.lng = 0;
-      this.lat = lat;
-      this.lng = lng;
-    }
+      var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
 
-    Position.equals = function (pos1, pos2) {
-      return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+      if (!kakaoEventName) {
+        console.warn("MapEventName ".concat(eventName, " is not supported"));
+        return;
+      } // console.log(`${eventName} add`);
+
+
+      var map = this.eventMap.get(eventName);
+
+      if (!map) {
+        map = new Map();
+        this.eventMap.set(eventName, map);
+      }
+
+      var wrappingCallback = function (e) {
+        if (eventName in _this.mapEvent) {
+          var bounds = _this.getCurrBounds();
+
+          var param = {
+            name: eventName,
+            mapType: 'kakao',
+            vendorEventName: kakaoEventName,
+            param: {
+              bounds: bounds,
+              center: bounds.getCenter(),
+              zoomLevel: _this.getZoomLevel()
+            }
+          };
+          callback(param);
+        } else if (eventName in _this.mapUIEvent) {
+          var position = new Position(e.latLng.getLat(), e.latLng.getLng());
+          position.offset = new Offset(e.point.x, e.point.y);
+          var param = {
+            name: eventName,
+            mapType: 'kakao',
+            vendorEventName: kakaoEventName,
+            param: {
+              position: position,
+              offset: position.offset
+            }
+          };
+          callback(param);
+        }
+      };
+
+      kakao.maps.event.addListener(this.map, kakaoEventName, wrappingCallback);
+      map.set(callback, wrappingCallback);
     };
 
-    return Position;
-  }();
+    KakaoMintMapController.prototype.removeEventListener = function (eventName, callback) {
+      var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
 
-  var Bounds = function () {
-    function Bounds(nw, se, ne, sw) {
-      if (!(nw && se || ne && sw)) {
-        throw new Error('nw/se or ne/sw needed');
+      if (!kakaoEventName) {
+        console.warn("MapEventName ".concat(eventName, " is not supported"));
+        return;
       }
 
-      this.nw = nw;
-      this.se = se;
-      this.ne = ne;
-      this.sw = sw;
+      var map = this.eventMap.get(eventName);
 
-      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);
-    };
+      if (map) {
+        var wrappingCallback = map.get(callback);
 
-    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);
+        if (wrappingCallback) {
+          // console.log(`${naverEventListener.eventName} remove`);
+          kakao.maps.event.removeListener(this.map, kakaoEventName, wrappingCallback);
+          map.delete(callback);
         }
       }
-
-      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];
+    KakaoMintMapController.prototype.removeAllEventListener = function (eventName) {
+      var _this = this;
 
-        if (this.includesPosition(pos)) {
-          return true;
-        }
+      if (eventName) {
+        this.clearEventListener(eventName);
+      } else {
+        this.eventMap.forEach(function (_map, eventName) {
+          _this.clearEventListener(eventName);
+        });
+        this.eventMap.clear();
       }
-
-      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);
+    KakaoMintMapController.prototype.clearEventListener = function (eventName) {
+      var _this = this;
 
-  var Polygon = function (_super) {
-    tslib.__extends(Polygon, _super);
+      var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
 
-    function Polygon(options) {
-      var _this = _super.call(this) || this;
+      if (!kakaoEventName) {
+        console.warn("MapEventName ".concat(eventName, " is not supported"));
+        return;
+      }
 
-      _this.options = options;
-      return _this;
-    }
+      var map = this.eventMap.get(eventName);
 
-    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]);
+      if (map) {
+        map.forEach(function (wrappingCallback) {
+          // console.log(`${naverEventListener.eventName} remove`);
+          kakao.maps.event.removeListener(_this.map, kakaoEventName, wrappingCallback);
         });
-        return PolygonCalculator.getCenter(paths);
+        this.eventMap.delete(eventName);
       }
-
-      throw new Error('center 를 찾을 수 없습니다.');
     };
 
-    return Polygon;
-  }(Drawable);
-  var cn$1 = classNames__default["default"].bind(styles$2);
+    return KakaoMintMapController;
+  }(MintMapController);
+
+  var cn$2 = classNames__default["default"].bind(styles$2); //지도 기본 센터
+
   var DEFAULT_CENTER = {
     lat: 37.5036845,
     lng: 127.0448698
   };
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MintMapProps} MintMapProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
   function MintMap(_a) {
     var mapLoadingComponent = _a.mapLoadingComponent,
         _b = _a.dissolveEffectWhenLoaded,
@@ -2430,7 +3287,21 @@
 
         if (newController_1) {
           newController_1.loadMapApi().then(function () {
-            setController(newController_1);
+            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));
@@ -2442,7 +3313,7 @@
     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'),
+      className: cn$2('ani-fade-out'),
       style: {
         position: 'absolute',
         top: '0px',
@@ -2475,256 +3346,250 @@
       }
     }), 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];
+  var MintMapCanvasRenderer =
+  /** @class */
+  function () {
+    function MintMapCanvasRenderer(context) {
+      this.context = context;
+    }
 
-    React.useEffect(function () {
-      var pointStringIndex = 0;
-      var interval = setInterval(function () {
-        pointStringIndex += 1;
+    return MintMapCanvasRenderer;
+  }();
 
-        if (pointStringIndex >= pointCount) {
-          pointStringIndex = 0;
-        }
+  function SVGCircle(_a) {
+    var _b = _a.radius,
+        radius = _b === void 0 ? 100 : _b,
+        _c = _a.background,
+        background = _c === void 0 ? 'lightgreen' : _c,
+        children = _a.children,
+        _d = _a.svgProperties,
+        svgProperties = _d === void 0 ? {} : _d,
+        _e = _a.shapeProperties,
+        shapeProperties = _e === void 0 ? {} : _e;
 
-        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", {
+    var _f = React.useState(radius * 2),
+        boxSize = _f[0],
+        setBoxSize = _f[1];
+
+    React.useEffect(function () {
+      // console.log('SVGCircle radius', radius);
+      setBoxSize(radius * 2);
+    }, [radius]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: boxSize,
+      height: boxSize,
+      viewBox: "0 0 100 100"
+    }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
+      pointerEvents: "visiblepainted",
+      cx: '50',
+      cy: '50',
+      r: '50',
+      fill: background
+    }, shapeProperties))), React__default["default"].createElement("div", {
       style: {
-        width: '300px',
-        fontSize: '16px',
-        fontWeight: 600,
-        color: 'gray',
-        transform: 'translateX(130px)'
+        pointerEvents: 'none',
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        width: "".concat(boxSize, "px"),
+        height: "".concat(boxSize, "px")
       }
-    }, "".concat(text, " ").concat(pointString)));
+    }, children));
   }
-  function MapLoadingWithImage(_a) {
-    var _b = _a.size,
-        size = _b === void 0 ? 256 : _b;
 
-    var _c = React.useState(),
-        width = _c[0],
-        setWidth = _c[1];
+  function SVGPolygon(_a) {
+    var path = _a.path,
+        _b = _a.innerPath,
+        innerPath = _b === void 0 ? [] : _b,
+        _c = _a.background,
+        background = _c === void 0 ? 'lightblue' : _c,
+        _d = _a.svgProperties,
+        svgProperties = _d === void 0 ? {} : _d,
+        _e = _a.shapeProperties,
+        shapeProperties = _e === void 0 ? {} : _e,
+        _f = _a.mode,
+        mode = _f === void 0 ? 'POLYGON' : _f,
+        children = _a.children;
+    var getPolygonInfo = React.useCallback(function (path) {
+      var maxX, minX, maxY, minY;
 
-    var _d = React.useState(),
-        height = _d[0],
-        setHeight = _d[1];
+      for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
+        var offset = path_1[_i];
 
-    var render = React.useMemo(function () {
-      if (!height || !width) {
-        return;
+        if (maxX === undefined || offset.x > maxX) {
+          maxX = offset.x;
+        }
+
+        if (minX === undefined || offset.x < minX) {
+          minX = offset.x;
+        }
+
+        if (maxY === undefined || offset.y > maxY) {
+          maxY = offset.y;
+        }
+
+        if (minY === undefined || offset.y < minY) {
+          minY = offset.y;
+        }
       }
 
-      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'
+      if (!maxX || !minX || !maxY || !minY) {
+        return {
+          containerLeft: 0,
+          containerTop: 0,
+          containerWidth: 0,
+          containerHeight: 0
+        };
+      }
+
+      var width = maxX - minX;
+      var height = maxY - minY;
+      return {
+        containerLeft: Math.floor(minX),
+        containerTop: Math.floor(minY),
+        containerWidth: Math.floor(width),
+        containerHeight: Math.floor(height)
+      };
+    }, []);
+    var getD = React.useCallback(function (_a) {
+      var path = _a.path,
+          containerLeft = _a.containerLeft,
+          containerTop = _a.containerTop,
+          mode = _a.mode;
+      var left = containerLeft;
+      var top = containerTop;
+      var isPolygon = mode === 'POLYGON';
+      var out = ''; //path
+
+      out += getLine(path, left, top, isPolygon); //inner path
+
+      for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
+        var inner = innerPath_1[_i];
+        out += ' ' + getLine(inner, left, top, isPolygon);
+      }
+
+      return out;
+    }, []);
+    var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
+      return path.map(function (offset, idx) {
+        if (idx === 0) {
+          return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        } else if (idx === 1) {
+          return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        } else {
+          if (offset.equals(path[idx - 1])) {
+            return '';
+          } else {
+            return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
           }
-        }, 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);
-      },
+        }
+      }).join(' ') + " ".concat(closePath ? 'Z' : '');
+    }, []);
+
+    var _g = React.useState(0),
+        width = _g[0],
+        setWidth = _g[1];
+
+    var _h = React.useState(0),
+        height = _h[0],
+        setHeight = _h[1];
+
+    var _j = React.useState('M0 0'),
+        d = _j[0],
+        setD = _j[1];
+
+    React.useEffect(function () {
+      var info = getPolygonInfo(path);
+      setWidth(info.containerWidth);
+      setHeight(info.containerHeight);
+      setD(getD(tslib.__assign(tslib.__assign({}, info), {
+        path: path,
+        innerPath: innerPath,
+        mode: mode
+      })));
+    }, [path, innerPath]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: width,
+      height: height,
+      viewBox: "0 0 ".concat(width, " ").concat(height)
+    }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
+      fillRule: "evenodd",
+      pointerEvents: "visiblepainted",
+      x: "0",
+      y: "0",
+      width: width,
+      height: height,
+      fill: mode === 'POLYLINE' ? 'none' : background,
+      stroke: mode === 'POLYLINE' ? 'black' : 'green',
+      strokeLinejoin: "round",
+      strokeLinecap: "butt",
+      d: d
+    }, shapeProperties))), React__default["default"].createElement("div", {
       style: {
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden'
+        pointerEvents: 'none',
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px")
       }
-    }, render);
+    }, children));
   }
 
-  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)"
-    }))));
-  }
+  function SVGRect(_a) {
+    var _b = _a.width,
+        width = _b === void 0 ? 100 : _b,
+        _c = _a.height,
+        height = _c === void 0 ? 100 : _c,
+        _d = _a.background,
+        background = _d === void 0 ? 'lightblue' : _d,
+        _e = _a.svgProperties,
+        svgProperties = _e === void 0 ? {} : _e,
+        _f = _a.shapeProperties,
+        shapeProperties = _f === void 0 ? {} : _f,
+        children = _a.children;
+    var getViewHeight = React.useCallback(function (width, height) {
+      return Number((100 * height / width).toFixed(0));
+    }, []);
+    var viewWidth = React.useRef(100);
 
-  var MintMapCanvasRenderer = function () {
-    function MintMapCanvasRenderer(context) {
-      this.context = context;
-    }
+    var _g = React.useState(getViewHeight(width, height)),
+        viewHeight = _g[0],
+        setViewHeight = _g[1];
 
-    return MintMapCanvasRenderer;
-  }();
+    React.useEffect(function () {
+      setViewHeight(getViewHeight(width, height));
+    }, [width, height]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: width,
+      height: height,
+      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+    }, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
+      pointerEvents: "visiblepainted",
+      x: "0",
+      y: "0",
+      width: viewWidth.current,
+      height: viewHeight,
+      fill: background
+    }, shapeProperties))), React__default["default"].createElement("div", {
+      style: {
+        pointerEvents: 'none',
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px")
+      }
+    }, children));
+  }
 
-  var AnimationPlayer = function () {
+  var AnimationPlayer =
+  /** @class */
+  function () {
     function AnimationPlayer(drawFunction, fps) {
       this.prevtime = 0;
       this.elapsedTime = 0;
@@ -2759,21 +3624,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,12 +3653,93 @@
       }
 
       if (this.playing) {
+        //@ts-ignore
         window.requestAnimationFrame(this.makeFrame.bind(this));
       }
     };
 
-    return AnimationPlayer;
-  }();
+    return AnimationPlayer;
+  }();
+
+  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);
 
   function nextIndex(array, currIdx) {
     var next = currIdx + 1;
@@ -2815,13 +3767,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 +3794,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 +3814,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) {
@@ -2871,13 +3832,13 @@
             }
           }
 
-          nextOption_1.position = context_1.nextPos;
+          nextOption_1.position = new Position(context_1.nextPos.lat, context_1.nextPos.lng);
           marker.options.position = nextOption_1.position;
           controller.updateMarker(marker, nextOption_1);
 
           if (stopNext_1) {
             onMovingEnd && onMovingEnd();
-            return true;
+            return true; //종료
           }
 
           return false;
@@ -2925,12 +3886,21 @@
   }
 
   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,
@@ -2940,20 +3910,27 @@
         _c = _a.topOnHover,
         topOnHover = _c === void 0 ? false : _c,
         movingAnimation = _a.movingAnimation,
+        _d = _a.disablePointerEvent,
+        disablePointerEvent = _d === void 0 ? false : _d,
         children = _a.children,
-        options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+        options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "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 _d = React.useState({}),
-        movingState = _d[0],
-        setMovingState = _d[1];
+    var markerRef = React.useRef(); //moving animation
+
+    var _e = React.useState({}),
+        movingState = _e[0],
+        setMovingState = _e[1];
 
     React.useEffect(function () {
+      // console.log('movingState', movingState);
       if (movingState.autoStart) {
         setTimeout(function () {
           start();
@@ -2961,18 +3938,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);
@@ -2988,127 +3967,592 @@
       }
     };
 
-    var onMouseOverHandler = function (e) {
-      var _a;
+    var onMouseOverHandler = function (e) {
+      var _a;
+
+      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');
+        var next = true;
+
+        if (mouseOverHandler) {
+          var hasNext = mouseOverHandler(e);
+          hasNext !== undefined && (next = hasNext);
+        }
+
+        next && topOnHover && controller.markerToTheTop(marker);
+      }
+    }; //create object
+
+
+    React.useEffect(function () {
+      // console.log('drawable created')
+      divElement.style.display = 'flex';
+      divElement.style.justifyContent = 'flex-start';
+      divElement.style.alignItems = 'flex-start';
+      divElement.style.flexDirection = 'column';
+      divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+      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); // console.log('drawable cleared')
+            }
+
+            divCloneRef.current = undefined;
+          };
+
+          divCloneRef.current.addEventListener('animationend', aniListener_1);
+          divElement.append(divCloneRef.current);
+        } else {
+          divElement.removeEventListener('click', onClickHandler);
+          divElement.removeEventListener('mouseover', onMouseOverHandler);
+
+          if (markerRef.current) {
+            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
+          }
+        }
+      };
+    }, []); //create / update object
+
+    React.useEffect(function () {
+      if (options) {
+        if (markerRef.current) {
+          //console.log('update Marker')
+          controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리
+
+          if (divElement.parentElement) {
+            divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+            divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          } //marker offset 보정
+
+
+          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); //disablePointerEvent 처리
+
+          if (divElement.parentElement) {
+            divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+            divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          } //marker offset 보정
+
+
+          offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          } //moving 애니메이션 시작
+
+
+          if (movingAnimation) {
+            setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
+              marker: markerRef.current
+            }));
+          } //start animation
+
+
+          if (startAnimationClassName) {
+            divElement.style.visibility = 'hidden';
+            setTimeout(function () {
+              var _a, _b;
+
+              divCloneRef.current = divElement.firstElementChild;
+              divElement.style.visibility = 'visible';
+              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+
+              var aniListener = function () {
+                var _a, _b;
+
+                (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
+                (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
+              };
+
+              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
+            });
+          } else {
+            setTimeout(function () {
+              divCloneRef.current = divElement.firstElementChild;
+            });
+          }
+        }
+      }
+    }, [options]);
+    return reactDom.createPortal(children, divElement);
+  }
+
+  var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
+    var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
+
+
+    var rowCount = Number((mapWidth / 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)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
+    var boundsPos = [];
+    var tempX1, tempY1, tempX2, tempY2;
+
+    for (var i = 0; i < rowCount; i++) {
+      tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
+      tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
+      var rows = [];
+      boundsPos.push(rows);
+
+      for (var k = 0; k < colCount; k++) {
+        tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
+        tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
+        var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
+        var includedList = thisBounds.getIncludedPositions(itemList);
+        rows.push({
+          bounds: thisBounds,
+          checked: false,
+          center: false,
+          centerPosition: thisBounds.getCenter(),
+          incList: [],
+          itemList: includedList,
+          size: basePixelSize
+        });
+      }
+    } //좌표마다 검사해서 인접셀 병합 처리
+
+
+    var centerList = [];
+    var totalItemCount = 0;
+    var min;
+    var max;
+
+    for (var i = 0; i < boundsPos.length; i++) {
+      for (var k = 0; k < boundsPos[i].length; k++) {
+        var curr = boundsPos[i][k];
+        if (curr.checked) continue;
+        curr.checked = true; //현재기준 8방향 객체 모으기
+
+        var incList = [];
+
+        if (boundsPos[i]) {
+          boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
+          boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
+        }
+
+        if (boundsPos[i - 1]) {
+          boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
+          boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
+          boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
+        }
+
+        if (boundsPos[i + 1]) {
+          boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
+          boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
+          boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
+        }
+
+        for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
+          var inc = incList_1[_i];
+          if (inc.checked) continue;
+          inc.checked = true;
+
+          if (inc.itemList && inc.itemList.length > 0) {
+            curr.incList.push(inc);
+
+            (_a = curr.itemList).push.apply(_a, inc.itemList);
+
+            curr.center = true;
+          }
+        }
+
+        if (curr.center) {
+          centerList.push(curr);
+          var avrLat = calculateAverage(curr.itemList.map(function (item) {
+            return item.lat;
+          }));
+          var avrLng = calculateAverage(curr.itemList.map(function (item) {
+            return item.lng;
+          }));
+          curr.centerPosition = new Position(avrLat, avrLng);
+          totalItemCount += curr.itemList.length;
+
+          if (!min || curr.itemList.length < min) {
+            min = curr.itemList.length;
+          }
+
+          if (!max || curr.itemList.length > max) {
+            max = curr.itemList.length;
+          }
+        }
+      }
+    }
+
+    var status = {
+      total: totalItemCount,
+      average: totalItemCount / centerList.length,
+      min: min,
+      max: max
+    };
+
+    sizeFunction = sizeFunction || function (info, status) {
+      var minSize = basePixelSize / 4;
+      var maxSize = basePixelSize;
+      return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
+    };
+
+    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;
+  };
+
+  var calculateAverage = function (nums) {
+    var sum = 0;
+
+    for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
+      var num = nums_1[_i];
+      sum += num;
+    }
+
+    return Number((sum / nums.length).toFixed(7));
+  };
+
+  /**
+   * CircleMarker
+   *
+   * @param {CircleMarkerProps} CircleMarkerProps
+   *
+   * @returns {JSX.Element} JSX
+   */
+
+  function CircleMarker(_a) {
+    var children = _a.children,
+        center = _a.center,
+        radius = _a.radius,
+        _b = _a.radiusUnit,
+        radiusUnit = _b === void 0 ? 'PIXEL' : _b,
+        _c = _a.background,
+        background = _c === void 0 ? 'lightgreen' : _c,
+        _d = _a.svgProperties,
+        svgProperties = _d === void 0 ? {} : _d,
+        _e = _a.shapeProperties,
+        shapeProperties = _e === void 0 ? {} : _e,
+        _f = _a.visible,
+        visible = _f === void 0 ? true : _f,
+        zIndex = _a.zIndex; //controller
+
+    var controller = useMintMapController(); //zoom start event
+
+    var onZoomStart = React.useCallback(function () {
+      setMapVisible(false);
+    }, []); //idle event
+
+    var onIdle = React.useCallback(function () {
+      var newZoomLevel = controller.getZoomLevel();
+
+      if (zoomLevel.current !== newZoomLevel) {
+        zoomLevel.current = newZoomLevel;
+        renderCircleBase();
+        setTimeout(function () {
+          setMapVisible(true);
+        });
+      }
+    }, []);
+    var zoomLevel = React.useRef(controller.getZoomLevel());
+    React.useEffect(function () {
+      controller.addEventListener("ZOOMSTART", onZoomStart);
+      controller.addEventListener("IDLE", onIdle);
+      return function () {
+        controller.removeEventListener("ZOOMSTART", onZoomStart);
+        controller.removeEventListener("IDLE", onIdle);
+      };
+    }, []); //offsets
+
+    var _g = React.useState(),
+        computedRadius = _g[0],
+        setComputedRadius = _g[1];
 
-      var marker = markerRef.current;
+    var _h = React.useState(new Offset(0, 0)),
+        anchor = _h[0],
+        setAnchor = _h[1]; //circle props ref
 
-      if (marker) {
-        var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
-        var next = true;
 
-        if (mouseOverHandler) {
-          var hasNext = mouseOverHandler(e);
-          hasNext !== undefined && (next = hasNext);
-        }
+    var circlePropsRef = React.useRef({
+      center: center,
+      radius: radius,
+      radiusUnit: radiusUnit
+    }); //circle 생성 effect
 
-        next && topOnHover && controller.markerToTheTop(marker);
+    React.useEffect(function () {
+      circlePropsRef.current = {
+        center: center,
+        radius: radius,
+        radiusUnit: radiusUnit
+      };
+      renderCircleBase();
+    }, [center, radius, radiusUnit]); //render
+
+    var _j = React.useState(true),
+        mapVisible = _j[0],
+        setMapVisible = _j[1];
+
+    var renderCircleBase = React.useCallback(function () {
+      var _a = circlePropsRef.current,
+          center = _a.center,
+          radius = _a.radius,
+          radiusUnit = _a.radiusUnit;
+
+      if (radiusUnit === 'METER') {
+        var latMargin = GeoCalulator.convertMeterToLatitudeValue(radius);
+        var targetPos = new Position(center.lat + latMargin, center.lng);
+        var tempComputedRadius = calcRadius(center, targetPos);
+        setComputedRadius(tempComputedRadius);
+        setAnchor(new Offset(tempComputedRadius, tempComputedRadius)); // console.log(`${radius} meter => `, tempComputedRadius);
+      } else {
+        setComputedRadius(radius);
+        setAnchor(new Offset(radius, radius)); // console.log(`${radius} pixel => `, radius);
       }
-    };
+    }, []);
+    var calcRadius = React.useCallback(function (center, targetPos) {
+      var c = controller.positionToOffset(center);
+      var t = controller.positionToOffset(targetPos);
+      return Math.round(Math.sqrt(Math.pow(Math.abs(c.x - t.x), 2) + Math.pow(Math.abs(c.y - t.y), 2)));
+    }, []);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, computedRadius && React__default["default"].createElement(MapMarkerWrapper, {
+      position: center,
+      anchor: anchor,
+      visible: visible,
+      disablePointerEvent: true,
+      zIndex: zIndex
+    }, mapVisible && React__default["default"].createElement(SVGCircle, {
+      radius: computedRadius,
+      background: background,
+      shapeProperties: tslib.__assign({
+        pointerEvents: 'none'
+      }, shapeProperties),
+      svgProperties: svgProperties
+    }, children)));
+  }
+
+  /**
+   *PolygonMarker
+   *
+   * @param {PolygonMarkerProps} PolygonMarkerProps
+   *
+   * @returns {JSX.Element} JSX
+   */
 
+  function PolygonMarker(_a) {
+    var children = _a.children,
+        position = _a.position,
+        _b = _a.background,
+        background = _b === void 0 ? 'lightgreen' : _b,
+        innerPositions = _a.innerPositions,
+        _c = _a.simplifyPath,
+        simplifyPath = _c === void 0 ? true : _c,
+        simplifyTolerance = _a.simplifyTolerance,
+        _d = _a.lastReapeated,
+        lastReapeated = _d === void 0 ? false : _d,
+        _e = _a.svgProperties,
+        svgProperties = _e === void 0 ? {} : _e,
+        _f = _a.shapeProperties,
+        shapeProperties = _f === void 0 ? {} : _f,
+        _g = _a.visible,
+        visible = _g === void 0 ? true : _g,
+        zIndex = _a.zIndex,
+        _h = _a.mode,
+        mode = _h === void 0 ? 'POLYGON' : _h; //controller
+
+    var controller = useMintMapController(); //zoom start event
+
+    var onZoomStart = React.useCallback(function () {
+      setMapVisible(false);
+    }, []); //idle event
+
+    var onIdle = React.useCallback(function () {
+      var newZoomLevel = controller.getZoomLevel();
+
+      if (zoomLevel.current !== newZoomLevel) {
+        zoomLevel.current = newZoomLevel;
+        renderPolygonBase();
+        setTimeout(function () {
+          setMapVisible(true);
+        });
+      }
+    }, []);
+    var zoomLevel = React.useRef(controller.getZoomLevel());
     React.useEffect(function () {
-      divElement.addEventListener('click', onClickHandler);
-      divElement.addEventListener('mouseover', onMouseOverHandler);
+      controller.addEventListener("ZOOMSTART", onZoomStart);
+      controller.addEventListener("IDLE", onIdle);
       return function () {
-        if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
-          divCloneRef.current.classList.add(endAnimationClassName);
+        controller.removeEventListener("ZOOMSTART", onZoomStart);
+        controller.removeEventListener("IDLE", onIdle);
+      };
+    }, []); //center
 
-          var aniListener_1 = function () {
-            divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
+    var _j = React.useState(),
+        polygonStart = _j[0],
+        setPolygonStart = _j[1]; //offsets
 
-            if (markerRef.current) {
-              controller.clearDrawable(markerRef.current);
-            }
 
-            divCloneRef.current = undefined;
-          };
+    var _k = React.useState([]),
+        offsets = _k[0],
+        setOffsets = _k[1]; //inner offsets
 
-          divCloneRef.current.addEventListener('animationend', aniListener_1);
-          divElement.append(divCloneRef.current);
-        } else {
-          divElement.removeEventListener('click', onClickHandler);
-          divElement.removeEventListener('mouseover', onMouseOverHandler);
 
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current);
-          }
-        }
-      };
-    }, []);
-    React.useEffect(function () {
-      if (options) {
-        if (markerRef.current) {
-          controller.updateMarker(markerRef.current, options);
-          offsetCalibration(controller.getMapType(), divElement, options);
+    var _l = React.useState([]),
+        innerOffsets = _l[0],
+        setInnerOffsets = _l[1]; //offset cache
 
-          if (markerRef.current.options.zIndex !== undefined) {
-            controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
-          }
-        } else {
-          markerRef.current = new Marker(options);
-          markerRef.current.element = divElement;
-          controller.createMarker(markerRef.current);
-          offsetCalibration(controller.getMapType(), divElement, options);
 
-          if (markerRef.current.options.zIndex !== undefined) {
-            controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
-          }
+    var offsetCache = React.useRef(new Map()); //polygon props ref
 
-          if (movingAnimation) {
-            setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
-              marker: markerRef.current
-            }));
-          }
+    var polygonPropsRef = React.useRef({
+      position: position,
+      innerPositions: innerPositions,
+      simplifyPath: simplifyPath,
+      simplifyTolerance: simplifyTolerance,
+      lastReapeated: lastReapeated
+    }); //polygon 생성 effect
 
-          if (startAnimationClassName) {
-            divElement.style.visibility = 'hidden';
-            setTimeout(function () {
-              var _a, _b;
+    React.useEffect(function () {
+      // console.log('polygon changed');
+      offsetCache.current.clear();
+      polygonPropsRef.current = {
+        position: position,
+        innerPositions: innerPositions,
+        simplifyPath: simplifyPath,
+        simplifyTolerance: simplifyTolerance,
+        lastReapeated: lastReapeated
+      };
+      renderPolygonBase();
+    }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
-              divCloneRef.current = divElement.firstElementChild;
-              divElement.style.visibility = 'visible';
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+    var _m = React.useState(true),
+        mapVisible = _m[0],
+        setMapVisible = _m[1];
 
-              var aniListener = function () {
-                var _a, _b;
+    var renderPolygonBase = React.useCallback(function () {
+      // console.log('renderPolygonBase');
+      var _a = polygonPropsRef.current,
+          position = _a.position,
+          innerPositions = _a.innerPositions,
+          simplifyPath = _a.simplifyPath,
+          simplifyTolerance = _a.simplifyTolerance,
+          lastReapeated = _a.lastReapeated;
+      var prevCache = offsetCache.current.get(zoomLevel.current);
+
+      if (prevCache) {
+        var offsets_1 = [];
+        offsets_1.push.apply(offsets_1, prevCache.offsets);
+        setOffsets(offsets_1);
+        var innerOffsets_1 = [];
+        innerOffsets_1.push.apply(innerOffsets_1, prevCache.innerOffsets);
+        setInnerOffsets(innerOffsets_1);
+        setPolygonStart(prevCache.start);
+      } else {
+        // path
+        var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(position, simplifyTolerance, lastReapeated) : position;
+        var offsets_2 = simplified.map(function (pos) {
+          var off = controller.positionToOffset(pos);
+          return new Offset(Math.floor(off.x), Math.floor(off.y));
+        });
+        setOffsets(offsets_2); //inner path
 
-                (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-                (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-              };
+        var innerPath = [];
 
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-            });
-          } else {
-            setTimeout(function () {
-              divCloneRef.current = divElement.firstElementChild;
+        if (innerPositions) {
+          for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
+            var innerPosition = innerPositions_1[_i];
+            var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(innerPosition, simplifyTolerance, lastReapeated) : innerPosition;
+            var offsets_3 = simplified_1.map(function (pos) {
+              var off = controller.positionToOffset(pos);
+              return new Offset(Math.floor(off.x), Math.floor(off.y));
             });
+            innerPath.push(offsets_3);
           }
-        }
+
+          setInnerOffsets(innerPath);
+        } //start point
+
+
+        var regionInfo = PolygonCalculator.getRegionInfo(simplified);
+        var startPosition = regionInfo.maxLat && regionInfo.minLng ? new Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
+        setPolygonStart(startPosition); //cache set
+
+        offsetCache.current.set(zoomLevel.current, {
+          start: startPosition,
+          offsets: offsets_2,
+          innerOffsets: innerPath
+        });
       }
-    }, [options]);
-    return reactDom.createPortal(children, divElement);
+    }, []);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper, {
+      position: polygonStart,
+      visible: visible,
+      disablePointerEvent: true,
+      zIndex: zIndex
+    }, mapVisible && React__default["default"].createElement(SVGPolygon, {
+      path: offsets,
+      innerPath: innerOffsets,
+      mode: mode,
+      background: background,
+      shapeProperties: shapeProperties,
+      svgProperties: svgProperties
+    }, children)));
   }
 
+  /**
+   * 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 +4624,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 +4640,8 @@
 
       roofPolygon.current = {
         position: roofPaths
-      };
+      }; //walls
+
       wallPolygons.current = [];
 
       for (var i = 0; i < basePolygonPath.length; i++) {
@@ -3205,13 +4652,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);
@@ -3273,135 +4721,247 @@
     }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
   }
 
-  var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-    var _a;
-
-    var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-    var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1;
-    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 boundsPos = [];
-    var tempX1, tempY1, tempX2, tempY2;
-
-    for (var i = 0; i < rowCount; i++) {
-      tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
-      tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
-      var rows = [];
-      boundsPos.push(rows);
-
-      for (var k = 0; k < colCount; k++) {
-        tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
-        tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
-        var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
-        var includedList = thisBounds.getIncludedPositions(itemList);
-        rows.push({
-          bounds: thisBounds,
-          checked: false,
-          center: false,
-          centerPosition: thisBounds.getCenter(),
-          incList: [],
-          itemList: includedList,
-          size: basePixelSize
-        });
-      }
-    }
-
-    var centerList = [];
-    var totalItemCount = 0;
-    var min;
-    var max;
-
-    for (var i = 0; i < boundsPos.length; i++) {
-      for (var k = 0; k < boundsPos[i].length; k++) {
-        var curr = boundsPos[i][k];
-        if (curr.checked) continue;
-        curr.checked = true;
-        var incList = [];
-
-        if (boundsPos[i]) {
-          boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
-          boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
-        }
-
-        if (boundsPos[i - 1]) {
-          boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
-          boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
-          boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
-        }
-
-        if (boundsPos[i + 1]) {
-          boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
-          boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
-          boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
-        }
-
-        for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
-          var inc = incList_1[_i];
-          if (inc.checked) continue;
-          inc.checked = true;
+  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];
 
-          if (inc.itemList && inc.itemList.length > 0) {
-            curr.incList.push(inc);
+    var _e = React.useState(''),
+        pointString = _e[0],
+        setPointString = _e[1];
 
-            (_a = curr.itemList).push.apply(_a, inc.itemList);
+    React.useEffect(function () {
+      var pointStringIndex = 0;
+      var interval = setInterval(function () {
+        pointStringIndex += 1;
 
-            curr.center = true;
-          }
+        if (pointStringIndex >= pointCount) {
+          pointStringIndex = 0;
         }
 
-        if (curr.center) {
-          centerList.push(curr);
-          var avrLat = calculateAverage(curr.itemList.map(function (item) {
-            return item.lat;
-          }));
-          var avrLng = calculateAverage(curr.itemList.map(function (item) {
-            return item.lng;
-          }));
-          curr.centerPosition = new Position(avrLat, avrLng);
-          totalItemCount += curr.itemList.length;
-
-          if (!min || curr.itemList.length < min) {
-            min = curr.itemList.length;
-          }
-
-          if (!max || curr.itemList.length > max) {
-            max = curr.itemList.length;
-          }
-        }
+        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)'
       }
-    }
-
-    var status = {
-      total: totalItemCount,
-      average: totalItemCount / centerList.length,
-      min: min,
-      max: max
-    };
-
-    sizeFunction = sizeFunction || function (info, status) {
-      var minSize = basePixelSize / 4;
-      var maxSize = basePixelSize;
-      return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
-    };
-
-    for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
-      var center = centerList_1[_b];
-      center.size = sizeFunction(center, status);
-    }
+    }, "".concat(text, " ").concat(pointString)));
+  }
+  function MapLoadingWithImage(_a) {
+    var _b = _a.size,
+        size = _b === void 0 ? 256 : _b;
 
-    return centerList;
-  };
+    var _c = React.useState(),
+        width = _c[0],
+        setWidth = _c[1];
 
-  var calculateAverage = function (nums) {
-    var sum = 0;
+    var _d = React.useState(),
+        height = _d[0],
+        setHeight = _d[1];
 
-    for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
-      var num = nums_1[_i];
-      sum += num;
-    }
+    var render = React.useMemo(function () {
+      if (!height || !width) {
+        return;
+      }
 
-    return Number((sum / nums.length).toFixed(7));
-  };
+      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)"
+    }))));
+  }
 
   var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
   var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
@@ -3450,6 +5010,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 +5040,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 +5085,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 +5105,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 +5136,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 +5169,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 +5193,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 +5204,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 +5308,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 +5339,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 +5361,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 +5374,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 +5389,8 @@
         }
       });
       console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
-    }, []);
+    }, []); //render!!!
+
     renderMain();
     return React__default["default"].createElement("div", {
       ref: containerRef,
@@ -3755,12 +5409,22 @@
     }), 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);
   }
 
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
+  exports.CircleMarker = CircleMarker;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
@@ -3768,10 +5432,12 @@
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
   exports.MapCanvasWrapper = MapCanvasWrapper;
   exports.MapControlWrapper = MapControlWrapper;
+  exports.MapEvent = MapEvent;
   exports.MapLoadingWithImage = MapLoadingWithImage;
   exports.MapMarkerWrapper = MapMarkerWrapper;
   exports.MapPolygonWrapper = MapPolygonWrapper;
   exports.MapPolylineWrapper = MapPolylineWrapper;
+  exports.MapUIEvent = MapUIEvent;
   exports.Marker = Marker;
   exports.MintMap = MintMap;
   exports.MintMapCanvasRenderer = MintMapCanvasRenderer;
@@ -3783,8 +5449,12 @@
   exports.PointLoading = PointLoading;
   exports.Polygon = Polygon;
   exports.PolygonCalculator = PolygonCalculator;
+  exports.PolygonMarker = PolygonMarker;
   exports.Polyline = Polyline;
   exports.Position = Position;
+  exports.SVGCircle = SVGCircle;
+  exports.SVGPolygon = SVGPolygon;
+  exports.SVGRect = SVGRect;
   exports.getClusterInfo = getClusterInfo;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;