@mint-ui/map 2.1.1-alpha1

package/.eslintrc.js

@@ -0,0 +1,110 @@
+module.exports = {
+	env: {
+		browser: true,
+		node: true
+	},
+	extends: [ 'airbnb', 'airbnb/hooks', 'eslint:recommended', 'plugin:react/recommended', 'plugin:import/recommended', 'plugin:storybook/recommended' ],
+	ignorePatterns: [ '.storybook', '*.d.ts', 'node_modules', 'build', 'dist', '**/env/*.js' ],
+	overrides: [
+		{
+			files: [ '*.ts', '*.tsx' ],
+			rules: { 'no-undef': 'off' }
+		}
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: { warnOnUnsupportedTypeScriptVersion: false },
+	plugins: [ '@typescript-eslint', 'sort-keys-fix', 'prettier' ],
+	rules: {
+		'@typescript-eslint/ban-ts-comment': [
+			'error',
+			{ 'ts-ignore': 'allow-with-description' }
+		],
+		'@typescript-eslint/no-explicit-any': 'warn',
+		'@typescript-eslint/no-unused-vars': 'error',
+		'array-bracket-spacing': [
+			'error',
+			'always',
+			{
+				arraysInArrays: false,
+				objectsInArrays: false
+			}
+		],
+		'brace-style': [ 'error', 'allman' ],
+		'class-methods-use-this': 'off',
+		'comma-dangle': [ 'error', 'never' ],
+		'eol-last': [ 'error', 'never' ],
+		'import/extensions': 'off',
+		'import/named': 'off',
+		'import/no-anonymous-default-export': 'off',
+		'import/no-cycle': 'off',
+		'import/no-extraneous-dependencies': 'off',
+		'import/no-named-as-default': 'off',
+		'import/no-unresolved': 'off',
+		'import/order': [
+			'error',
+			{
+				alphabetize: {
+					caseInsensitive: true,
+					order: 'asc'
+				},
+				groups: [ 'external', 'builtin', 'internal', 'sibling', 'parent', 'index' ],
+				'newlines-between': 'always'
+			}
+		],
+		indent: [ 'error', 'tab', { SwitchCase: 1 }],
+		'jsx-a11y/control-has-associated-label': 'off',
+		'jsx-quotes': [ 'error', 'prefer-single' ],
+		'linebreak-style': 'off',
+		'max-len': 'off',
+		'no-console': 'off',
+		'no-plusplus': 'off',
+		'no-restricted-exports': 'off',
+		'no-tabs': [ 'error', { allowIndentationTabs: true }],
+		'no-unused-vars': 'off',
+		'object-curly-newline': [ 'error', {
+			ExportDeclaration: 'never',
+			ImportDeclaration: 'never',
+			ObjectExpression: {
+				minProperties: 3,
+				multiline: true
+			},
+			ObjectPattern: { multiline: true }
+		}],
+		'react-hooks/exhaustive-deps': 'off',
+		'react/button-has-type': 'off',
+		'react/destructuring-assignment': 'off',
+		'react/function-component-definition': 'off',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{
+				children: 'never',
+				props: 'never'
+			}
+		],
+		'react/jsx-filename-extension': 'off',
+		'react/jsx-indent': [ 'error', 'tab' ],
+		'react/jsx-indent-props': [ 2, 'tab' ],
+		'react/jsx-props-no-spreading': 'off',
+		'react/jsx-sort-props': [
+			'error',
+			{
+				callbacksLast: true,
+				ignoreCase: true,
+				multiline: 'last',
+				noSortAlphabetically: false,
+				reservedFirst: false,
+				shorthandFirst: false,
+				shorthandLast: true
+			}
+		],
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'react/require-default-props': 'off',
+		'require-jsdoc': 'off',
+		'sort-keys-fix/sort-keys-fix': 'error'
+	},
+	settings: {
+		'import/parsers': { '@typescript-eslint/parser': [ '.ts', '.tsx', '.js' ] },
+		react: { version: 'detect' }
+	}
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 itcode.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+<p align="center">
+	<a href="https://github.com/dev-rsquare/mint-ui-map" target="_blank" align="center">
+		<img src="https://user-images.githubusercontent.com/50317129/172516374-5d27ea5b-9657-4772-8351-1beedcabedef.png" width="256" height="256" />
+	</a>
+</p>
+
+<h1 align="center">@mint-ui/map</h1>
+
+- **@mint-ui**의 맵 라이브러리입니다.
+- TypeScript, SCSS 기반
+- 빌더로 rollup.js를 활용합니다.
+  - `CJS`
+  - `ESM`
+  - `UMD`
+- Storybook으로 컴포넌트 확인 및 테스트를 수행합니다.
+
+<br />
+
+## Guide for Develop
+
+### 1. Setup
+
+``` bash
+git clone https://github.com/dev-rsquare/mint-ui-map
+
+cd ./mint-ui-map
+
+# install dependencies
+yarn
+npm install
+```
+
+- 레포지토리를 클론합니다.
+- dependencies 설치를 수행합니다.
+  - 해당 프로젝트는 `yarn`을 권장합니다.
+
+### 2. Structure
+
+``` bash
+# ref 2022.06.08
+@mint-ui/map
+├── .storybook
+│	├── main.js # storybook configure
+│	├── preview.js
+├── dist # output
+├── node_modules # dependencies
+├── src # source root
+│	├── [dir]
+│	│	├── [component].tsx # component core
+│	│	├── [component].stories.tsx # storybook for component
+│	│	├── [component].module.scss # scss for component
+│	│	└── index.ts
+│	├── declaration.d.ts # module for *.module.scss
+│	└── index.ts # main script
+├── .eslintrs.js # eslint configure
+├── .gitignore
+├── .npmignore # file list to ignore when deploying
+├── LICENSE
+├── package.json
+├── README.md
+├── rollup.config.js # rollup.js configure
+└── tsconfig.json
+```
+
+- `src/` 폴더 하위에 코드를 작성합니다.
+- 빌드 결과물은 `dist/`에 출력되도록 설정되어 있습니다.
+- rollup.js 설정 및 플러그인 추가는 `rollup.config.js`를 참조하세요.
+- 레포지토리와 별개로, npm 배포 시 제외할 파일은 `.npmignore`에 추가해주세요.
+- ESLint 설정은 제 개인적인 주관이 매우 많이 포함되어 있습니다.
+  - 필요한 설정은 적절한 협의 후 `.eslintrc.js`에 추가합니다.
+
+### 3. Storybook Test
+
+![image](https://user-images.githubusercontent.com/50317129/172540696-533e0fa5-cf91-4099-8820-a1e9b3dd145c.png)
+
+``` bash
+yarn storybool
+```
+
+- 위 명령어를 통해 Storybook을 실행할 수 있습니다.
+- Storybook에서 컴포넌트를 미리 확인하고, 프로퍼티별 옵션을 테스트할 수 있습니다.
+
+### 4. Build
+
+``` js
+/**
+ * Rollup 설정 모듈
+ *
+ * @author RWB
+ * @since 2022.06.06 Mon 17:44:31
+ */
+
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+const extensions = [ 'js', 'jsx', 'ts', 'tsx', 'mjs' ];
+
+const pkg = require('./package.json');
+
+const config = [
+	{
+		external: [ /node_modules/ ],
+		input: './src/index.ts',
+		output: [
+			{
+				dir: './dist',
+				format: 'cjs',
+				preserveModules: true,
+				preserveModulesRoot: 'src'
+			},
+			{
+				file: pkg.module,
+				format: 'es'
+			},
+			{
+				file: pkg.browser,
+				format: 'umd',
+				name: pkg.name
+			}
+		],
+		plugins: [
+			nodeResolve({ extensions }),
+			commonjs({ include: 'node_modules/**' }),
+			peerDepsExternal(),
+			babel({
+				exclude: 'node_modules/**',
+				extensions,
+				include: [ 'src/**/*' ]
+			}),
+			typescript({ tsconfig: './tsconfig.json' }),
+			postcss({
+				extract: false,
+				inject: (cssVariableName) => `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`,
+				modules: true,
+				sourceMap: false,
+				use: [ 'sass' ]
+			})
+		]
+	}
+];
+
+export default config;
+```
+
+- Rollup 빌드 설정은 위와 같습니다. (2022.06.08 기준)
+  - `@rollup/plugin-babel` - Rollup.js에 Babel을 연동해줍니다.
+  - `@rollup/plugin-commonjs` - ESM 코드를 CommonJS로 변환합니다.
+    - 반드시 `@rollup/plugin-babel` 이후에 위치해야합니다.
+  - `@rollup/plugin-node-resolve` - 외부 모듈을 사용할 수 있도록 구성합니다.
+  - `rollup-plugin-peer-deps-external` - `pacakge.json`의 `peerDependencies`를 번들링하지 않고 `import` 구문으로 호출합니다.
+  - `rollup-plugin-postcss` - postcss 후처리기를 사용합니다. 
+- `src/index.ts`를 기준으로 빌드를 수행합니다.
+  - 빌드 결과물은 `dist/`에 출력됩니다.
+  - `CJS`, `ESM`, `UMD` 세 가지 모듈로 출력됩니다.
+  - `CJS`는 Tree Shaking이 적용됩니다.
+
+``` bash
+yarn build
+```
+
+- 빌드 명령어는 위와 같습니다.
+
+### 5. publish
+
+``` json
+{
+	"name": "@mint-ui/map",
+	"version": "1.0.0",
+	"main": "./dist/index.js",
+	"module": "./dist/index.es.js",
+	"browser": "./dist/index.umd.js",
+	"types": "./dist/index.d.ts",
+	"private": false
+}
+```
+
+- npm 배포 시 확인할 `package.json`의 주요 설정은 위와 같습니다.
+  - `name` - 라이브러리의 이름. 이 값을 기준으로 npm 라이브러리 이름이 결정됩니다. 중복은 허용되지 않습니다.
+    - 조직이 있다면 조직명을 같이 입력해주세요. `@{org}/@{name}` 형태입니다.
+  - `version` - 라이브러리의 버전. 이미 배포된 버전은 다시 배포할 수 없습니다.
+  - `main` - 라이브러리의 메인 모듈. 본 라이브러리는 `CJS` 모듈을 메인으로 사용합니다.
+  - `module` - 라이브러리의 EJS 모듈
+  - `browser` - 라이브러리의 UMD 모듈
+  - `types` - 라이브러리의 타입. TypeScript 개발환경에서의 활용을 위해 타입을 제공합니다.
+  - `private` - 라이브러리의 비공개 여부. 비공개일 경우 라이브러리를 외부에 노출시키지 않을 수 있습니다. 물룐 비용이 발생합니다.
+    - GitHub의 Private Repository와는 관련 없습니다.
+
+``` bash
+npm login
+# username
+# password
+# email
+# email otp
+
+yarn publish
+```
+
+- 위 명령어를 입력하여 배포를 수행할 수 있습니다.
+- 배포된 라이브러리는 약 수 초 뒤, npm 페이지에서 확인할 수 있습니다.
+
+``` bash
+npm unpublish @mint-ui/map@1.0.0
+```
+
+- 배포 취소는 위 명령어를 입력합니다.
+- 한 번 배포된 라이브러리는 24시간 내에 취소가 가능하며, 이를 초과할 경우 npm에 직접 요청메일을 보내야합니다.
+
+<br />
+
+## Guide for User
+
+``` bash
+yarn add @mint-ui/map
+
+npm install @mint-ui/map
+```
+
+- 위 명령어로 다운로드 받을 수 있습니다.

package/dist/atom/GoogleMap/GoogleMap.d.ts

@@ -0,0 +1,3 @@
+import { MapProps } from '../../moleclue/Map/Map';
+export declare type GoogleLibraryType = 'drawing' | 'geometry' | 'journeySharing' | 'localContext' | 'places' | 'visualization';
+export default function GoogleMap({ api, id, option, width, height, libraries, markers, style, className, children, ...props }: MapProps): JSX.Element;

package/dist/atom/GoogleMap/GoogleMap.js

@@ -0,0 +1,13 @@
+'use strict';
+
+require('tslib');
+var classNames = require('classnames/bind');
+require('react');
+var GoogleMap_module = require('./GoogleMap.module.scss.js');
+require('./GoogleMapManager.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+classNames__default["default"].bind(GoogleMap_module);

package/dist/atom/GoogleMap/GoogleMap.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var styleInject = require('style-inject');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+
+var css_248z = ".GoogleMap-module_google-map-wrapper__Ixip9 {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.GoogleMap-module_google-map__2k3RV {\n  width: 100%;\n  height: 100%;\n}";
+var styles = {"google-map-wrapper":"GoogleMap-module_google-map-wrapper__Ixip9","google-map":"GoogleMap-module_google-map__2k3RV"};
+styleInject__default["default"](css_248z);
+
+module.exports = styles;

package/dist/atom/GoogleMap/GoogleMapManager.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var tslib = require('tslib');
+var util = require('../../common/util.js');
+var MapManager = require('../../module/map/MapManager.js');
+
+(function (_super) {
+  tslib.__extends(GoogleMapManager, _super);
+
+  function GoogleMapManager() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GoogleMapManager.prototype.getScriptUrl = function (libraries, callback) {
+    var params = {
+      key: this.api,
+      v: 'weekly'
+    };
+
+    if (libraries) {
+      params.libraries = libraries.join(',');
+    }
+
+    if (callback) {
+      params.callback = callback;
+    }
+
+    return util.buildUrl('https://maps.googleapis.com/maps/api/js', params);
+  };
+
+  GoogleMapManager.prototype.getMap = function (id, option) {
+    var tag = document.getElementById(id);
+    return new google.maps.Map(tag, this.convertOption(option));
+  };
+
+  GoogleMapManager.prototype.drawMarkers = function (map, options) {
+    var _this = this;
+
+    return options.map(function (option) {
+      var converted = _this.convertMarkerOption(tslib.__assign({
+        map: map
+      }, option));
+
+      return new google.maps.Marker(converted);
+    });
+  };
+
+  GoogleMapManager.prototype.convertOption = function (option) {
+    var center = option.center,
+        maxZoom = option.maxZoom,
+        minZoom = option.minZoom,
+        zoom = option.zoom;
+    var lat = center.lat,
+        lng = center.lng;
+    var converted = {
+      center: {
+        lat: lat,
+        lng: lng
+      },
+      maxZoom: maxZoom,
+      minZoom: minZoom,
+      zoom: zoom
+    };
+    return converted;
+  };
+
+  GoogleMapManager.prototype.convertMarkerOption = function (_a) {
+    var map = _a.map,
+        position = _a.position,
+        icon = _a.icon,
+        title = _a.title,
+        visible = _a.visible,
+        zIndex = _a.zIndex;
+    var option = {
+      map: map || this.map,
+      position: position
+    };
+
+    if (icon) {
+      var url = icon.url,
+          origin_1 = icon.origin,
+          anchor = icon.anchor,
+          scaledSize = icon.scaledSize;
+      option.icon = {
+        anchor: anchor && new google.maps.Point(anchor[0], anchor[1]),
+        origin: origin_1 && new google.maps.Point(origin_1[0], origin_1[1]),
+        scaledSize: scaledSize && new google.maps.Size(scaledSize[0], scaledSize[1]),
+        url: url
+      };
+    }
+
+    if (title) {
+      option.title = title;
+    }
+
+    if (visible) {
+      option.visible = visible;
+    }
+
+    if (zIndex) {
+      option.zIndex = zIndex;
+    }
+
+    return option;
+  };
+
+  return GoogleMapManager;
+})(MapManager);

package/dist/atom/GoogleMap/index.d.ts

@@ -0,0 +1,2 @@
+import GoogleMap from './GoogleMap';
+export default GoogleMap;

package/dist/atom/NaverMap/NaverMap.d.ts

@@ -0,0 +1,3 @@
+import { MapProps } from '../../moleclue/Map/Map';
+export declare type NaverLibraryType = 'drawing' | 'geocoder' | 'panorama' | 'visualization';
+export default function NaverMap({ api, id, option, width, height, libraries, markers, style, className, children, ...props }: MapProps): JSX.Element;

package/dist/atom/NaverMap/NaverMap.js

@@ -0,0 +1,13 @@
+'use strict';
+
+require('tslib');
+var classNames = require('classnames/bind');
+require('react');
+var NaverMap_module = require('./NaverMap.module.scss.js');
+require('./NaverMapManager.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+classNames__default["default"].bind(NaverMap_module);

package/dist/atom/NaverMap/NaverMap.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var styleInject = require('style-inject');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+
+var css_248z = ".NaverMap-module_naver-map-wrapper__dt2kP {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.NaverMap-module_naver-map__zTbF2 {\n  width: 100%;\n  height: 100%;\n}";
+var styles = {"naver-map-wrapper":"NaverMap-module_naver-map-wrapper__dt2kP","naver-map":"NaverMap-module_naver-map__zTbF2"};
+styleInject__default["default"](css_248z);
+
+module.exports = styles;

package/dist/atom/NaverMap/NaverMapManager.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="navermaps" />
+import MapManager, { MapManagerMarkerOptionsType, MapManagerOptionType, MapType } from '../../module/map/MapManager';
+export declare type NaverMapLibrariesType = 'drawing' | 'geocoder' | 'panorama' | 'visualization';
+export default class NaverMapManager extends MapManager {
+    getScriptUrl(libraries?: NaverMapLibrariesType[], callback?: string): string;
+    getMap(id: string, option: MapManagerOptionType): naver.maps.Map;
+    drawMarkers(map: MapType, options: MapManagerMarkerOptionsType[]): naver.maps.Marker[];
+    private convertOption;
+    private convertMarkerOption;
+}

package/dist/atom/NaverMap/NaverMapManager.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var tslib = require('tslib');
+var util = require('../../common/util.js');
+var MapManager = require('../../module/map/MapManager.js');
+
+(function (_super) {
+  tslib.__extends(NaverMapManager, _super);
+
+  function NaverMapManager() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  NaverMapManager.prototype.getScriptUrl = function (libraries, callback) {
+    var params = {
+      ncpClientId: this.api
+    };
+
+    if (libraries) {
+      params.submodules = libraries.join(',');
+    }
+
+    if (callback) {
+      params.callback = callback;
+    }
+
+    return util.buildUrl('https://openapi.map.naver.com/openapi/v3/maps.js', params);
+  };
+
+  NaverMapManager.prototype.getMap = function (id, option) {
+    this.map = new naver.maps.Map(id, this.convertOption(option));
+    console.dir(this.map);
+    return new naver.maps.Map(id, this.convertOption(option));
+  };
+
+  NaverMapManager.prototype.drawMarkers = function (map, options) {
+    var _this = this;
+
+    console.dir(this.map);
+    return options.map(function (option) {
+      var converted = _this.convertMarkerOption(tslib.__assign({
+        map: map
+      }, option));
+
+      return new naver.maps.Marker(converted);
+    });
+  };
+
+  NaverMapManager.prototype.convertOption = function (_a) {
+    var center = _a.center,
+        maxZoom = _a.maxZoom,
+        minZoom = _a.minZoom,
+        zoom = _a.zoom;
+    var lat = center.lat,
+        lng = center.lng;
+    var converted = {
+      center: {
+        lat: lat,
+        lng: lng
+      },
+      zoom: zoom
+    };
+
+    if (maxZoom) {
+      converted.maxZoom = maxZoom;
+    }
+
+    if (minZoom) {
+      converted.minZoom = minZoom;
+    }
+
+    return converted;
+  };
+
+  NaverMapManager.prototype.convertMarkerOption = function (_a) {
+    var map = _a.map,
+        position = _a.position,
+        icon = _a.icon,
+        title = _a.title,
+        visible = _a.visible,
+        zIndex = _a.zIndex;
+    var option = {
+      map: map || this.map,
+      position: position
+    };
+
+    if (icon) {
+      var url = icon.url,
+          size = icon.size,
+          origin_1 = icon.origin,
+          anchor = icon.anchor,
+          scaledSize = icon.scaledSize;
+      option.icon = {
+        anchor: anchor && new naver.maps.Point(anchor[0], anchor[1]),
+        origin: origin_1 && new naver.maps.Point(origin_1[0], origin_1[1]),
+        scaledSize: scaledSize && new naver.maps.Size(scaledSize[0], scaledSize[1]),
+        size: size && new naver.maps.Size(size[0], size[1]),
+        url: url
+      };
+    }
+
+    if (title) {
+      option.title = title;
+    }
+
+    if (visible) {
+      option.visible = visible;
+    }
+
+    if (zIndex) {
+      option.zIndex = zIndex;
+    }
+
+    return option;
+  };
+
+  return NaverMapManager;
+})(MapManager);

package/dist/atom/NaverMap/index.d.ts

@@ -0,0 +1,2 @@
+import NaverMap from './NaverMap';
+export default NaverMap;

package/dist/atom/index.d.ts

@@ -0,0 +1,7 @@
+import GoogleMap from './GoogleMap';
+import NaverMap from './NaverMap';
+declare const _default: {
+    GoogleMap: typeof GoogleMap;
+    NaverMap: typeof NaverMap;
+};
+export default _default;

package/dist/common/hook.d.ts

@@ -0,0 +1 @@
+export default function useScript(url: string, onLoad?: (e: Event) => void): void;

package/dist/common/type.d.ts

@@ -0,0 +1,3 @@
+export declare type JsonType = {
+    [key: string]: string | string[] | number | number[] | boolean | boolean[] | JsonType | JsonType[] | null;
+};

package/dist/common/util.d.ts

@@ -0,0 +1,4 @@
+export declare function buildUrl(baseUrl: string, param: {
+    [key: string]: string | string[];
+}): string;
+export declare const temp = 1;

package/dist/common/util.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function buildUrl(baseUrl, param) {
+  var params = Object.entries(param).map(function (_a) {
+    var key = _a[0],
+        value = _a[1];
+    var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+    return "".concat(key, "=").concat(temp);
+  }).join('&');
+  return "".concat(baseUrl, "?").concat(params);
+}
+
+exports.buildUrl = buildUrl;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './atom';
+export * from './moleclue';

package/dist/index.es.js

@@ -0,0 +1,250 @@
+import { __extends, __assign } from 'tslib';
+import classNames from 'classnames/bind';
+import 'react';
+import styleInject from 'style-inject';
+
+var css_248z$1 = ".GoogleMap-module_google-map-wrapper__Ixip9 {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.GoogleMap-module_google-map__2k3RV {\n  width: 100%;\n  height: 100%;\n}";
+var styles$1 = {"google-map-wrapper":"GoogleMap-module_google-map-wrapper__Ixip9","google-map":"GoogleMap-module_google-map__2k3RV"};
+styleInject(css_248z$1);
+
+function buildUrl(baseUrl, param) {
+  var params = Object.entries(param).map(function (_a) {
+    var key = _a[0],
+        value = _a[1];
+    var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+    return "".concat(key, "=").concat(temp);
+  }).join('&');
+  return "".concat(baseUrl, "?").concat(params);
+}
+
+var MapManager = function () {
+  function MapManager(api) {
+    this.api = api;
+  }
+
+  return MapManager;
+}();
+
+(function (_super) {
+  __extends(GoogleMapManager, _super);
+
+  function GoogleMapManager() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GoogleMapManager.prototype.getScriptUrl = function (libraries, callback) {
+    var params = {
+      key: this.api,
+      v: 'weekly'
+    };
+
+    if (libraries) {
+      params.libraries = libraries.join(',');
+    }
+
+    if (callback) {
+      params.callback = callback;
+    }
+
+    return buildUrl('https://maps.googleapis.com/maps/api/js', params);
+  };
+
+  GoogleMapManager.prototype.getMap = function (id, option) {
+    var tag = document.getElementById(id);
+    return new google.maps.Map(tag, this.convertOption(option));
+  };
+
+  GoogleMapManager.prototype.drawMarkers = function (map, options) {
+    var _this = this;
+
+    return options.map(function (option) {
+      var converted = _this.convertMarkerOption(__assign({
+        map: map
+      }, option));
+
+      return new google.maps.Marker(converted);
+    });
+  };
+
+  GoogleMapManager.prototype.convertOption = function (option) {
+    var center = option.center,
+        maxZoom = option.maxZoom,
+        minZoom = option.minZoom,
+        zoom = option.zoom;
+    var lat = center.lat,
+        lng = center.lng;
+    var converted = {
+      center: {
+        lat: lat,
+        lng: lng
+      },
+      maxZoom: maxZoom,
+      minZoom: minZoom,
+      zoom: zoom
+    };
+    return converted;
+  };
+
+  GoogleMapManager.prototype.convertMarkerOption = function (_a) {
+    var map = _a.map,
+        position = _a.position,
+        icon = _a.icon,
+        title = _a.title,
+        visible = _a.visible,
+        zIndex = _a.zIndex;
+    var option = {
+      map: map || this.map,
+      position: position
+    };
+
+    if (icon) {
+      var url = icon.url,
+          origin_1 = icon.origin,
+          anchor = icon.anchor,
+          scaledSize = icon.scaledSize;
+      option.icon = {
+        anchor: anchor && new google.maps.Point(anchor[0], anchor[1]),
+        origin: origin_1 && new google.maps.Point(origin_1[0], origin_1[1]),
+        scaledSize: scaledSize && new google.maps.Size(scaledSize[0], scaledSize[1]),
+        url: url
+      };
+    }
+
+    if (title) {
+      option.title = title;
+    }
+
+    if (visible) {
+      option.visible = visible;
+    }
+
+    if (zIndex) {
+      option.zIndex = zIndex;
+    }
+
+    return option;
+  };
+
+  return GoogleMapManager;
+})(MapManager);
+
+classNames.bind(styles$1);
+
+var css_248z = ".NaverMap-module_naver-map-wrapper__dt2kP {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.NaverMap-module_naver-map__zTbF2 {\n  width: 100%;\n  height: 100%;\n}";
+var styles = {"naver-map-wrapper":"NaverMap-module_naver-map-wrapper__dt2kP","naver-map":"NaverMap-module_naver-map__zTbF2"};
+styleInject(css_248z);
+
+(function (_super) {
+  __extends(NaverMapManager, _super);
+
+  function NaverMapManager() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  NaverMapManager.prototype.getScriptUrl = function (libraries, callback) {
+    var params = {
+      ncpClientId: this.api
+    };
+
+    if (libraries) {
+      params.submodules = libraries.join(',');
+    }
+
+    if (callback) {
+      params.callback = callback;
+    }
+
+    return buildUrl('https://openapi.map.naver.com/openapi/v3/maps.js', params);
+  };
+
+  NaverMapManager.prototype.getMap = function (id, option) {
+    this.map = new naver.maps.Map(id, this.convertOption(option));
+    console.dir(this.map);
+    return new naver.maps.Map(id, this.convertOption(option));
+  };
+
+  NaverMapManager.prototype.drawMarkers = function (map, options) {
+    var _this = this;
+
+    console.dir(this.map);
+    return options.map(function (option) {
+      var converted = _this.convertMarkerOption(__assign({
+        map: map
+      }, option));
+
+      return new naver.maps.Marker(converted);
+    });
+  };
+
+  NaverMapManager.prototype.convertOption = function (_a) {
+    var center = _a.center,
+        maxZoom = _a.maxZoom,
+        minZoom = _a.minZoom,
+        zoom = _a.zoom;
+    var lat = center.lat,
+        lng = center.lng;
+    var converted = {
+      center: {
+        lat: lat,
+        lng: lng
+      },
+      zoom: zoom
+    };
+
+    if (maxZoom) {
+      converted.maxZoom = maxZoom;
+    }
+
+    if (minZoom) {
+      converted.minZoom = minZoom;
+    }
+
+    return converted;
+  };
+
+  NaverMapManager.prototype.convertMarkerOption = function (_a) {
+    var map = _a.map,
+        position = _a.position,
+        icon = _a.icon,
+        title = _a.title,
+        visible = _a.visible,
+        zIndex = _a.zIndex;
+    var option = {
+      map: map || this.map,
+      position: position
+    };
+
+    if (icon) {
+      var url = icon.url,
+          size = icon.size,
+          origin_1 = icon.origin,
+          anchor = icon.anchor,
+          scaledSize = icon.scaledSize;
+      option.icon = {
+        anchor: anchor && new naver.maps.Point(anchor[0], anchor[1]),
+        origin: origin_1 && new naver.maps.Point(origin_1[0], origin_1[1]),
+        scaledSize: scaledSize && new naver.maps.Size(scaledSize[0], scaledSize[1]),
+        size: size && new naver.maps.Size(size[0], size[1]),
+        url: url
+      };
+    }
+
+    if (title) {
+      option.title = title;
+    }
+
+    if (visible) {
+      option.visible = visible;
+    }
+
+    if (zIndex) {
+      option.zIndex = zIndex;
+    }
+
+    return option;
+  };
+
+  return NaverMapManager;
+})(MapManager);
+
+classNames.bind(styles);

package/dist/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./atom/GoogleMap/GoogleMap.js');
+require('./atom/NaverMap/NaverMap.js');
+require('tslib');
+require('react');
+

package/dist/index.umd.js

@@ -0,0 +1,258 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('tslib'), require('classnames/bind'), require('react'), require('style-inject')) :
+	typeof define === 'function' && define.amd ? define(['tslib', 'classnames/bind', 'react', 'style-inject'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.tslib, global.classNames, null, global.styleInject));
+})(this, (function (tslib, classNames, React, styleInject) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+	var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+	var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+
+	var css_248z$1 = ".GoogleMap-module_google-map-wrapper__Ixip9 {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.GoogleMap-module_google-map__2k3RV {\n  width: 100%;\n  height: 100%;\n}";
+	var styles$1 = {"google-map-wrapper":"GoogleMap-module_google-map-wrapper__Ixip9","google-map":"GoogleMap-module_google-map__2k3RV"};
+	styleInject__default["default"](css_248z$1);
+
+	function buildUrl(baseUrl, param) {
+	  var params = Object.entries(param).map(function (_a) {
+	    var key = _a[0],
+	        value = _a[1];
+	    var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+	    return "".concat(key, "=").concat(temp);
+	  }).join('&');
+	  return "".concat(baseUrl, "?").concat(params);
+	}
+
+	var MapManager = function () {
+	  function MapManager(api) {
+	    this.api = api;
+	  }
+
+	  return MapManager;
+	}();
+
+	(function (_super) {
+	  tslib.__extends(GoogleMapManager, _super);
+
+	  function GoogleMapManager() {
+	    return _super !== null && _super.apply(this, arguments) || this;
+	  }
+
+	  GoogleMapManager.prototype.getScriptUrl = function (libraries, callback) {
+	    var params = {
+	      key: this.api,
+	      v: 'weekly'
+	    };
+
+	    if (libraries) {
+	      params.libraries = libraries.join(',');
+	    }
+
+	    if (callback) {
+	      params.callback = callback;
+	    }
+
+	    return buildUrl('https://maps.googleapis.com/maps/api/js', params);
+	  };
+
+	  GoogleMapManager.prototype.getMap = function (id, option) {
+	    var tag = document.getElementById(id);
+	    return new google.maps.Map(tag, this.convertOption(option));
+	  };
+
+	  GoogleMapManager.prototype.drawMarkers = function (map, options) {
+	    var _this = this;
+
+	    return options.map(function (option) {
+	      var converted = _this.convertMarkerOption(tslib.__assign({
+	        map: map
+	      }, option));
+
+	      return new google.maps.Marker(converted);
+	    });
+	  };
+
+	  GoogleMapManager.prototype.convertOption = function (option) {
+	    var center = option.center,
+	        maxZoom = option.maxZoom,
+	        minZoom = option.minZoom,
+	        zoom = option.zoom;
+	    var lat = center.lat,
+	        lng = center.lng;
+	    var converted = {
+	      center: {
+	        lat: lat,
+	        lng: lng
+	      },
+	      maxZoom: maxZoom,
+	      minZoom: minZoom,
+	      zoom: zoom
+	    };
+	    return converted;
+	  };
+
+	  GoogleMapManager.prototype.convertMarkerOption = function (_a) {
+	    var map = _a.map,
+	        position = _a.position,
+	        icon = _a.icon,
+	        title = _a.title,
+	        visible = _a.visible,
+	        zIndex = _a.zIndex;
+	    var option = {
+	      map: map || this.map,
+	      position: position
+	    };
+
+	    if (icon) {
+	      var url = icon.url,
+	          origin_1 = icon.origin,
+	          anchor = icon.anchor,
+	          scaledSize = icon.scaledSize;
+	      option.icon = {
+	        anchor: anchor && new google.maps.Point(anchor[0], anchor[1]),
+	        origin: origin_1 && new google.maps.Point(origin_1[0], origin_1[1]),
+	        scaledSize: scaledSize && new google.maps.Size(scaledSize[0], scaledSize[1]),
+	        url: url
+	      };
+	    }
+
+	    if (title) {
+	      option.title = title;
+	    }
+
+	    if (visible) {
+	      option.visible = visible;
+	    }
+
+	    if (zIndex) {
+	      option.zIndex = zIndex;
+	    }
+
+	    return option;
+	  };
+
+	  return GoogleMapManager;
+	})(MapManager);
+
+	classNames__default["default"].bind(styles$1);
+
+	var css_248z = ".NaverMap-module_naver-map-wrapper__dt2kP {\n  position: relative;\n  background-color: whitesmoke;\n}\n\n.NaverMap-module_naver-map__zTbF2 {\n  width: 100%;\n  height: 100%;\n}";
+	var styles = {"naver-map-wrapper":"NaverMap-module_naver-map-wrapper__dt2kP","naver-map":"NaverMap-module_naver-map__zTbF2"};
+	styleInject__default["default"](css_248z);
+
+	(function (_super) {
+	  tslib.__extends(NaverMapManager, _super);
+
+	  function NaverMapManager() {
+	    return _super !== null && _super.apply(this, arguments) || this;
+	  }
+
+	  NaverMapManager.prototype.getScriptUrl = function (libraries, callback) {
+	    var params = {
+	      ncpClientId: this.api
+	    };
+
+	    if (libraries) {
+	      params.submodules = libraries.join(',');
+	    }
+
+	    if (callback) {
+	      params.callback = callback;
+	    }
+
+	    return buildUrl('https://openapi.map.naver.com/openapi/v3/maps.js', params);
+	  };
+
+	  NaverMapManager.prototype.getMap = function (id, option) {
+	    this.map = new naver.maps.Map(id, this.convertOption(option));
+	    console.dir(this.map);
+	    return new naver.maps.Map(id, this.convertOption(option));
+	  };
+
+	  NaverMapManager.prototype.drawMarkers = function (map, options) {
+	    var _this = this;
+
+	    console.dir(this.map);
+	    return options.map(function (option) {
+	      var converted = _this.convertMarkerOption(tslib.__assign({
+	        map: map
+	      }, option));
+
+	      return new naver.maps.Marker(converted);
+	    });
+	  };
+
+	  NaverMapManager.prototype.convertOption = function (_a) {
+	    var center = _a.center,
+	        maxZoom = _a.maxZoom,
+	        minZoom = _a.minZoom,
+	        zoom = _a.zoom;
+	    var lat = center.lat,
+	        lng = center.lng;
+	    var converted = {
+	      center: {
+	        lat: lat,
+	        lng: lng
+	      },
+	      zoom: zoom
+	    };
+
+	    if (maxZoom) {
+	      converted.maxZoom = maxZoom;
+	    }
+
+	    if (minZoom) {
+	      converted.minZoom = minZoom;
+	    }
+
+	    return converted;
+	  };
+
+	  NaverMapManager.prototype.convertMarkerOption = function (_a) {
+	    var map = _a.map,
+	        position = _a.position,
+	        icon = _a.icon,
+	        title = _a.title,
+	        visible = _a.visible,
+	        zIndex = _a.zIndex;
+	    var option = {
+	      map: map || this.map,
+	      position: position
+	    };
+
+	    if (icon) {
+	      var url = icon.url,
+	          size = icon.size,
+	          origin_1 = icon.origin,
+	          anchor = icon.anchor,
+	          scaledSize = icon.scaledSize;
+	      option.icon = {
+	        anchor: anchor && new naver.maps.Point(anchor[0], anchor[1]),
+	        origin: origin_1 && new naver.maps.Point(origin_1[0], origin_1[1]),
+	        scaledSize: scaledSize && new naver.maps.Size(scaledSize[0], scaledSize[1]),
+	        size: size && new naver.maps.Size(size[0], size[1]),
+	        url: url
+	      };
+	    }
+
+	    if (title) {
+	      option.title = title;
+	    }
+
+	    if (visible) {
+	      option.visible = visible;
+	    }
+
+	    if (zIndex) {
+	      option.zIndex = zIndex;
+	    }
+
+	    return option;
+	  };
+
+	  return NaverMapManager;
+	})(MapManager);
+
+	classNames__default["default"].bind(styles);
+
+}));

