@mint-ui/map 1.2.0-test.40 → 1.2.0-test.42

package/dist/components/mint-map/core/advanced/shared/types.d.ts

@@ -33,26 +33,42 @@ export interface CanvasOption {
 /**
  * 서버 데이터와 캔버스 옵션을 결합한 타입
  *
- * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우, CanvasOption의 필드가 우선됩니다.
- *
  * @template T 서버에서 받은 원본 데이터 타입
  *
+ * @remarks
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+ * 변환 시 명시적으로 매핑해야 합니다. createCanvasData 헬퍼 함수를 사용하세요.
+ *
  * @example
+ * ```typescript
  * // 서버 데이터에 id가 number 타입인 경우
  * interface ServerData {
  *   id: number;
  *   name: string;
  * }
  *
- * // CanvasData<ServerData>는 다음과 같이 됩니다:
- * // {
- * //   id: string;  // CanvasOption의 id가 우선
- * //   name: string; // 서버 데이터의 name
- * //   position: Position;
- * //   ...CanvasOption의 다른 필드들
- * // }
+ * // ❌ 잘못된 사용 (타입 에러 발생)
+ * const data: CanvasData<ServerData> = {
+ *   ...serverData,
+ *   id: String(serverData.id), // 명시적 변환 필요
+ *   position: new Position(lat, lng)
+ * };
+ *
+ * // ✅ 올바른 사용 (헬퍼 함수 사용)
+ * const dataArray = createCanvasDataArray([serverData], (item) => ({
+ *   id: String(item.id),
+ *   position: new Position(lat, lng)
+ * }));
+ * const data = dataArray[0]; // 단일 항목이 필요한 경우
+ * ```
+ */
+export declare type CanvasData<T = {}> = T & CanvasOption;
+/**
+ * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ *
+ * @see createCanvasDataArray in ./utils.ts
  */
-export declare type CanvasData<T = {}> = Omit<T, keyof CanvasOption> & CanvasOption;
+export { createCanvasDataArray } from './utils';
 /**
  * 렌더링 유틸리티 함수들 (좌표 변환)
  *

package/dist/components/mint-map/core/advanced/shared/types.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('./utils.js');
+
 /**
  * 캔버스 데이터 타입 Enum
  */
@@ -11,3 +13,5 @@ exports.CanvasDataType = void 0;
   CanvasDataType["MARKER"] = "MARKER";
   CanvasDataType["POLYGON"] = "POLYGON";
 })(exports.CanvasDataType || (exports.CanvasDataType = {}));
+
+exports.createCanvasDataArray = utils.createCanvasDataArray;

package/dist/components/mint-map/core/advanced/shared/utils.d.ts

@@ -1,6 +1,6 @@
 import { Offset } from "../../../types";
 import { MintMapController } from "../../MintMapController";
-import { CanvasData } from "./types";
+import { CanvasData, CanvasOption } from "./types";
 /**
  * 폴리곤 좌표 변환 (위경도 → 화면 좌표)
  *
@@ -60,3 +60,38 @@ export declare const calculateTextBoxWidth: ({ text, fontConfig, padding, minWid
     padding: number;
     minWidth: number;
 }) => number;
+/**
+ * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터 배열의 각 항목을 CanvasData로 변환합니다.
+ * 각 항목마다 다른 CanvasOption을 적용할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverDataArray 서버에서 받은 원본 데이터 배열
+ * @param getCanvasOptions 각 항목에 대해 CanvasOption을 생성하는 함수
+ * @returns CanvasData<T>[] 타입의 데이터 배열
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ *   lat: number;
+ *   lng: number;
+ * }
+ *
+ * const serverDataArray: ServerData[] = [
+ *   { id: 1, name: "Item 1", lat: 37.5, lng: 127.0 },
+ *   { id: 2, name: "Item 2", lat: 37.6, lng: 127.1 }
+ * ];
+ *
+ * // ✅ 올바른 사용
+ * const canvasDataArray = createCanvasDataArray(serverDataArray, (item, index) => ({
+ *   id: String(item.id),  // 각 항목마다 명시적으로 변환
+ *   position: new Position(item.lat, item.lng)
+ * }));
+ *
+ * // canvasDataArray는 CanvasData<ServerData>[] 타입입니다
+ * ```
+ */
+export declare function createCanvasDataArray<T extends Record<string, any>>(serverDataArray: T[], getCanvasOptions: (serverData: T, index: number) => CanvasOption): CanvasData<T>[];

