@mint-ui/map 1.1.4 → 1.2.0-test.10

package/.vscode/settings.json

@@ -1,9 +1,9 @@
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": false,
-    "source.fixAll.eslint": false,
-    "source.organizeImports": false
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "never",
+    "source.organizeImports": "never"
   },
   "eslint.enable": false,
   "typescript.format.enable": false,

package/CLAUDE.md

@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+@mint-ui/map is a React-based map library that provides a unified interface for controlling multiple map providers (Google Maps, Naver Maps, and Kakao Maps) with TypeScript support and advanced Canvas marker capabilities.
+
+## Development Commands
+
+```bash
+# Development
+npm run storybook        # Start Storybook dev server on port 3000
+
+# Building
+npm run build           # Build library for distribution (cleans dist/, runs rollup)
+
+# NPM Publishing
+npm run build           # Always build before publishing
+npm version patch       # Increment version (patch/minor/major)
+npm publish --access public  # Publish to NPM (must use --access public for scoped package)
+```
+
+## Architecture Overview
+
+### Map Provider Abstraction
+The library uses a controller pattern to abstract different map providers:
+- `GoogleMintMapController` - Google Maps implementation
+- `NaverMintMapController` - Naver Maps implementation
+- `KakaoMintMapController` - Kakao Maps implementation
+
+Each controller implements a common interface, allowing seamless switching between map providers.
+
+### Core Directory Structure
+```
+src/components/mint-map/
+├── MintMap.tsx              # Main entry component
+├── core/
+│   ├── advanced/            # Canvas markers, shapes, drawing tools
+│   ├── hooks/               # React hooks for map interactions
+│   ├── provider/            # React Context for state management
+│   └── wrapper/             # Component wrappers (markers, overlays)
+├── google/                  # Google Maps specific implementation
+├── naver/                   # Naver Maps specific implementation
+├── kakao/                   # Kakao Maps specific implementation
+└── types/                   # TypeScript type definitions
+```
+
+### Key Architectural Patterns
+
+1. **Factory Pattern**: The `MintMap` component dynamically instantiates the appropriate controller based on the `mapType` prop.
+
+2. **Provider Pattern**: Uses React Context (`MintMapProvider`) to share map state and controller instance across components.
+
+3. **Wrapper Components**: Components like `MapMarkerWrapper` abstract the differences between map provider APIs.
+
+4. **Canvas Rendering**: Advanced marker system using HTML5 Canvas for high-performance rendering of large datasets.
+
+## TypeScript Configuration
+
+- Target: ES5 with React JSX
+- Strict mode enabled
+- Declaration files generated for distribution
+- Excludes `*.stories.tsx` and `*.test.tsx` from compilation
+
+## Build System
+
+Uses Rollup with multiple output formats:
+- CommonJS: `dist/index.js`
+- ES Module: `dist/index.es.js`
+- UMD: `dist/index.umd.js`
+- Type declarations: `dist/index.d.ts`
+
+## Development with Storybook
+
+The project uses Storybook for component development and documentation:
+- Stories in `src/stories/` demonstrate usage patterns
+- `basics/` - Basic map functionality examples
+- `markerlab/` - Advanced marker experiments including canvas markers
+- `sample/` - Complete implementation examples
+
+## Code Style
+
+- ESLint with Airbnb config + TypeScript rules
+- Tab-based indentation (2-space equivalent)
+- Alphabetical import ordering enforced
+- SCSS modules for component styling
+
+## Working with Canvas Markers
+
+Canvas markers are a key feature for high-performance rendering:
+- `CanvasMarker.tsx` - Main canvas marker component
+- `CanvasMarkerHanquf.tsx` - Specialized canvas marker variant
+- Renderer function pattern for custom drawing logic
+- Supports geohash-based clustering
+
+## External Resources
+
+- Documentation site: https://dev-rsquare.github.io/mint-ui-map-guide
+- NPM package: @mint-ui/map

package/README.md

@@ -129,7 +129,7 @@ npm pack
 #### 5. NPM에 배포
 스코프 패키지(`@mint-ui/map`)는 기본적으로 private이므로 public으로 배포해야 합니다.
 ```bash
-npm publish --access public
+npm publish 
 ```
 
 #### 6. 배포 완료 확인
@@ -154,7 +154,7 @@ npm version patch
 npm pack
 
 # 5단계: 배포
-npm publish --access public
+npm publish 
 ```
 
 ### 현재 패키지 정보
@@ -185,7 +185,7 @@ npm publish --access public
    npm run build
 
    # test tag로 배포
-   npm publish --access public --tag test
+   npm publish  --tag test
    ```
 
 3. **변경사항 커밋 및 푸시**
