@mint-ui/map 0.5.11-beta → 0.6.0-beta

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -7,6 +7,7 @@ export declare abstract class MintMapController {
     abstract type: MapType;
     abstract map: MapVendorType | null;
     abstract scriptUrl: string;
+    abstract scriptModules: string[];
     abstract initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
     abstract destroyMap(): void;
     abstract loadMapApi(): Promise<boolean>;

package/dist/components/mint-map/core/MintMapController.js

@@ -124,7 +124,7 @@ function () {
     var params = Object.entries(param).map(function (_a) {
       var key = _a[0],
           value = _a[1];
-      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      var temp = Array.isArray(value) ? value.join(',') : value;
       return "".concat(key, "=").concat(temp);
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);

package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.js

@@ -32,7 +32,8 @@ function SVGCircle(_a) {
     pointerEvents: "none",
     width: boxSize,
     height: boxSize,
-    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize),
+    overflow: 'visible'
   }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
     pointerEvents: "visiblepainted",
     cx: radius,

package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.js

@@ -37,7 +37,8 @@ function SVGRect(_a) {
     pointerEvents: "none",
     width: width,
     height: height,
-    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight),
+    overflow: 'visible'
   }, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
     pointerEvents: "visiblepainted",
     x: "0",

package/dist/components/mint-map/core/wrapper/MapControlWrapper.d.ts

@@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
 declare type AlignHorizontal = 'left' | 'right' | 'center';
 declare type AlignVertical = 'top' | 'bottom' | 'center';
 export interface MapControlWrapperProps {
-    width?: number | string;
-    height?: number | string;
+    width?: string | number;
+    height?: string | number;
     positionHorizontal?: AlignHorizontal;
     positionVertical?: AlignVertical;
 }

package/dist/components/mint-map/core/wrapper/MapControlWrapper.js

@@ -12,48 +12,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 var cn = classNames__default["default"].bind(MintMapWrapper_module);
-
-var getSizeString = function (size) {
-  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
-};
-
-var getAlignPosition = function (value, align) {
-  if (typeof value === 'string') {
-    var trimmed = value.replace(/ /g, '');
-    console.log('trimmed:', trimmed);
-    var isPercent = trimmed.endsWith('%');
-
-    if (!isPercent && !trimmed.endsWith('px')) {
-      throw new Error("Size [".concat(value, "] is not valid string value."));
-    }
-
-    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
-    var unit = isPercent ? '%' : 'px';
-    var numberValue = Number(numberPart);
-
-    if (isNaN(numberValue)) {
-      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
-    }
-
-    if (align === 'center') {
-      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(numberValue).concat(unit, ")");
-    } else {
-      return '0px';
-    }
-  } else if (typeof value === 'number') {
-    if (align === 'center') {
-      return "calc(50% - ".concat(value / 2, "px)");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(value, "px)");
-    } else {
-      return '0px';
-    }
-  }
-
-  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
-};
 /**
  * Mint Map 컴포넌트
  *
@@ -62,26 +20,29 @@ var getAlignPosition = function (value, align) {
  * @returns {JSX.Element} JSX
  */
 
-
 function MapControlWrapper(_a) {
   var _b = _a.width,
-      width = _b === void 0 ? 100 : _b,
+      width = _b === void 0 ? 'fit-content' : _b,
       _c = _a.height,
-      height = _c === void 0 ? 40 : _c,
+      height = _c === void 0 ? 'fit-content' : _c,
       _d = _a.positionHorizontal,
       positionHorizontal = _d === void 0 ? 'left' : _d,
       _e = _a.positionVertical,
       positionVertical = _e === void 0 ? 'top' : _e,
       children = _a.children;
   return React__default["default"].createElement("div", {
+    className: cn('mint-map-control-wrapper-container'),
+    style: {
+      justifyContent: positionHorizontal === 'center' ? 'center' : positionHorizontal === 'right' ? 'flex-end' : 'flex-start',
+      alignItems: positionVertical === 'center' ? 'center' : positionVertical === 'bottom' ? 'flex-end' : 'flex-start'
+    }
+  }, React__default["default"].createElement("div", {
     className: cn('mint-map-control-wrapper'),
     style: {
-      width: getSizeString(width),
-      height: getSizeString(height),
-      left: getAlignPosition(width, positionHorizontal),
-      top: getAlignPosition(height, positionVertical)
+      width: width,
+      height: height
     }
-  }, children);
+  }, children));
 }
 
 exports.MapControlWrapper = MapControlWrapper;