package/dist/components/mint-map/core/advanced/shared/utils.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 require('../../../types/MapDrawables.js');
 var MapTypes = require('../../../types/MapTypes.js');
 require('../../../types/MapEventTypes.js');
@@ -211,10 +212,54 @@ var calculateTextBoxWidth = function (_a) {
   var textWidth = tempCtx.measureText(text).width;
   return Math.max(minWidth, textWidth + padding);
 };
+/**
+ * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터 배열의 각 항목을 CanvasData로 변환합니다.
+ * 각 항목마다 다른 CanvasOption을 적용할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverDataArray 서버에서 받은 원본 데이터 배열
+ * @param getCanvasOptions 각 항목에 대해 CanvasOption을 생성하는 함수
+ * @returns CanvasData<T>[] 타입의 데이터 배열
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ *   lat: number;
+ *   lng: number;
+ * }
+ *
+ * const serverDataArray: ServerData[] = [
+ *   { id: 1, name: "Item 1", lat: 37.5, lng: 127.0 },
+ *   { id: 2, name: "Item 2", lat: 37.6, lng: 127.1 }
+ * ];
+ *
+ * // ✅ 올바른 사용
+ * const canvasDataArray = createCanvasDataArray(serverDataArray, (item, index) => ({
+ *   id: String(item.id),  // 각 항목마다 명시적으로 변환
+ *   position: new Position(item.lat, item.lng)
+ * }));
+ *
+ * // canvasDataArray는 CanvasData<ServerData>[] 타입입니다
+ * ```
+ */
+
+function createCanvasDataArray(serverDataArray, getCanvasOptions) {
+  return serverDataArray.map(function (serverData, index) {
+    var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
+    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+
+    return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+  });
+}
 
 exports.calculateTextBoxWidth = calculateTextBoxWidth;
 exports.computeMarkerOffset = computeMarkerOffset;
 exports.computePolygonOffsets = computePolygonOffsets;
+exports.createCanvasDataArray = createCanvasDataArray;
 exports.hexToRgba = hexToRgba;
 exports.isPointInMarkerData = isPointInMarkerData;
 exports.isPointInPolygon = isPointInPolygon;

package/dist/index.es.js

@@ -650,16 +650,6 @@ var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relati
 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);
 