package/dist/module/map/MapManager.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var MapManager = function () {
+  function MapManager(api) {
+    this.api = api;
+  }
+
+  return MapManager;
+}();
+
+module.exports = MapManager;

package/dist/moleclue/Map/Map.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { GoogleLibraryType } from '../../atom/GoogleMap/GoogleMap';
+import { NaverLibraryType } from '../../atom/NaverMap/NaverMap';
+import { MapManagerMarkerOptionsType, MapManagerOptionType, MapMarkerType } from '../../module/map/MapManager';
+export declare type MapTypeType = 'naver' | 'google';
+export interface MapProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    api: string;
+    libraries?: NaverLibraryType[] | GoogleLibraryType[];
+    option?: MapManagerOptionType;
+    width: number | string;
+    height: number | string;
+    markers?: MapManagerMarkerOptionsType[];
+    onMarkerClick?: (e: Event, marker: MapMarkerType) => void;
+}
+export interface AllMapProps extends MapProps {
+    mapType: MapTypeType;
+}
+export default function Map({ mapType, ...props }: AllMapProps): JSX.Element | null;

package/dist/moleclue/Map/index.d.ts

@@ -0,0 +1,2 @@
+import Map from './Map';
+export default Map;

package/dist/moleclue/index.d.ts

@@ -0,0 +1,5 @@
+import Map from './Map';
+declare const _default: {
+    Map: typeof Map;
+};
+export default _default;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@mint-ui/map",
+  "version": "2.1.1-alpha1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "browser": "./dist/index.umd.js",
+  "types": "./dist/index.d.ts",
+  "repository": "https://github.com/itcode-dev/react-components-library-starter",
+  "author": "RWB0104 <psj2716@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@storybook/addon-actions": "^6.5.7",
+    "@storybook/addon-essentials": "^6.5.7",
+    "@storybook/addon-interactions": "^6.5.7",
+    "@storybook/addon-links": "^6.5.7",
+    "@storybook/builder-webpack5": "^6.5.7",
+    "@storybook/manager-webpack5": "^6.5.7",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.7",
+    "@storybook/testing-library": "^0.0.11",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "^18.0.12",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-react-icons": "^0.1.1",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-storybook": "^0.5.12",
+    "postcss": "^8.4.14",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rollup": "^2.75.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.52.2",
+    "sass-loader": "^13.0.0",
+    "shx": "^0.3.4",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.3"
+  },
+  "dependencies": {
+    "@types/google.maps": "^3.49.2",
+    "@types/navermaps": "^3.0.16",
+    "classnames": "^2.3.1",
+    "style-inject": "^0.3.0"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 3000",
+    "build-storybook": "build-storybook",
+    "prebuild": "shx rm -rf ./dist",
+    "build": "rollup -c",
+    "postbuild": "shx rm -rf ./dist/dist"
+  }
+}