package/dist/components/mint-map/core/wrapper/MintMapWrapper.module.scss.js

@@ -6,8 +6,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
 
-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"};
+var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  pointer-events: auto;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
 styleInject__default["default"](css_248z);
 
 module.exports = styles;

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -16,6 +16,8 @@ function (_super) {
   tslib.__extends(GoogleMintMapController, _super);
 
   function GoogleMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'google';
@@ -42,9 +44,14 @@ function (_super) {
 
     };
 
-    _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
     //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
 
+
     _this.mapEvent.ZOOMSTART = 'zoom_changed';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -17,6 +17,8 @@ function (_super) {
   tslib.__extends(KakaoMintMapController, _super);
 
   function KakaoMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'kakao';
@@ -30,7 +32,12 @@ function (_super) {
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
-    _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //kakao only 이벤트이름 재정의 zoom_start
+
 
     _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -17,6 +17,8 @@ function (_super) {
   tslib.__extends(NaverMintMapController, _super);
 
   function NaverMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'naver';
@@ -30,7 +32,12 @@ function (_super) {
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
-    _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
 
     _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);

package/dist/components/mint-map/types/MintMapProps.d.ts

@@ -15,6 +15,11 @@ export interface MintMapProps extends MintMapEvents {
      * @description 각 지도 타입에 맞는 키를 입력해야한다.
      */
     mapKey: string;
+    /**
+     * Map Script 로드시에 지도 타입에 따라 로드할 서브 모듈 목록
+     * @description 각 지도 타입에 맞는 서브모듈을 지정해야한다.
+     */
+    scriptModules?: string[];
     /**
        * Map 종류에 따른 추가 맵 ID
        * @description 특정 지도에서는 맵ID 가 추가로 요구된다 (ex: Google Maps)

package/dist/index.es.js

@@ -1149,7 +1149,7 @@ function () {
     var params = Object.entries(param).map(function (_a) {
       var key = _a[0],
           value = _a[1];
-      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      var temp = Array.isArray(value) ? value.join(',') : value;
       return "".concat(key, "=").concat(temp);
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
@@ -1457,6 +1457,8 @@ function (_super) {
   __extends(NaverMintMapController, _super);
 
   function NaverMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'naver';
@@ -1470,7 +1472,12 @@ function (_super) {
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
-    _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
 
     _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);
@@ -2181,6 +2188,8 @@ function (_super) {
   __extends(GoogleMintMapController, _super);
 
   function GoogleMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'google';
@@ -2207,9 +2216,14 @@ function (_super) {
 
     };
 
-    _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
     //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
 
+
     _this.mapEvent.ZOOMSTART = 'zoom_changed';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);
@@ -2865,6 +2879,8 @@ function (_super) {
   __extends(KakaoMintMapController, _super);
 
   function KakaoMintMapController(props) {
+    var _a;
+
     var _this = _super.call(this, props) || this;
 
     _this.type = 'kakao';
@@ -2878,7 +2894,12 @@ function (_super) {
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
-    _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+    _this.eventMap = new Map(); //scriptModules 병합
+
+    if (props.scriptModules) {
+      (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+    } //kakao only 이벤트이름 재정의 zoom_start
+
 
     _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 
@@ -3725,7 +3746,8 @@ function SVGCircle(_a) {
     pointerEvents: "none",
     width: boxSize,
     height: boxSize,
-    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize),
+    overflow: 'visible'
   }, svgProperties), React.createElement("circle", __assign({
     pointerEvents: "visiblepainted",
     cx: radius,
@@ -3984,7 +4006,8 @@ function SVGRect(_a) {
     pointerEvents: "none",
     width: width,
     height: height,
-    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight),
+    overflow: 'visible'
   }, svgProperties), React.createElement("rect", __assign({
     pointerEvents: "visiblepainted",
     x: "0",
@@ -5067,53 +5090,11 @@ function LoadingImage(_a) {
   }))));
 }
 
-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"};
+var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  pointer-events: auto;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
 styleInject(css_248z);
 
 var cn = classNames.bind(styles);
-
-var getSizeString = function (size) {
-  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
-};
-
-var getAlignPosition = function (value, align) {
-  if (typeof value === 'string') {
-    var trimmed = value.replace(/ /g, '');
-    console.log('trimmed:', trimmed);
-    var isPercent = trimmed.endsWith('%');
-
-    if (!isPercent && !trimmed.endsWith('px')) {
-      throw new Error("Size [".concat(value, "] is not valid string value."));
-    }
-
-    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
-    var unit = isPercent ? '%' : 'px';
-    var numberValue = Number(numberPart);
-
-    if (isNaN(numberValue)) {
-      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
-    }
-
-    if (align === 'center') {
-      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(numberValue).concat(unit, ")");
-    } else {
-      return '0px';
-    }
-  } else if (typeof value === 'number') {
-    if (align === 'center') {
-      return "calc(50% - ".concat(value / 2, "px)");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(value, "px)");
-    } else {
-      return '0px';
-    }
-  }
-
-  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
-};
 /**
  * Mint Map 컴포넌트
  *
@@ -5122,26 +5103,29 @@ var getAlignPosition = function (value, align) {
  * @returns {JSX.Element} JSX
  */
 
-
 function MapControlWrapper(_a) {
   var _b = _a.width,
-      width = _b === void 0 ? 100 : _b,
+      width = _b === void 0 ? 'fit-content' : _b,
       _c = _a.height,
-      height = _c === void 0 ? 40 : _c,
+      height = _c === void 0 ? 'fit-content' : _c,
       _d = _a.positionHorizontal,
       positionHorizontal = _d === void 0 ? 'left' : _d,
       _e = _a.positionVertical,
       positionVertical = _e === void 0 ? 'top' : _e,
       children = _a.children;
   return React.createElement("div", {
+    className: cn('mint-map-control-wrapper-container'),
+    style: {
+      justifyContent: positionHorizontal === 'center' ? 'center' : positionHorizontal === 'right' ? 'flex-end' : 'flex-start',
+      alignItems: positionVertical === 'center' ? 'center' : positionVertical === 'bottom' ? 'flex-end' : 'flex-start'
+    }
+  }, React.createElement("div", {
     className: cn('mint-map-control-wrapper'),
     style: {
-      width: getSizeString(width),
-      height: getSizeString(height),
-      left: getAlignPosition(width, positionHorizontal),
-      top: getAlignPosition(height, positionVertical)
+      width: width,
+      height: height
     }
-  }, children);
+  }, children));
 }
 
 /**

package/dist/index.umd.js

@@ -1153,7 +1153,7 @@
       var params = Object.entries(param).map(function (_a) {
         var key = _a[0],
             value = _a[1];
-        var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+        var temp = Array.isArray(value) ? value.join(',') : value;
         return "".concat(key, "=").concat(temp);
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
@@ -1461,6 +1461,8 @@
     tslib.__extends(NaverMintMapController, _super);
 
     function NaverMintMapController(props) {
+      var _a;
+
       var _this = _super.call(this, props) || this;
 
       _this.type = 'naver';
@@ -1474,7 +1476,12 @@
       _this.polygonEvents = ['mouseover', 'mouseout'];
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragged = false;
-      _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+      _this.eventMap = new Map(); //scriptModules 병합
+
+      if (props.scriptModules) {
+        (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+      } //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
 
       _this.mapUIEvent.CONTEXTMENU = 'rightclick';
       Object.freeze(_this.mapEvent);
@@ -2185,6 +2192,8 @@
     tslib.__extends(GoogleMintMapController, _super);
 
     function GoogleMintMapController(props) {
+      var _a;
+
       var _this = _super.call(this, props) || this;
 
       _this.type = 'google';
@@ -2211,9 +2220,14 @@
 
       };
 
-      _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+      _this.eventMap = new Map(); //scriptModules 병합
+
+      if (props.scriptModules) {
+        (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+      } //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
       //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
 
+
       _this.mapEvent.ZOOMSTART = 'zoom_changed';
       Object.freeze(_this.mapEvent);
       Object.freeze(_this.mapUIEvent);
@@ -2869,6 +2883,8 @@
     tslib.__extends(KakaoMintMapController, _super);
 
     function KakaoMintMapController(props) {
+      var _a;
+
       var _this = _super.call(this, props) || this;
 
       _this.type = 'kakao';
@@ -2882,7 +2898,12 @@
       _this.polygonEvents = ['mouseover', 'mouseout'];
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragged = false;
-      _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+      _this.eventMap = new Map(); //scriptModules 병합
+
+      if (props.scriptModules) {
+        (_a = _this.scriptModules).push.apply(_a, props.scriptModules);
+      } //kakao only 이벤트이름 재정의 zoom_start
+
 
       _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 
@@ -3729,7 +3750,8 @@
       pointerEvents: "none",
       width: boxSize,
       height: boxSize,
-      viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+      viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize),
+      overflow: 'visible'
     }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
       pointerEvents: "visiblepainted",
       cx: radius,
@@ -3988,7 +4010,8 @@
       pointerEvents: "none",
       width: width,
       height: height,
-      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight),
+      overflow: 'visible'
     }, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
       pointerEvents: "visiblepainted",
       x: "0",
@@ -5071,53 +5094,11 @@
     }))));
   }
 
-  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"};
+  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  pointer-events: auto;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+  var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
   styleInject__default["default"](css_248z);
 
   var cn = classNames__default["default"].bind(styles);
-
-  var getSizeString = function (size) {
-    return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
-  };
-
-  var getAlignPosition = function (value, align) {
-    if (typeof value === 'string') {
-      var trimmed = value.replace(/ /g, '');
-      console.log('trimmed:', trimmed);
-      var isPercent = trimmed.endsWith('%');
-
-      if (!isPercent && !trimmed.endsWith('px')) {
-        throw new Error("Size [".concat(value, "] is not valid string value."));
-      }
-
-      var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
-      var unit = isPercent ? '%' : 'px';
-      var numberValue = Number(numberPart);
-
-      if (isNaN(numberValue)) {
-        throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
-      }
-
-      if (align === 'center') {
-        return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
-      } else if (align === 'right' || align === 'bottom') {
-        return "calc(100% - ".concat(numberValue).concat(unit, ")");
-      } else {
-        return '0px';
-      }
-    } else if (typeof value === 'number') {
-      if (align === 'center') {
-        return "calc(50% - ".concat(value / 2, "px)");
-      } else if (align === 'right' || align === 'bottom') {
-        return "calc(100% - ".concat(value, "px)");
-      } else {
-        return '0px';
-      }
-    }
-
-    throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
-  };
   /**
    * Mint Map 컴포넌트
    *
@@ -5126,26 +5107,29 @@
    * @returns {JSX.Element} JSX
    */
 
-
   function MapControlWrapper(_a) {
     var _b = _a.width,
-        width = _b === void 0 ? 100 : _b,
+        width = _b === void 0 ? 'fit-content' : _b,
         _c = _a.height,
-        height = _c === void 0 ? 40 : _c,
+        height = _c === void 0 ? 'fit-content' : _c,
         _d = _a.positionHorizontal,
         positionHorizontal = _d === void 0 ? 'left' : _d,
         _e = _a.positionVertical,
         positionVertical = _e === void 0 ? 'top' : _e,
         children = _a.children;
     return React__default["default"].createElement("div", {
+      className: cn('mint-map-control-wrapper-container'),
+      style: {
+        justifyContent: positionHorizontal === 'center' ? 'center' : positionHorizontal === 'right' ? 'flex-end' : 'flex-start',
+        alignItems: positionVertical === 'center' ? 'center' : positionVertical === 'bottom' ? 'flex-end' : 'flex-start'
+      }
+    }, React__default["default"].createElement("div", {
       className: cn('mint-map-control-wrapper'),
       style: {
-        width: getSizeString(width),
-        height: getSizeString(height),
-        left: getAlignPosition(width, positionHorizontal),
-        top: getAlignPosition(height, positionVertical)
+        width: width,
+        height: height
       }
-    }, children);
+    }, children));
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.5.11-beta",
+  "version": "0.6.0-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",