-/**
- * 캔버스 데이터 타입 Enum
- */
-var CanvasDataType;
-
-(function (CanvasDataType) {
-  CanvasDataType["MARKER"] = "MARKER";
-  CanvasDataType["POLYGON"] = "POLYGON";
-})(CanvasDataType || (CanvasDataType = {}));
-
 var Drawable =
 /** @class */
 function () {
@@ -998,6 +988,59 @@ var calculateTextBoxWidth = function (_a) {
   var textWidth = tempCtx.measureText(text).width;
   return Math.max(minWidth, textWidth + padding);
 };
+/**
+ * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터 배열의 각 항목을 CanvasData로 변환합니다.
+ * 각 항목마다 다른 CanvasOption을 적용할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverDataArray 서버에서 받은 원본 데이터 배열
+ * @param getCanvasOptions 각 항목에 대해 CanvasOption을 생성하는 함수
+ * @returns CanvasData<T>[] 타입의 데이터 배열
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ *   lat: number;
+ *   lng: number;
+ * }
+ *
+ * const serverDataArray: ServerData[] = [
+ *   { id: 1, name: "Item 1", lat: 37.5, lng: 127.0 },
+ *   { id: 2, name: "Item 2", lat: 37.6, lng: 127.1 }
+ * ];
+ *
+ * // ✅ 올바른 사용
+ * const canvasDataArray = createCanvasDataArray(serverDataArray, (item, index) => ({
+ *   id: String(item.id),  // 각 항목마다 명시적으로 변환
+ *   position: new Position(item.lat, item.lng)
+ * }));
+ *
+ * // canvasDataArray는 CanvasData<ServerData>[] 타입입니다
+ * ```
+ */
+
+function createCanvasDataArray(serverDataArray, getCanvasOptions) {
+  return serverDataArray.map(function (serverData, index) {
+    var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
+    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+
+    return __assign(__assign({}, serverData), canvasOptions);
+  });
+}
+
+/**
+ * 캔버스 데이터 타입 Enum
+ */
+var CanvasDataType;
+
+(function (CanvasDataType) {
+  CanvasDataType["MARKER"] = "MARKER";
+  CanvasDataType["POLYGON"] = "POLYGON";
+})(CanvasDataType || (CanvasDataType = {}));
 
 var WoongCanvasContext = createContext(null);
 /**
@@ -9842,4 +9885,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, buildSpatialIndex, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, createMapEventHandlers, getClusterInfo, getMapOfType, hexToRgba, isInViewport, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, mapValuesToArray, syncExternalSelectedItems, syncSelectedItems, updateViewport, useMarkerMoving, useMintMapController, useWoongCanvasContext, validateEvent, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, buildSpatialIndex, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, createCanvasDataArray, createMapEventHandlers, getClusterInfo, getMapOfType, hexToRgba, isInViewport, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, mapValuesToArray, syncExternalSelectedItems, syncSelectedItems, updateViewport, useMarkerMoving, useMintMapController, useWoongCanvasContext, validateEvent, waiting };

package/dist/index.js

@@ -72,6 +72,7 @@ Object.defineProperty(exports, 'CanvasDataType', {
 exports.calculateTextBoxWidth = utils.calculateTextBoxWidth;
 exports.computeMarkerOffset = utils.computeMarkerOffset;
 exports.computePolygonOffsets = utils.computePolygonOffsets;
+exports.createCanvasDataArray = utils.createCanvasDataArray;
 exports.hexToRgba = utils.hexToRgba;
 exports.isPointInMarkerData = utils.isPointInMarkerData;
 exports.isPointInPolygon = utils.isPointInPolygon;

package/dist/index.umd.js

@@ -654,16 +654,6 @@
   var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
   styleInject__default["default"](css_248z$1);
 
-  /**
-   * 캔버스 데이터 타입 Enum
-   */
-  exports.CanvasDataType = void 0;
-
-  (function (CanvasDataType) {
-    CanvasDataType["MARKER"] = "MARKER";
-    CanvasDataType["POLYGON"] = "POLYGON";
-  })(exports.CanvasDataType || (exports.CanvasDataType = {}));
-
   var Drawable =
   /** @class */
   function () {
@@ -1002,6 +992,59 @@
     var textWidth = tempCtx.measureText(text).width;
     return Math.max(minWidth, textWidth + padding);
   };
+  /**
+   * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+   *
+   * 서버 데이터 배열의 각 항목을 CanvasData로 변환합니다.
+   * 각 항목마다 다른 CanvasOption을 적용할 수 있습니다.
+   *
+   * @template T 서버에서 받은 원본 데이터 타입
+   * @param serverDataArray 서버에서 받은 원본 데이터 배열
+   * @param getCanvasOptions 각 항목에 대해 CanvasOption을 생성하는 함수
+   * @returns CanvasData<T>[] 타입의 데이터 배열
+   *
+   * @example
+   * ```typescript
+   * interface ServerData {
+   *   id: number;  // CanvasOption의 id와 충돌
+   *   name: string;
+   *   lat: number;
+   *   lng: number;
+   * }
+   *
+   * const serverDataArray: ServerData[] = [
+   *   { id: 1, name: "Item 1", lat: 37.5, lng: 127.0 },
+   *   { id: 2, name: "Item 2", lat: 37.6, lng: 127.1 }
+   * ];
+   *
+   * // ✅ 올바른 사용
+   * const canvasDataArray = createCanvasDataArray(serverDataArray, (item, index) => ({
+   *   id: String(item.id),  // 각 항목마다 명시적으로 변환
+   *   position: new Position(item.lat, item.lng)
+   * }));
+   *
+   * // canvasDataArray는 CanvasData<ServerData>[] 타입입니다
+   * ```
+   */
+
+  function createCanvasDataArray(serverDataArray, getCanvasOptions) {
+    return serverDataArray.map(function (serverData, index) {
+      var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
+      // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+
+      return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+    });
+  }
+
+  /**
+   * 캔버스 데이터 타입 Enum
+   */
+  exports.CanvasDataType = void 0;
+
+  (function (CanvasDataType) {
+    CanvasDataType["MARKER"] = "MARKER";
+    CanvasDataType["POLYGON"] = "POLYGON";
+  })(exports.CanvasDataType || (exports.CanvasDataType = {}));
 
   var WoongCanvasContext = React.createContext(null);
   /**
@@ -9896,6 +9939,7 @@
   exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
+  exports.createCanvasDataArray = createCanvasDataArray;
   exports.createMapEventHandlers = createMapEventHandlers;
   exports.getClusterInfo = getClusterInfo;
   exports.getMapOfType = getMapOfType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.40",
+  "version": "1.2.0-test.42",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",