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

package/dist/index.es.js

@@ -10,106 +10,9 @@ var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: f
 var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
 styleInject(css_248z$2);
 
-var MintMapControllerContext = createContext(null);
-function MintMapProvider(_a) {
-  var controller = _a.controller,
-      children = _a.children;
-  return React.createElement(MintMapControllerContext.Provider, {
-    value: controller
-  }, children);
-}
-function useMintMapController() {
-  var controller = useContext(MintMapControllerContext);
-
-  if (controller === null) {
-    throw new Error('controller is not initialized');
-  }
-
-  return controller;
-}
-
-var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
-var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
-styleInject(css_248z$1);
-
-var cn$2 = classNames.bind(styles$1);
-function MintMapCore(_a) {
-  var _this = this;
-
-  var onLoad = _a.onLoad,
-      _b = _a.visible,
-      visible = _b === void 0 ? true : _b,
-      zoomLevel = _a.zoomLevel,
-      center = _a.center,
-      _c = _a.centerMoveWithPanning,
-      centerMoveWithPanning = _c === void 0 ? false : _c,
-      children = _a.children;
-  var controller = useMintMapController();
-  var elementRef = useRef(null);
-
-  var _d = useState(false),
-      mapInitialized = _d[0],
-      setMapInitialized = _d[1];
-
-  useEffect(function () {
-    (function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var map_1;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              if (!(elementRef && elementRef.current)) return [3, 2];
-              return [4, controller.initializingMap(elementRef.current)];
-
-            case 1:
-              map_1 = _a.sent();
-              setTimeout(function () {
-                setMapInitialized(true);
-                onLoad && onLoad(map_1, controller);
-              }, 100);
-              _a.label = 2;
-
-            case 2:
-              return [2];
-          }
-        });
-      });
-    })();
-
-    return function () {
-      controller && controller.destroyMap();
-    };
-  }, [controller, elementRef]);
-  useEffect(function () {
-    if (zoomLevel && controller && mapInitialized) {
-      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
-
-      if (prevZoomLevel !== zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
-      }
-    }
-  }, [zoomLevel]);
-  useEffect(function () {
-    if (center && controller && mapInitialized) {
-      var prevCenter = controller.getCenter();
-
-      if (!Position.equals(prevCenter, center)) {
-        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
-      }
-    }
-  }, [center]);
-  return React.createElement("div", {
-    className: cn$2('mint-map-root')
-  }, mapInitialized && children, React.createElement("div", {
-    className: cn$2('mint-map-container'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
-    },
-    ref: elementRef
-  }));
-}
-
-var LinePoints = function () {
+var LinePoints =
+/** @class */
+function () {
   function LinePoints(x1, y1, x2, y2) {
     this.x1 = x1;
     this.y1 = y1;
@@ -120,10 +23,23 @@ var LinePoints = function () {
   return LinePoints;
 }();
 
-var PolygonCalculator = function () {
+var PositionMirror =
+/** @class */
+function () {
+  function PositionMirror(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return PositionMirror;
+}();
+
+var PolygonCalculator =
+/** @class */
+function () {
   function PolygonCalculator() {}
 
-  PolygonCalculator.getCenter = function (positions) {
+  PolygonCalculator.getRegionInfo = function (positions) {
     var maxX, minX, maxY, minY;
 
     for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
@@ -146,8 +62,41 @@ var PolygonCalculator = function () {
       }
     }
 
-    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!!!');
@@ -180,9 +129,10 @@ var PolygonCalculator = function () {
     var lines = this.convertPolygonToLinePoints(polygon);
 
     for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
-      var target = targets_1[_i];
-      var tempLine = this.convertPositionToPoints(target, new Position(target.lat, maxX));
-      var crossPoints = this.getCrossPointAll(lines, tempLine);
+      var target = targets_1[_i]; //x 축으로 긴 직선과 폴리곤 path 와의 교차 수 비교
+
+      var tempLine = this.convertPositionToPoints(target, new PositionMirror(target.lat, maxX));
+      var crossPoints = this.getCrossPointAll(lines, tempLine); // console.log('crossPoints',crossPoints);
 
       if (crossPoints.length > 0 && crossPoints.length % 2 != 0) {
         result.push(target);
@@ -204,16 +154,20 @@ var PolygonCalculator = function () {
 
   PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
     return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
-  };
+  }; //두 직선의 교점 구하기
+
 
   PolygonCalculator.getCrossPoint = function (sr, tr) {
-    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2);
+    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2); //분모로 사용됨
+    // p1 ==0 이면 평행선 또는 일치 이므로 제외(분모)
 
     if (p1 != 0) {
       var x = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.x1 - tr.x2) - (sr.x1 - sr.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
       var y = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
 
-      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0) {
+      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 //교점이 1선분 위에 있고
+      && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0 //교점이 2선분 위에 있을경우
+      ) {
         return {
           x: x,
           y: y
@@ -243,7 +197,7 @@ var PolygonCalculator = function () {
 
   PolygonCalculator.findCrossPoint = function (sr, tr) {
     for (var _i = 0, sr_2 = sr; _i < sr_2.length; _i++) {
-      var tmp = sr_2[_i];
+      var tmp = sr_2[_i]; //교점이 있으면 true
 
       if (this.getCrossPoint(tmp, tr)) {
         return true;
@@ -253,10 +207,96 @@ var PolygonCalculator = function () {
     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) {
@@ -264,7 +304,8 @@ var GeoCalulator = function () {
     var dLon = this.deg2rad(pos2.lng - pos1.lng);
     var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    var d = this.EARTH_RADIUS * c;
+    var d = this.EARTH_EQUATORIAL_RADIUS_KM * c; // Distance in km
+
     return d;
   };
 
@@ -276,127 +317,470 @@ var GeoCalulator = function () {
     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 __awaiter(this, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
-          if (checkLoaded()) {
-            resolve(false);
-            return;
-          }
+    this.nw = nw;
+    this.se = se;
+    this.ne = ne;
+    this.sw = sw;
 
-          var prevElement = id ? document.getElementById(id) : undefined;
+    if (nw && se) {
+      this.covertNWSEtoNESW(nw, se);
+    } else if (ne && sw) {
+      this.covertNESWtoNWSE(ne, sw);
+    }
+  }
 
-          if (prevElement) {
-            prevElement.addEventListener('load', function () {
-              resolve(false);
-            });
-            return;
-          }
+  Bounds.fromNWSE = function (nw, se) {
+    return new Bounds(nw, se, undefined, undefined);
+  };
 
-          var script = document.createElement('script');
-          script.src = url;
-          script.async = true;
+  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 = createContext(null);
+function MintMapProvider(_a) {
+  var controller = _a.controller,
+      children = _a.children;
+  return React.createElement(MintMapControllerContext.Provider, {
+    value: controller
+  }, children);
+}
+function useMintMapController() {
+  var controller = useContext(MintMapControllerContext);
+
+  if (controller === null) {
+    throw new Error('controller is not initialized');
+  }
+
+  return controller;
+}
+
+var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
+var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
+styleInject(css_248z$1);
+
+var cn$3 = classNames.bind(styles$1);
+function MintMapCore(_a) {
+  var _this = this;
+
+  var onLoad = _a.onLoad,
+      _b = _a.visible,
+      visible = _b === void 0 ? true : _b,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
+      _c = _a.centerMoveWithPanning,
+      centerMoveWithPanning = _c === void 0 ? false : _c,
+      children = _a.children; //controller
+
+  var controller = useMintMapController(); //맵 초기화
+
+  var elementRef = useRef(null);
+
+  var _d = useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
+
+  useEffect(function () {
+    (function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var map_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(elementRef && elementRef.current)) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              ];
+
+            case 1:
+              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+              setTimeout(function () {
+                setMapInitialized(true);
+                onLoad && onLoad(map_1, controller);
+              }, 100);
+              _a.label = 2;
+
+            case 2:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    })();
+
+    return function () {
+      controller && controller.destroyMap();
+    };
+  }, [controller, elementRef]); //줌레벨
+
+  useEffect(function () {
+    if (zoomLevel && controller && mapInitialized) {
+      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
+
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
+      }
+    }
+  }, [zoomLevel]); //센터
+
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!Position.equals(prevCenter, center)) {
+        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
+    }
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$3('mint-map-root')
+  }, mapInitialized && children, React.createElement("div", {
+    className: cn$3('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
+    ref: elementRef
+  }));
+}
+
+var MintMapController =
+/** @class */
+function () {
+  //constructor
+  function MintMapController(props) {
+    this.mapApiLoaded = false;
+    this.mapInitialized = false;
+    this.processedTime = 0; //props
+
+    this.mapProps = props;
+  } //기본 기능
+
+
+  MintMapController.prototype.getMap = function () {
+    return this.map;
+  };
+
+  MintMapController.prototype.getMapType = function () {
+    return this.type;
+  }; //기본 기능 - 좌표 변환
+
+
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new Offset(x, y);
+  };
+
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng); //const x = w * (position.lng - minLng) / lng
+
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat); //const y = h * (maxLat - position.lat) / lat
+
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new Position(latVal, lngVal);
+  }; //스크립트 로드
+
+
+  MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        //boolean -> script 로드 후 callback 실행 여부
+        //** callback 실행이 여기서 안된 경우는 바깥에서 해줘야한다.
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
+          //이미 로드되어 있으면 종료
+          if (checkLoaded()) {
+            resolve(false);
+            return;
+          }
+
+          var prevElement = id ? document.getElementById(id) : undefined; //기존 스크립트 로드 정보가 있으면
+
+          if (prevElement) {
+            // console.log(`already loaded script => ${id}`)
+            //로드 되어 있지 않으면 스크립트 load 이벤트 끼워넣기
+            prevElement.addEventListener('load', function () {
+              // console.log('script loaded!!!')
+              resolve(false);
+            });
+            return;
+          } //스크립트 로드 처리
+
+
+          var script = document.createElement('script');
+          script.src = url;
+          script.async = true;
           script.defer = true;
           id && (script.id = id);
           script.addEventListener('load', function () {
@@ -411,6 +795,14 @@ var MintMapController = function () {
   MintMapController.prototype.getRandomFunctionName = function (prefix) {
     return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
   };
+  /**
+   * URL 빌더 메서드
+   *
+   * @param {string} baseUrl: 기본 URL
+   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+   * @returns {string} URL
+   */
+
 
   MintMapController.prototype.buildUrl = function (baseUrl, param) {
     var params = Object.entries(param).map(function (_a) {
@@ -421,9 +813,15 @@ var MintMapController = function () {
     }).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) {
@@ -461,7 +859,9 @@ var MintMapController = function () {
   return MintMapController;
 }();
 
-var MapZoomInfo = function () {
+var MapZoomInfo =
+/** @class */
+function () {
   function MapZoomInfo() {}
 
   MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
@@ -658,16 +1058,20 @@ function waiting(evaluation, timeoutSeconds) {
     var max;
     return __generator(this, function (_a) {
       max = (timeoutSeconds || 5) * 1000;
-      return [2, new Promise(function (resolve) {
+      return [2
+      /*return*/
+      , new Promise(function (resolve) {
         var start = new Date().getTime();
         var inter = setInterval(function () {
+          //타임아웃 체크
           var time = new Date().getTime();
 
           if (time - start > max) {
             clearInterval(inter);
             resolve(false);
             return;
-          }
+          } //평가식 체크
+
 
           if (evaluation()) {
             clearInterval(inter);
@@ -679,36 +1083,104 @@ function waiting(evaluation, timeoutSeconds) {
   });
 }
 
-var NaverMintMapController = function (_super) {
-  __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) {
+  __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 ObjectPool().setFactory(function () {
+    if (!this.mapProps.markerCache) return; //marker pool setting
+
+    this.markerPool = new ObjectPool() //logging on
+    //.setLog(true)
+    //factory 셋팅
+    .setFactory(function () {
+      //console.log('pool item created');
       return new naver.maps.Marker({
         position: new Position(0, 0),
         map: _this.map || undefined
       });
-    }).setClear(function (item) {
+    }) //clear function 셋팅
+    .setClear(function (item) {
+      //console.log('pool item cleared');
       item.setMap(null);
-    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    }) //초기 pool 사이즈
+    .createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000) //TTL 체크 간격 (기본 5초)
+    .setCheckLiveTimeInterval(1000);
   };
 
   NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -726,7 +1198,7 @@ var NaverMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('controller createPolyline start', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
@@ -740,8 +1212,13 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: lineOpacity,
         clickable: true,
         visible: visible
-      });
-      editable && pol_1.setEditable(editable);
+      }); //@ts-ignore
+
+      editable && pol_1.setEditable(editable); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, naver.maps.drawing.DrawingMode.POLYLINE)
+      // }
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -752,7 +1229,9 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof naver.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
 
       if (Array.isArray(options.position)) {
@@ -767,7 +1246,8 @@ var NaverMintMapController = function (_super) {
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
-      });
+      }); //@ts-ignore
+
       options.editable !== undefined && polyline.native.setEditable(options.editable);
     }
   };
@@ -791,7 +1271,7 @@ var NaverMintMapController = function (_super) {
         _g = _a.visible,
         visible = _g === void 0 ? true : _g;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('polygon', polygon);
 
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
@@ -809,7 +1289,9 @@ var NaverMintMapController = function (_super) {
         fillOpacity: fillOpacity,
         clickable: true,
         visible: visible
-      });
+      }); //@ts-ignore
+      //pol.setEditable(editable)
+
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -820,7 +1302,9 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof naver.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
 
       if (Array.isArray(options.position)) {
@@ -839,7 +1323,8 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
+
       options.editable !== undefined && polygon.native.setEditable(options.editable);
     }
   };
@@ -854,7 +1339,8 @@ var NaverMintMapController = function (_super) {
         map: this.map,
         position: marker.options.position,
         visible: marker.options.visible === undefined || marker.options.visible
-      };
+      }; //console.log('controller createMarker', marker.options);
+
       marker.element && (options.icon = {
         content: marker.element,
         anchor: marker.options.anchor
@@ -881,10 +1367,18 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof naver.maps.Marker) {
       var map = marker.native.getMap();
 
       if (map) {
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        */
+        //Position
         if (options.position && options.position instanceof Position) {
           marker.native.setPosition(options.position);
         }
@@ -897,7 +1391,21 @@ var NaverMintMapController = function (_super) {
           marker.native.setIcon(__assign(__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
           }));
-        }
+        } // const newOption = {
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        // } as naver.maps.MarkerOptions
+        // if(options.anchor){
+        //   newOption.icon = {...marker.native.getIcon(), anchor:options.anchor}
+        // }
+        // marker.native.setOptions({
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        //   icon:{...marker.native.getIcon(), anchor:options.anchor}
+        // })
+
       }
     }
   };
@@ -977,7 +1485,7 @@ var NaverMintMapController = function (_super) {
   NaverMintMapController.prototype.checkLoaded = function () {
     var _a, _b;
 
-    return (_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+    return ((_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
 
   NaverMintMapController.prototype.loadMapApi = function () {
@@ -985,17 +1493,21 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve, error) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve, error) {
           return __awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_naver');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
 
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('naver api loaded');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   };
 
@@ -1004,17 +1516,22 @@ var NaverMintMapController = function (_super) {
                     submodules: this.scriptModules.join(','),
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
 
                 case 1:
                   callbackExecFlag = _a.sent();
 
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   }
 
-                  return [4, waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return loaded;
                   })];
 
@@ -1027,7 +1544,9 @@ var NaverMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1041,8 +1560,11 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        //div element
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
 
@@ -1053,17 +1575,26 @@ var NaverMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면 
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getElement() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     } else {
                       this.map.destroy();
                     }
                   }
 
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
 
                 case 1:
                   _e.sent();
@@ -1100,43 +1631,59 @@ var NaverMintMapController = function (_super) {
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
                   map = new naver.maps.Map(divElement, options);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+
                   map.addListener('dragstart', function (e) {
+                    //console.log('map dragstart', e);
                     _this.dragStartPoint[0] = e.domEvent.clientX;
                     _this.dragStartPoint[1] = e.domEvent.clientY;
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('dragend', function (e) {
+                    //console.log('map dragend', e);
                     if (_this.dragStartPoint[0] === e.domEvent.clientX && _this.dragStartPoint[1] === e.domEvent.clientY) {
                       _this.dragged = false;
                     } else {
                       _this.dragged = true;
-                    }
-                  });
+                    } //console.log('map dragend', this.dragged)
+
+                  }); //@ts-ignore
+
                   map.addListener('idle', function (e) {
+                    //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.coord.y, e.coord.x);
                     pos.offset = new Offset(e.offset.x, e.offset.y);
 
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
                     var pos = new Position(e.coord.y, e.coord.x);
-                    pos.offset = new Offset(e.offset.x, e.offset.y);
+                    pos.offset = new Offset(e.offset.x, e.offset.y); // console.log('mousemove', pos)
 
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
-                  resolve(map);
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
+
+                  resolve(map); //네이버는 로드 후에 idle 이 발생 안해서 직접 일으켜준다
+
                   map.trigger('idle');
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1159,11 +1706,13 @@ var NaverMintMapController = function (_super) {
     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 () {
@@ -1205,10 +1754,104 @@ var NaverMintMapController = function (_super) {
     (_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) {
   __extends(GoogleMintMapController, _super);
 
   function GoogleMintMapController(props) {
@@ -1217,21 +1860,34 @@ var GoogleMintMapController = function (_super) {
     _this.type = 'google';
     _this.map = null;
     _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
-    _this.scriptModules = ['marker'];
+    _this.scriptModules = ['marker']; //'drawing' , 'geometry' , 'journeySharing' , 'localContext' , 'places' , 'visualization']
+
+    _this.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) {
@@ -1249,12 +1905,13 @@ var GoogleMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('polyline', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
         return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
-      });
+      }); //console.log('polyline path',path);
+
       var pol_1 = new google.maps.Polyline({
         map: this.map,
         path: path,
@@ -1264,7 +1921,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polyline created', polyline);
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -1275,8 +1933,9 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof google.maps.Polyline) {
-      var polylineOption = this.getValidOptions(options);
+      var polylineOption = this.getValidOptions(options); //console.log('controller updatePolyline start', polylineOption);
 
       if (this.map && Array.isArray(options.position)) {
         var path = options.position.map(function (elem) {
@@ -1309,7 +1968,7 @@ var GoogleMintMapController = function (_super) {
         visible = _g === void 0 ? true : _g,
         _h = _a.editable,
         editable = _h === void 0 ? false : _h,
-        event = _a.event;
+        event = _a.event; //console.log('polygon', polygon);
 
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
@@ -1328,7 +1987,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polygon created', polygon);
+
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -1339,8 +1999,9 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof google.maps.Polygon) {
-      var polygonOption = this.getValidOptions(options);
+      var polygonOption = this.getValidOptions(options); //console.log('controller updatePolygon start', polygonOption);
 
       if (this.map && Array.isArray(options.position)) {
         var outLine = options.position.map(function (elem) {
@@ -1356,12 +2017,14 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.getValidOptions = function (options) {
+    //console.log('getValidOptions DrawableOptions',options)
     var target = {};
 
     for (var _i = 0, _a = Object.getOwnPropertyNames(options); _i < _a.length; _i++) {
-      var name_1 = _a[_i];
+      var name_1 = _a[_i]; //@ts-ignore
 
       if (options[name_1] !== undefined) {
+        //@ts-ignore
         target[name_1] = options[name_1];
       }
     }
@@ -1377,7 +2040,7 @@ var GoogleMintMapController = function (_super) {
     if (this.map) {
       var googleMarker_1;
 
-      if (marker.element) {
+      if (marker.element && marker.element instanceof Element) {
         var options = {
           map: this.map,
           position: marker.options.position
@@ -1408,6 +2071,7 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     var _a, _b;
 
     if (marker && marker.native) {
@@ -1418,7 +2082,8 @@ var GoogleMintMapController = function (_super) {
           marker.native.setOptions({
             map: map,
             position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-            visible: options.visible === undefined || options.visible
+            visible: options.visible === undefined || options.visible // icon:{...marker.native.getIcon(), anchor:options.anchor}
+
           });
         }
       } else if (marker.native instanceof google.maps.marker.AdvancedMarkerView) {
@@ -1514,7 +2179,7 @@ var GoogleMintMapController = function (_super) {
   GoogleMintMapController.prototype.checkLoaded = function () {
     var _a, _b, _c;
 
-    return (_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView;
+    return ((_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView) ? true : false;
   };
 
   GoogleMintMapController.prototype.loadMapApi = function () {
@@ -1522,17 +2187,21 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_google');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
 
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('google api loaded');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   };
 
@@ -1542,17 +2211,23 @@ var GoogleMintMapController = function (_super) {
                     v: 'beta',
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
 
                 case 1:
                   callbackExecFlag = _a.sent();
 
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    // console.log('google api loaded 222222');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   }
 
-                  return [4, waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return loaded;
                   })];
 
@@ -1565,7 +2240,9 @@ var GoogleMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -1579,8 +2256,11 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        //div element
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var map;
 
@@ -1591,15 +2271,24 @@ var GoogleMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면 
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getDiv() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     }
                   }
 
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
 
                 case 1:
                   _e.sent();
@@ -1618,30 +2307,53 @@ var GoogleMintMapController = function (_super) {
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+
                   map.addListener('idle', function () {
+                    //onBoundsChanged event
                     _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
-                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                    //onZoomChanged event
+                    // console.log('zoom_changed');
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom() || 10);
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e)
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.latLng.lat(), e.latLng.lng());
                     pos.offset = new Offset(e.pixel.x, e.pixel.y);
 
                     _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*/
+                  ];
               }
             });
           });
@@ -1664,7 +2376,7 @@ var GoogleMintMapController = function (_super) {
     if (bounds) {
       return this.fromGoogleBounds(bounds);
     } else {
-      throw new Error('bounds is not found!!!');
+      throw new Error('bounds is not found!!!'); //return new Bounds(new Position(0,0), new Position(0,0))
     }
   };
 
@@ -1696,10 +2408,120 @@ var GoogleMintMapController = function (_super) {
     (_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) {
   __extends(KakaoMintMapController, _super);
 
   function KakaoMintMapController(props) {
@@ -1708,27 +2530,44 @@ var KakaoMintMapController = function (_super) {
     _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 ObjectPool().setFactory(function () {
+    if (!this.mapProps.markerCache) return; //marker pool setting
+
+    this.markerPool = new ObjectPool() //logging on
+    //.setLog(true)
+    //factory 셋팅
+    .setFactory(function () {
+      //console.log('pool item created');
       return new kakao.maps.CustomOverlay({
         position: _this.positionToLatLng(new Position(0, 0)),
         map: _this.map || undefined
       });
-    }).setClear(function (item) {
+    }) //clear function 셋팅
+    .setClear(function (item) {
+      //console.log('pool item cleared');
       item.setMap(null);
-    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    }) //초기 pool 사이즈
+    .createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000) //TTL 체크 간격 (기본 5초)
+    .setCheckLiveTimeInterval(1000);
   };
 
   KakaoMintMapController.prototype.createPolyline = function (polyline) {
@@ -1744,7 +2583,7 @@ var KakaoMintMapController = function (_super) {
         lineOpacity = _d === void 0 ? 1 : _d;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('controller createPolyline start', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
@@ -1756,7 +2595,11 @@ var KakaoMintMapController = function (_super) {
         strokeColor: lineColor,
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity
-      });
+      }); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, kakao.maps.drawing.DrawingMode.POLYLINE)
+      // }
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -1767,9 +2610,11 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     var _this = this;
 
     if (polyline && polyline.native && polyline.native instanceof kakao.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
 
       if (Array.isArray(options.position)) {
@@ -1780,6 +2625,7 @@ var KakaoMintMapController = function (_super) {
 
       polyline.native.setOptions({
         path: path || polyline.native.getPath(),
+        //visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
@@ -1805,15 +2651,17 @@ var KakaoMintMapController = function (_super) {
         fillOpacity = _f === void 0 ? 0.5 : _f;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('polygon', polygon);
 
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
         return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
       });
       var path = [outLine];
-      innerPositions && path.push(innerPositions.map(function (inner) {
-        return _this.positionToLatLng(inner);
+      innerPositions && path.push.apply(path, innerPositions.map(function (inner) {
+        return inner.map(function (innerItem) {
+          return _this.positionToLatLng(innerItem);
+        });
       }));
       var pol_2 = new kakao.maps.Polygon({
         map: this.map,
@@ -1822,8 +2670,12 @@ var KakaoMintMapController = function (_super) {
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity,
         fillColor: fillColor,
-        fillOpacity: fillOpacity
-      });
+        fillOpacity: fillOpacity // clickable:true,
+        // visible:visible,
+
+      }); //@ts-ignore
+      //pol.setEditable(editable)
+
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -1834,9 +2686,11 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     var _this = this;
 
     if (polygon && polygon.native && polygon.native instanceof kakao.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
 
       if (Array.isArray(options.position)) {
@@ -1845,18 +2699,22 @@ var KakaoMintMapController = function (_super) {
         });
         paths = [outLine];
         options.innerPositions && paths.push.apply(paths, options.innerPositions.map(function (inner) {
-          return _this.positionToLatLng(inner);
+          return inner.map(function (innerItem) {
+            return _this.positionToLatLng(innerItem);
+          });
         }));
       }
 
       polygon.native.setOptions({
         path: paths || polygon.native.getPath(),
+        // visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
+      // options.editable !== undefined && polygon.native.setEditable(options.editable)
     }
   };
 
@@ -1868,8 +2726,10 @@ var KakaoMintMapController = function (_super) {
     if (this.map) {
       var options = {
         map: this.map,
-        position: this.positionToLatLng(marker.options.position)
-      };
+        position: this.positionToLatLng(marker.options.position) // visible:marker.options.visible === undefined || marker.options.visible,
+
+      }; //console.log('controller createMarker', marker.options);
+
       marker.element && (options.content = marker.element);
       var kakaoMarker_1;
 
@@ -1882,7 +2742,7 @@ var KakaoMintMapController = function (_super) {
       } else {
         kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
         marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
         marker.native = kakaoMarker_1;
       }
 
@@ -1895,10 +2755,12 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof kakao.maps.CustomOverlay) {
       var map = marker.native.getMap();
 
       if (map) {
+        //Position
         if (options.position && options.position instanceof Position) {
           marker.native.setPosition(this.positionToLatLng(options.position));
         }
@@ -1907,11 +2769,16 @@ var KakaoMintMapController = function (_super) {
           marker.native.setVisible(options.visible);
         }
 
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
       }
     }
   };
 
+  KakaoMintMapController.prototype.removeParentElementsMargin = function (marker) {
+    //맵 별로 offset 통일을 위해서 margin 제거
+    marker.element && marker.element instanceof HTMLElement && marker.element.parentElement && (marker.element.parentElement.style.margin = '0');
+  };
+
   KakaoMintMapController.prototype.getMaxZIndex = function (increment, parent) {
     if (increment === void 0) {
       increment = 0;
@@ -1921,14 +2788,16 @@ var KakaoMintMapController = function (_super) {
       var targetPane = parent.parentElement;
       var max = 0;
 
-      for (var i = 0; i < targetPane.childElementCount; i++) {
-        var elem = targetPane.children[i];
+      if (targetPane) {
+        for (var i = 0; i < targetPane.childElementCount; i++) {
+          var elem = targetPane.children[i];
 
-        if (elem instanceof HTMLElement) {
-          var index = Number(elem.style.zIndex);
+          if (elem instanceof HTMLElement) {
+            var index = Number(elem.style.zIndex);
 
-          if (!isNaN(index) && index > max) {
-            max = index;
+            if (!isNaN(index) && index > max) {
+              max = index;
+            }
           }
         }
       }
@@ -1999,7 +2868,7 @@ var KakaoMintMapController = function (_super) {
   KakaoMintMapController.prototype.checkLoaded = function () {
     var _a, _b;
 
-    return (_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+    return ((_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
 
   KakaoMintMapController.prototype.loadMapApi = function () {
@@ -2007,7 +2876,9 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var params, ok;
 
@@ -2021,13 +2892,17 @@ var KakaoMintMapController = function (_super) {
                     libraries: this.scriptModules.join(','),
                     autoload: false
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
 
                 case 1:
                   _a.sent();
 
-                  window.kakao.maps.load();
-                  return [4, waiting(function () {
+                  window.kakao.maps.load(function () {});
+                  return [4
+                  /*yield*/
+                  , waiting(function () {
                     return _this.checkLoaded() ? true : false;
                   })];
 
@@ -2040,7 +2915,9 @@ var KakaoMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -2055,7 +2932,9 @@ var KakaoMintMapController = function (_super) {
 
       return __generator(this, function (_a) {
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
 
@@ -2066,17 +2945,12 @@ var KakaoMintMapController = function (_super) {
             return __generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
-                  if (this.mapInitialized && this.map) {
-                    if (this.map.getElement() === divElement) {
-                      resolve(this.map);
-                      return [2];
-                    } else {
-                      this.map.destroy();
-                    }
-                  }
-
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
 
                 case 1:
                   _e.sent();
@@ -2086,7 +2960,7 @@ var KakaoMintMapController = function (_super) {
                 case 2:
                   options = {
                     center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
-                    level: this.getBaseToMapZoom((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel),
+                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 10),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
@@ -2109,31 +2983,58 @@ var KakaoMintMapController = function (_super) {
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+                  // map.addListener('dragstart', (e)=>{
+                  //   //console.log('map dragstart', e);
+                  //   this.dragStartPoint[0] = e.domEvent.clientX
+                  //   this.dragStartPoint[1] = e.domEvent.clientY
+                  // })
+                  //@ts-ignore
+                  // map.addListener('dragend', (e)=>{
+                  //   //console.log('map dragend', e);
+                  //   if(this.dragStartPoint[0] === e.domEvent.clientX && this.dragStartPoint[1] === e.domEvent.clientY){
+                  //     this.dragged = false
+                  //   }else{
+                  //     this.dragged = true
+                  //   }
+                  //   //console.log('map dragend', this.dragged)
+                  // })
+                  //@ts-ignore
+
                   map.addListener('idle', function (e) {
+                    //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.getZoomLevel());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
                     var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
                     pos.offset = new Offset(e.point.x, e.point.y);
 
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
                     var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
-                    pos.offset = new Offset(e.point.x, e.point.y);
+                    pos.offset = new Offset(e.point.x, e.point.y); // console.log('mousemove', pos)
 
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
+
                   resolve(map);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -2143,6 +3044,14 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    */
     var mapValue = this.getBaseToMapZoom(value);
 
     if (mapValue > 14) {
@@ -2161,7 +3070,8 @@ var KakaoMintMapController = function (_super) {
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('kakao map destroy error', e);
-    }
+    } // console.log(`${this.type} map destroyed`);
+
   };
 
   KakaoMintMapController.prototype.getCurrBounds = function () {
@@ -2200,191 +3110,138 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.positionToLatLng = function (pos) {
-    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : undefined;
+    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
   };
 
   KakaoMintMapController.prototype.latLngToPosition = function (latLng) {
-    return latLng ? new Position(latLng.getLat(), latLng.getLng()) : undefined;
+    return latLng ? new Position(latLng.getLat(), latLng.getLng()) : new Position(0, 0);
   };
 
-  return KakaoMintMapController;
-}(MintMapController);
+  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) {
-  __extends(Marker, _super);
-
-  function Marker(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Marker;
-}(Drawable);
-
-var Polyline = function (_super) {
-  __extends(Polyline, _super);
-
-  function Polyline(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Polyline;
-}(Drawable);
+  KakaoMintMapController.prototype.clearEventListener = function (eventName) {
+    var _this = this;
 
-var Polygon = function (_super) {
-  __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.bind(styles$2);
+  return KakaoMintMapController;
+}(MintMapController);
+
+var cn$2 = classNames.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,
@@ -2426,7 +3283,21 @@ function MintMap(_a) {
 
       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));
@@ -2438,7 +3309,7 @@ function MintMap(_a) {
   return React.createElement(React.Fragment, null, controller ? React.createElement(MintMapProvider, {
     controller: controller
   }, dissolveEffectWhenLoaded && React.createElement("div", {
-    className: cn$1('ani-fade-out'),
+    className: cn$2('ani-fade-out'),
     style: {
       position: 'absolute',
       top: '0px',
@@ -2471,256 +3342,250 @@ function MintMap(_a) {
     }
   }), loading));
 }
-function PointLoading(_a) {
-  var _b = _a.text,
-      text = _b === void 0 ? 'Loading' : _b,
-      _c = _a.pointCount,
-      pointCount = _c === void 0 ? 4 : _c,
-      _d = _a.speedMs,
-      speedMs = _d === void 0 ? 200 : _d;
-  var pointStringPool = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
-    return Array.from(Array(idx + 1)).map(function () {
-      return '.';
-    }).join('');
-  }))[0];
 
-  var _e = useState(''),
-      pointString = _e[0],
-      setPointString = _e[1];
+var MintMapCanvasRenderer =
+/** @class */
+function () {
+  function MintMapCanvasRenderer(context) {
+    this.context = context;
+  }
 
-  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.createElement("div", {
-    className: cn$1('loading-point-container')
-  }, React.createElement("div", {
+  var _f = useState(radius * 2),
+      boxSize = _f[0],
+      setBoxSize = _f[1];
+
+  useEffect(function () {
+    // console.log('SVGCircle radius', radius);
+    setBoxSize(radius * 2);
+  }, [radius]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: boxSize,
+    height: boxSize,
+    viewBox: "0 0 100 100"
+  }, svgProperties), React.createElement("circle", __assign({
+    pointerEvents: "visiblepainted",
+    cx: '50',
+    cy: '50',
+    r: '50',
+    fill: background
+  }, shapeProperties))), React.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 = 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 = useCallback(function (path) {
+    var maxX, minX, maxY, minY;
 
-  var _d = 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 = 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.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 = 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 = 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.createElement(LoadingImage, {
-          size: size,
-          duration: duration,
-          delay: delay
-        });
-      }));
-    });
-  }, [width, height]);
-  return React.createElement("div", {
-    ref: function (refs) {
-      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
-      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
-    },
+      }
+    }).join(' ') + " ".concat(closePath ? 'Z' : '');
+  }, []);
+
+  var _g = useState(0),
+      width = _g[0],
+      setWidth = _g[1];
+
+  var _h = useState(0),
+      height = _h[0],
+      setHeight = _h[1];
+
+  var _j = useState('M0 0'),
+      d = _j[0],
+      setD = _j[1];
+
+  useEffect(function () {
+    var info = getPolygonInfo(path);
+    setWidth(info.containerWidth);
+    setHeight(info.containerHeight);
+    setD(getD(__assign(__assign({}, info), {
+      path: path,
+      innerPath: innerPath,
+      mode: mode
+    })));
+  }, [path, innerPath]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height)
+  }, svgProperties), React.createElement("path", __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.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.createElement("svg", {
-    className: cn$1("ani-fade-in"),
-    style: {
-      flex: "0 0 ".concat(size, "px"),
-      opacity: 0,
-      animationDelay: "".concat(delay, "s"),
-      animationDuration: "".concat(duration, "s"),
-      animationFillMode: 'forwards'
-    },
-    width: size,
-    height: size,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React.createElement("g", {
-    transform: "scale(".concat(scale, ")"),
-    "clip-path": "url(#clip0_5_701)"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    transform: "translate(0 4000) rotate(-90)",
-    fill: "#F8F8F8"
-  }), React.createElement("path", {
-    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
-    fill: "#F6E4DD"
-  }), React.createElement("path", {
-    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "958",
-    cy: "3092",
-    r: "95",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "1127",
-    cy: "3176",
-    r: "56",
-    fill: "#A2CAEE"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
-    fill: "#FBEDB1"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
-    fill: "#FBEDB1"
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: "clip0_5_701"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    fill: "white",
-    transform: "translate(0 4000) rotate(-90)"
-  }))));
-}
+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 = useCallback(function (width, height) {
+    return Number((100 * height / width).toFixed(0));
+  }, []);
+  var viewWidth = useRef(100);
 
-var MintMapCanvasRenderer = function () {
-  function MintMapCanvasRenderer(context) {
-    this.context = context;
-  }
+  var _g = useState(getViewHeight(width, height)),
+      viewHeight = _g[0],
+      setViewHeight = _g[1];
 
-  return MintMapCanvasRenderer;
-}();
+  useEffect(function () {
+    setViewHeight(getViewHeight(width, height));
+  }, [width, height]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+  }, svgProperties), React.createElement("rect", __assign({
+    pointerEvents: "visiblepainted",
+    x: "0",
+    y: "0",
+    width: viewWidth.current,
+    height: viewHeight,
+    fill: background
+  }, shapeProperties))), React.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;
@@ -2755,21 +3620,27 @@ var AnimationPlayer = function () {
   };
 
   AnimationPlayer.prototype.resume = function () {
-    this.playing = true;
+    this.playing = true; //@ts-ignore
+
     window.requestAnimationFrame(this.makeFrame.bind(this));
   };
 
   AnimationPlayer.prototype.makeFrame = function (timestamp) {
+    //frame 간 시간 변화
     if (this.prevtime === 0) {
       this.prevtime = timestamp;
     }
 
-    this.deltaTime += timestamp - this.prevtime;
+    this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
+
     this.prevtime = timestamp;
 
     if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
-      this.elapsedTime += this.deltaTime;
-      var stopFlag = this.draw(this.deltaTime, this.elapsedTime);
+      //다음 루프 준비
+      this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
+
+      var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
+
       this.deltaTime = 0;
 
       if (stopFlag) {
@@ -2778,12 +3649,93 @@ var AnimationPlayer = function () {
     }
 
     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) {
+  __extends(Marker, _super);
+  /**
+   * 지도에 표시할 마커정보
+   */
+
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var Polyline =
+/** @class */
+function (_super) {
+  __extends(Polyline, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var Polygon =
+/** @class */
+function (_super) {
+  __extends(Polygon, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+  /**
+   * 폴리곤의 중점을 구한다.
+   */
+
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+      });
+      return PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
 
 function nextIndex(array, currIdx) {
   var next = currIdx + 1;
@@ -2811,13 +3763,16 @@ function useMarkerMoving(_a) {
       _h = _a.velocity,
       velocity = _h === void 0 ? 10 : _h,
       onMovingStart = _a.onMovingStart,
-      onMovingEnd = _a.onMovingEnd;
+      onMovingEnd = _a.onMovingEnd; //controller
+
   var controller = useMintMapController();
   useEffect(function () {
+    //console.log('velocity changed!!!!', velocity);
     contextRef.current && (contextRef.current.velocityKmh = velocity);
   }, [velocity]);
   var contextRef = useRef();
   useEffect(function () {
+    //console.log('ani marker', marker);
     if (marker) {
       var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
       var stopNext_1 = false;
@@ -2835,15 +3790,19 @@ function useMarkerMoving(_a) {
       var draw = function (frameGapTime, _elapsedTime) {
         if (!marker) {
           console.log('myMarker is not exist!!!');
-          return true;
-        }
+          return true; //종료
+        } //지난 시간
+
 
-        context_1.elapsedTimeMs = frameGapTime;
+        context_1.elapsedTimeMs = frameGapTime; //next position 계산
 
         while (true) {
-          GeoCalulator.computeNextPositionAndDistances(context_1);
+          //계산
+          GeoCalulator.computeNextPositionAndDistances(context_1); //타겟에 도착했으면, 원래 얼마나 더 갈수 있었는지 체크해서
+          //그 만큼 더 가도록 계속 처리하기위해 다시 계산
 
           if (context_1.nextPos === context_1.pos2) {
+            //다음 목표가 시작점과 같으면 loop 카운트 +1
             if (currTargetIndex_1 === startPositionIndex) {
               loopCount_1 += 1;
             }
@@ -2851,9 +3810,11 @@ function useMarkerMoving(_a) {
             if (!loop && loopCount_1 > 0) {
               stopNext_1 = true;
               break;
-            }
+            } //현재 출발점
+
+
+            context_1.pos1 = positions[currTargetIndex_1]; //현재 목표점
 
-            context_1.pos1 = positions[currTargetIndex_1];
             currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
 
             if (currTargetIndex_1 === 0 && !positionClosed) {
@@ -2867,13 +3828,13 @@ function useMarkerMoving(_a) {
           }
         }
 
-        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;
@@ -2921,12 +3882,21 @@ function useMarkerMoving(_a) {
 }
 
 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,
@@ -2936,20 +3906,27 @@ function MapMarkerWrapper(_a) {
       _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 = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
+
+
+  var controller = useMintMapController(); //element
 
-  var controller = useMintMapController();
   var divRef = useRef(document.createElement('div'));
-  var divElement = divRef.current;
-  var divCloneRef = useRef();
-  var markerRef = useRef();
+  var divElement = divRef.current; //element clone for animation
+
+  var divCloneRef = useRef(); //marker
 
-  var _d = useState({}),
-      movingState = _d[0],
-      setMovingState = _d[1];
+  var markerRef = useRef(); //moving animation
+
+  var _e = useState({}),
+      movingState = _e[0],
+      setMovingState = _e[1];
 
   useEffect(function () {
+    // console.log('movingState', movingState);
     if (movingState.autoStart) {
       setTimeout(function () {
         start();
@@ -2957,18 +3934,20 @@ function MapMarkerWrapper(_a) {
     }
   }, [movingState]);
   useEffect(function () {
+    // console.log('movingAnimation changed', movingAnimation);
     if (movingAnimation) {
       setMovingState(__assign(__assign({}, movingAnimation), {
         marker: markerRef.current
       }));
     }
-  }, [movingAnimation]);
-  var start = useMarkerMoving(movingState)[0];
+  }, [movingAnimation]); //marker moving hook
+
+  var start = useMarkerMoving(movingState)[0]; //event handlers
 
   var onClickHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current;
+    var marker = markerRef.current; //console.log('onClickHandler', marker);
 
     if (marker) {
       controller.setMapDragged(false);
@@ -2984,127 +3963,592 @@ function MapMarkerWrapper(_a) {
     }
   };
 
-  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
+
+
+  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
+
+  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(__assign(__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 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 = useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderCircleBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = useRef(controller.getZoomLevel());
+  useEffect(function () {
+    controller.addEventListener("ZOOMSTART", onZoomStart);
+    controller.addEventListener("IDLE", onIdle);
+    return function () {
+      controller.removeEventListener("ZOOMSTART", onZoomStart);
+      controller.removeEventListener("IDLE", onIdle);
+    };
+  }, []); //offsets
+
+  var _g = useState(),
+      computedRadius = _g[0],
+      setComputedRadius = _g[1];
 
-    var marker = markerRef.current;
+  var _h = 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 = useRef({
+    center: center,
+    radius: radius,
+    radiusUnit: radiusUnit
+  }); //circle 생성 effect
 
-      next && topOnHover && controller.markerToTheTop(marker);
+  useEffect(function () {
+    circlePropsRef.current = {
+      center: center,
+      radius: radius,
+      radiusUnit: radiusUnit
+    };
+    renderCircleBase();
+  }, [center, radius, radiusUnit]); //render
+
+  var _j = useState(true),
+      mapVisible = _j[0],
+      setMapVisible = _j[1];
+
+  var renderCircleBase = 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 = 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.createElement(React.Fragment, null, computedRadius && React.createElement(MapMarkerWrapper, {
+    position: center,
+    anchor: anchor,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React.createElement(SVGCircle, {
+    radius: computedRadius,
+    background: background,
+    shapeProperties: __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 = useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderPolygonBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = useRef(controller.getZoomLevel());
   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 = useState(),
+      polygonStart = _j[0],
+      setPolygonStart = _j[1]; //offsets
 
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current);
-          }
 
-          divCloneRef.current = undefined;
-        };
+  var _k = 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);
-        }
-      }
-    };
-  }, []);
-  useEffect(function () {
-    if (options) {
-      if (markerRef.current) {
-        controller.updateMarker(markerRef.current, options);
-        offsetCalibration(controller.getMapType(), divElement, options);
+  var _l = 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 = useRef(new Map()); //polygon props ref
 
-        if (movingAnimation) {
-          setMovingState(__assign(__assign({}, movingAnimation), {
-            marker: markerRef.current
-          }));
-        }
+  var polygonPropsRef = useRef({
+    position: position,
+    innerPositions: innerPositions,
+    simplifyPath: simplifyPath,
+    simplifyTolerance: simplifyTolerance,
+    lastReapeated: lastReapeated
+  }); //polygon 생성 effect
 
-        if (startAnimationClassName) {
-          divElement.style.visibility = 'hidden';
-          setTimeout(function () {
-            var _a, _b;
+  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 = useState(true),
+      mapVisible = _m[0],
+      setMapVisible = _m[1];
 
-            var aniListener = function () {
-              var _a, _b;
+  var renderPolygonBase = 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 createPortal(children, divElement);
+  }, []);
+  return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
+    position: polygonStart,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React.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 = __rest(_a, ["children"]);
+      options = __rest(_a, ["children"]); //controller
+
+
+  var controller = useMintMapController(); //lifecycle
 
-  var controller = useMintMapController();
   useEffect(function () {
     return function () {
       if (polygonRef.current) {
+        // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
       }
     };
-  }, []);
+  }, []); //create/update object
+
   var polygonRef = useRef();
   useEffect(function () {
+    //console.log('Polygon useEffect')
     if (options) {
       if (polygonRef.current) {
+        //console.log('update Polygon', options)
         controller.updatePolygon(polygonRef.current, options);
       } else {
         var polygon = new Polygon(options);
-        polygonRef.current = polygon;
+        polygonRef.current = polygon; //console.log('create Polygon', options)
+
         controller.createPolygon(polygon);
       }
     }
@@ -3176,11 +4620,13 @@ function MapBuildingProjection(props) {
   var wallPolygons = useRef();
   var titlePosition = useRef();
   useEffect(function () {
+    //베이스 폴리곤
     var base = {
       position: basePolygonPath
     };
     var height = numberOfFloor * heightOfFloor;
-    var projectionHeight = GeoCalulator.convertMeterToLatitudeValue(height);
+    var projectionHeight = GeoCalulator.convertMeterToLatitudeValue(height); //roof
+
     var roofPaths = [];
 
     for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
@@ -3190,7 +4636,8 @@ function MapBuildingProjection(props) {
 
     roofPolygon.current = {
       position: roofPaths
-    };
+    }; //walls
+
     wallPolygons.current = [];
 
     for (var i = 0; i < basePolygonPath.length; i++) {
@@ -3201,13 +4648,14 @@ function MapBuildingProjection(props) {
       wallPolygons.current.push({
         position: [start, startNext, endNext, end]
       });
-    }
+    } //latitude 기준으로 배열 재정렬
+
 
     wallPolygons.current.sort(function (a, b) {
       var maxA = getMaxLat(a.position);
       var maxB = getMaxLat(b.position);
       return maxA.lat < maxB.lat ? 1 : -1;
-    });
+    }); //latitude 가장 높은값과 longitude 중간값으로 타이틀 위치 결정
 
     if (title || titleElement) {
       var maxPos = getMaxLat(wallPolygons.current[0].position);
@@ -3269,135 +4717,247 @@ function MapBuildingProjection(props) {
   }, "".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.bind(styles$2);
+function PointLoading(_a) {
+  var _b = _a.text,
+      text = _b === void 0 ? 'Loading' : _b,
+      _c = _a.pointCount,
+      pointCount = _c === void 0 ? 4 : _c,
+      _d = _a.speedMs,
+      speedMs = _d === void 0 ? 200 : _d;
+  var pointStringPool = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+    return Array.from(Array(idx + 1)).map(function () {
+      return '.';
+    }).join('');
+  }))[0];
 
-        if (inc.itemList && inc.itemList.length > 0) {
-          curr.incList.push(inc);
+  var _e = useState(''),
+      pointString = _e[0],
+      setPointString = _e[1];
 
-          (_a = curr.itemList).push.apply(_a, inc.itemList);
+  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.createElement("div", {
+    className: cn$1('loading-point-container')
+  }, React.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 = useState(),
+      width = _c[0],
+      setWidth = _c[1];
 
-var calculateAverage = function (nums) {
-  var sum = 0;
+  var _d = 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 = 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.createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, Array.from(Array(col)).map(function () {
+        var duration = Number((Math.random() * 4).toFixed(1)) + 1;
+        var delay = Number((Math.random() * 4).toFixed(1)) + 2;
+        return React.createElement(LoadingImage, {
+          size: size,
+          duration: duration,
+          delay: delay
+        });
+      }));
+    });
+  }, [width, height]);
+  return React.createElement("div", {
+    ref: function (refs) {
+      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
+      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
+    },
+    style: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, render);
+}
+
+function LoadingImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b,
+      _c = _a.duration,
+      duration = _c === void 0 ? 1 : _c,
+      _d = _a.delay,
+      delay = _d === void 0 ? 1 : _d;
+  var scale = 256 / 4000;
+  return React.createElement("svg", {
+    className: cn$1("ani-fade-in"),
+    style: {
+      flex: "0 0 ".concat(size, "px"),
+      opacity: 0,
+      animationDelay: "".concat(delay, "s"),
+      animationDuration: "".concat(duration, "s"),
+      animationFillMode: 'forwards'
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("g", {
+    transform: "scale(".concat(scale, ")"),
+    "clip-path": "url(#clip0_5_701)"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    transform: "translate(0 4000) rotate(-90)",
+    fill: "#F8F8F8"
+  }), React.createElement("path", {
+    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+    fill: "#F6E4DD"
+  }), React.createElement("path", {
+    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "958",
+    cy: "3092",
+    r: "95",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "1127",
+    cy: "3176",
+    r: "56",
+    fill: "#A2CAEE"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
+    fill: "#FBEDB1"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
+    fill: "#FBEDB1"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_5_701"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    fill: "white",
+    transform: "translate(0 4000) rotate(-90)"
+  }))));
+}
 
 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"};
@@ -3446,6 +5006,14 @@ var getAlignPosition = function (value, align) {
 
   throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 
 function MapControlWrapper(_a) {
   var _b = _a.width,
@@ -3468,26 +5036,40 @@ function MapControlWrapper(_a) {
   }, children);
 }
 
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapPolylineWrapper(_a) {
   var children = _a.children,
-      options = __rest(_a, ["children"]);
+      options = __rest(_a, ["children"]); //controller
+
+
+  var controller = useMintMapController(); //lifecycle
 
-  var controller = useMintMapController();
   useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current);
+        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
       }
     };
-  }, []);
+  }, []); //create/update object
+
   var polylineRef = useRef();
   useEffect(function () {
+    //console.log('Polyline useEffect')
     if (options) {
       if (polylineRef.current) {
+        //console.log('update Polyline', options)
         controller.updatePolyline(polylineRef.current, options);
       } else {
         var polyline = new Polyline(options);
-        polylineRef.current = polyline;
+        polylineRef.current = polyline; //console.log('create Polyline', options)
+
         controller.createPolyline(polyline);
       }
     }
@@ -3499,10 +5081,19 @@ var console$1 = {
   log: function () {
   }
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapCanvasWrapper(_a) {
   var children = _a.children;
       __rest(_a, ["children"]);
-  var controller = useMintMapController();
+
+  var controller = useMintMapController(); //render switch
 
   var _b = useState(false),
       renderFlag = _b[0],
@@ -3510,18 +5101,28 @@ function MapCanvasWrapper(_a) {
 
   var invokeRender = useCallback(function () {
     setRenderFlag(!renderFlag);
-  }, []);
-  var renderer = useRef();
-  var containerRef = useRef(null);
-  var canvasRef = useRef(null);
-  var contextRef = useRef();
+  }, []); //canvas renderer
+
+  var renderer = useRef(); //canvas container ref
+
+  var containerRef = useRef(null); //canvas ref
+
+  var canvasRef = useRef(null); //canvas context
+
+  var contextRef = useRef(); //clear rect
+
   var clearRect = useCallback(function () {
     if (contextRef.current && canvasRef.current) {
       contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
     }
 
     return true;
-  }, []);
+  }, []); //offset values
+  // const offsetProvider = useRef(new Offset(0, 0))
+  // const prevX = useRef(0)
+  // const prevY = useRef(0)
+  //scaling
+
   var scaleCanvas = useCallback(function (containerRef, canvasElement, canvasContext) {
     var devicePixelRatio = window.devicePixelRatio;
     var width = containerRef.offsetWidth;
@@ -3531,7 +5132,16 @@ function MapCanvasWrapper(_a) {
     canvasElement.style.width = "".concat(width, "px");
     canvasElement.style.height = "".concat(height, "px");
     canvasContext.scale(devicePixelRatio, devicePixelRatio);
-  }, []);
+  }, []); //init transform
+  // const initTransform = useCallback(()=>{
+  //   offsetProvider.current.x = 0
+  //   offsetProvider.current.y = 0
+  //   containerRef.current && (containerRef.current.style.transform = `translate(0px, 0px)`)
+  //   console.log('initTransform');
+  //   return true
+  // }, [])
+  //parse click param
+
   var parseClickParamToPosition = useCallback(function (mapType, e) {
     var latlng = e.latlng || e.latLng;
 
@@ -3555,15 +5165,17 @@ function MapCanvasWrapper(_a) {
     }
 
     return clickPosition;
-  }, []);
+  }, []); //box includes
 
   var includes = function (point, targetPoint, width, height) {
+    // console.log('includes', point, targetPoint, width, height);
     if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
       return true;
     }
 
     return false;
-  };
+  }; //process mouse event
+
 
   var processMouseEvent = useCallback(function (clickedOffset, eventName) {
     var items = renderItemsOnView.current;
@@ -3577,9 +5189,10 @@ function MapCanvasWrapper(_a) {
 
         if (!event_1) {
           continue;
-        }
+        } //includes check
 
-        var pos = item.position;
+
+        var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
 
         if (pos && !pos.offset) {
           pos.offset = controller.positionToOffset(pos);
@@ -3587,61 +5200,92 @@ function MapCanvasWrapper(_a) {
 
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
           continue;
-        }
+        } // const propagation = 
+
 
         event_1(clickedOffset);
-        hitSet.add(item);
-        break;
+        hitSet.add(item); // if(eventName === 'onMouseOver' || propagation === false){
+
+        break; // }
       }
     }
 
     return hitSet;
-  }, []);
+  }, []); //initialize
+
   useEffect(function () {
     var resizeObserver;
 
     if (canvasRef.current && containerRef.current) {
       resizeObserver = new ResizeObserver(function (entries) {
         var elem = entries[0];
-        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current); // initTransform()
+
         renderMain();
       });
       resizeObserver.observe(containerRef.current);
       var map = controller.getMap();
 
       if (map) {
+        // const center = controller.getCenter()
+        // center.offset = controller.positionToOffset(center)
+        // if(center.offset){
+        //   prevX.current = center.offset.x
+        //   prevY.current = center.offset.y
+        // }
+        //naver 전용 이벤트 'zooming' 일때 캔버스 클리어처리
+        //@ts-ignore
         map.addListener('zooming', function () {
           clearRect();
-        });
+        }); //kakao 전용 이벤트 'zoom_start' 일때 캔버스 클리어처리
+        //@ts-ignore
+
         map.addListener('zoom_start', function () {
           clearRect();
-        });
+        }); //@ts-ignore
+
         map.addListener('center_changed', function () {
 
           if (containerRef.current) {
+            // const pos = controller.getCenter()
+            // pos.offset = controller.positionToOffset(pos)
+            // const deltaX = prevX.current - pos.offset.x
+            // const deltaY = prevY.current - pos.offset.y
+            // offsetProvider.current.x += deltaX
+            // offsetProvider.current.y += deltaY
+            // prevX.current = pos.offset.x
+            // prevY.current = pos.offset.y
+            // containerRef.current.style.transform = `translate(${offsetProvider.current.x}px, ${offsetProvider.current.y}px)`
             containerRef.current.style.visibility = 'hidden';
           }
-        });
+        }); //@ts-ignore
+
         map.addListener('idle', function () {
 
           if (containerRef.current) {
             containerRef.current.style.visibility = '';
           }
 
-          clearRect();
+          clearRect(); // contextRef.current?.translate(offsetProvider.current.x, offsetProvider.current.y)
+          // initTransform()
+
           invokeRender();
-        });
+        }); //@ts-ignore
+
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition);
-          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
+
           renderItemsMouseOverStatus.current.forEach(function (item) {
             if (!hitSet.has(item)) {
               item.onMouseOut && item.onMouseOut(clickedOffset);
             }
           });
           renderItemsMouseOverStatus.current = hitSet;
-        });
+        }); //@ts-ignore
+
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
           var clickedOffset = controller.positionToOffset(clickPosition);
@@ -3660,14 +5304,18 @@ function MapCanvasWrapper(_a) {
     return function () {
       resizeObserver && resizeObserver.disconnect();
     };
-  }, []);
+  }, []); //items setting
+
   var renderItems = useRef([]);
   var renderItemsOnView = useRef([]);
   var renderItemsMouseOverStatus = useRef(new Set());
   useEffect(function () {
     renderItems.current = (Array.isArray(children) ? children : children ? [children] : []).map(function (item) {
       return item.props;
-    });
+    }); //draw 를 위한 정렬 조건
+    //1. zIndex 가 있는 것들 끼리 정렬처리
+    //2. zIndex 가 없는 것들은 원래 배열 순서대로
+
     var zIndexList = [];
     var undefinedList = [];
 
@@ -3687,16 +5335,19 @@ function MapCanvasWrapper(_a) {
     }).forEach(function (item) {
       renderItems.current.push(item);
     });
-  }, [children]);
+  }, [children]); //rendering main
+
   var renderMain = useCallback(function () {
     var ctx = contextRef.current;
     var container = containerRef.current;
 
     if (!ctx || !container || !renderer.current) {
       return;
-    }
+    } //all clear
+
+
+    clearRect(); //draw
 
-    clearRect();
     var t = new Date().getTime();
     var items = renderItems.current;
     renderItemsOnView.current.length = 0;
@@ -3706,7 +5357,8 @@ function MapCanvasWrapper(_a) {
       var item = items_1[_i];
 
       if (item.visible === undefined || item.visible) {
-        var pos = item.position;
+        var pos = item.position; //위치 변환
+
         pos.offset = controller.positionToOffset(pos);
 
         if (item.anchor) {
@@ -3718,7 +5370,8 @@ function MapCanvasWrapper(_a) {
 
         if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
           continue;
-        }
+        } //그리기
+
 
         item.renderer(renderer.current, pos.offset, item.payload);
         renderItemsOnView.current.push(item);
@@ -3732,7 +5385,8 @@ function MapCanvasWrapper(_a) {
       }
     });
     console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
-  }, []);
+  }, []); //render!!!
+
   renderMain();
   return React.createElement("div", {
     ref: containerRef,
@@ -3751,8 +5405,17 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
 
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapCanvasMarkerWrapper(_props) {
+  //실제 렌더링처리는 MapCanvasWrapper 에서...
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, getClusterInfo, useMarkerMoving, useMintMapController, waiting };