@@ -202,7 +202,7 @@ npm publish --access public
 
    # 빌드 및 배포
    npm run build
-   npm publish --access public --tag test
+   npm publish  --tag test
 
    # 커밋 및 푸시
    git add .
@@ -215,7 +215,7 @@ npm publish --access public
    git checkout -b 1.2.0-test.2
    npm version 1.2.0-test.2 --no-git-tag-version
    npm run build
-   npm publish --access public --tag test
+   npm publish  --tag test
    git add .
    git commit -m "chore: release 1.2.0-test.2"
    git push origin 1.2.0-test.2
@@ -234,7 +234,7 @@ npm publish --access public
 
    # 빌드 및 배포
    npm run build
-   npm publish --access public
+   npm publish 
 
    # main에 푸시
    git push origin main
@@ -267,5 +267,5 @@ npm install @mint-ui/map@1.2.0-test.1
 ### 주의사항
 - 배포하기 전에 반드시 `npm run build`를 실행해야 합니다
 - 버전은 한 번 배포하면 되돌릴 수 없으니 신중하게 결정하세요
-- 스코프 패키지는 `--access public` 옵션을 반드시 붙여야 합니다
+- 스코프 패키지는 `` 옵션을 반드시 붙여야 합니다
 - test tag로 배포할 때는 `--no-git-tag-version` 옵션을 사용하여 git tag 생성을 방지합니다

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

@@ -24,7 +24,6 @@ export declare abstract class MintMapController {
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;
     abstract markerToTheTop(marker: Marker): void;
-    abstract restoreMarkerZIndex(marker: Marker): void;
     abstract isMapDragged(): boolean;
     abstract setMapDragged(value: boolean): void;
     abstract setMarkerZIndex(marker: Marker, zIndex: number): void;

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

@@ -8,6 +8,11 @@ var React = require('react');
 var MapTypes = require('../types/MapTypes.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
+require('./advanced/woongCanvas/shared/types.js');
+require('../types/MapDrawables.js');
+require('../types/MapEventTypes.js');
+var context = require('./advanced/woongCanvas/shared/context.js');
+require('./advanced/woongCanvas/shared/performance.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -96,7 +101,7 @@ function MintMapCore(_a) {
   }, [center]);
   return React__default["default"].createElement("div", {
     className: cn('mint-map-root')
-  }, mapInitialized && children, React__default["default"].createElement("div", {
+  }, mapInitialized && React__default["default"].createElement(context.KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
     className: cn('mint-map-container'),
     style: {
       visibility: visible ? 'inherit' : 'hidden'

package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerClaude.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { MarkerOptions, Offset, Position } from "../../../types";
+export interface PolygonData {
+    id: string;
+    positions: Position[];
+    innerPositions?: Position[][];
+    background?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    visible?: boolean;
+    data?: any;
+    centerLat?: number;
+    centerLng?: number;
+}
+export interface MarkerData {
+    id: string;
+    lat: number;
+    lng: number;
+    data?: any;
+    visible?: boolean;
+}
+export interface MarkerRendererParams {
+    context: CanvasRenderingContext2D;
+    x: number;
+    y: number;
+    marker: MarkerData;
+    isHovered?: boolean;
+    isClicked?: boolean;
+}
+export interface MarkerBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PolygonRendererParams {
+    context: CanvasRenderingContext2D;
+    offsets: Offset[];
+    innerOffsets?: Offset[][];
+    polygon: PolygonData;
+    isHovered?: boolean;
+    defaultBackground: string;
+    defaultStrokeColor: string;
+    defaultStrokeWidth: number;
+    hoverBackground: string;
+    hoverStrokeColor: string;
+}
+export interface CanvasMarkerClaudeProps extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    polygons?: PolygonData[];
+    markers?: MarkerData[];
+    background?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    onPolygonClick?: (polygon: PolygonData | null) => void;
+    onPolygonHover?: (polygon: PolygonData) => void;
+    onPolygonLeave?: () => void;
+    onMarkerClick?: (marker: MarkerData | null) => void;
+    onMarkerHover?: (marker: MarkerData) => void;
+    onMarkerLeave?: () => void;
+    onRenderComplete?: () => void;
+    markerRenderer?: (params: MarkerRendererParams) => MarkerBounds;
+}
+export declare const CanvasMarkerClaude: React.NamedExoticComponent<CanvasMarkerClaudeProps>;