@mint-ui/map 1.1.1 → 1.2.0-test.1

package/.claude/settings.local.json

@@ -0,0 +1,16 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//var/folders/7t/vchtbctx3m788mhcq9fn2x540000gn/T/TemporaryItems/NSIRD_screencaptureui_OsfFWn/**)",
+      "Read(//Users/hans/Desktop/**)",
+      "WebSearch",
+      "Read(//var/folders/7t/vchtbctx3m788mhcq9fn2x540000gn/T/TemporaryItems/NSIRD_screencaptureui_4DskwH/**)",
+      "WebFetch(domain:www.bdsplanet.com)",
+      "mcp__ide__getDiagnostics",
+      "Bash(npm run storybook:*)",
+      "Read(//var/folders/7t/vchtbctx3m788mhcq9fn2x540000gn/T/TemporaryItems/NSIRD_screencaptureui_HMhrPV/**)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "never",
+    "source.organizeImports": "never"
+  },
+  "eslint.enable": false,
+  "typescript.format.enable": false,
+  "javascript.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

@@ -79,3 +79,193 @@ root.render((<MyMapComponent/>))
 ## Document / Reference Site
 
 [https://dev-rsquare.github.io/mint-ui-map-guide](https://dev-rsquare.github.io/mint-ui-map-guide)
+
+## 개발 및 NPM 배포
+
+### NPM 배포하는 방법
+
+#### 1. NPM 계정 로그인 확인
+먼저 NPM에 로그인되어 있는지 확인합니다.
+```bash
+npm whoami
+```
+만약 로그인이 안되어 있다면:
+```bash
+npm login
+```
+
+#### 2. 프로젝트 빌드
+배포하기 전에 반드시 프로젝트를 빌드해야 합니다.
+```bash
+npm run build
+```
+이 명령어는 `dist/` 폴더에 배포용 파일들을 생성합니다.
+
+#### 3. 버전 업데이트 (필요한 경우)
+새로운 기능이나 버그 수정이 있다면 버전을 올려야 합니다.
+
+- **버그 수정**: `1.1.2` → `1.1.3` (patch)
+```bash
+npm version patch
+```
+
+- **새로운 기능 추가**: `1.1.2` → `1.2.0` (minor)
+```bash
+npm version minor
+```
+
+- **호환성이 깨지는 변경**: `1.1.2` → `2.0.0` (major)
+```bash
+npm version major
+```
+
+#### 4. 배포 전 확인 (권장)
+실제 배포하기 전에 어떤 파일들이 배포될지 확인해보세요.
+```bash
+npm pack
+```
+이 명령어는 `.tgz` 파일을 생성하고, 배포될 파일 목록을 보여줍니다.
+
+#### 5. NPM에 배포
+스코프 패키지(`@mint-ui/map`)는 기본적으로 private이므로 public으로 배포해야 합니다.
+```bash
+npm publish --access public
+```
+
+#### 6. 배포 완료 확인
+배포가 성공했는지 NPM 웹사이트에서 확인하거나:
+```bash
+npm view @mint-ui/map
+```
+
+### 전체 배포 과정 요약
+
+```bash
+# 1단계: 로그인 확인
+npm whoami
+
+# 2단계: 빌드
+npm run build
+
+# 3단계: 버전 업데이트 (필요시)
+npm version patch
+
+# 4단계: 배포 전 확인 (선택사항)
+npm pack
+
+# 5단계: 배포
+npm publish --access public
+```
+
+### 현재 패키지 정보
+- **패키지명**: `@mint-ui/map`
+- **현재 버전**: `1.1.2`
+- **패키지 타입**: 스코프 패키지 (`@mint-ui` 네임스페이스 사용)
+
+### 테스트 버전 배포 (Test Tag)
+
+새로운 기능을 개발 중이거나 테스트가 필요한 경우, `test` tag를 사용하여 배포할 수 있습니다.
+
+#### 테스트 버전 배포 방법
+
+1. **새로운 브랜치 생성 및 이동**
+   - main 브랜치에서 분리하여 작업
+   ```bash
+   # 새로운 브랜치 생성 및 체크아웃
+   git checkout -b 1.2.0-test.1
+   ```
+
+2. **개발 중인 버전의 pre-release 버전 생성**
+   - 예: 1.2.0을 개발 중이라면 `1.2.0-test.1` 형식 사용
+   ```bash
+   # 버전 변경 (git tag 생성하지 않음)
+   npm version 1.2.0-test.1 --no-git-tag-version
+
+   # 빌드
+   npm run build
+
+   # test tag로 배포
+   npm publish --access public --tag test
+   ```
+
+3. **변경사항 커밋 및 푸시**
+   ```bash
+   git add .
+   git commit -m "chore: release 1.2.0-test.1"
+   git push origin 1.2.0-test.1
+   ```
+
+4. **수정 후 재배포 (같은 브랜치에서)**
+   ```bash
+   # 버전 업데이트
+   npm version 1.2.0-test.2 --no-git-tag-version
+
+   # 빌드 및 배포
+   npm run build
+   npm publish --access public --tag test
+
+   # 커밋 및 푸시
+   git add .
+   git commit -m "chore: release 1.2.0-test.2"
+   git push origin 1.2.0-test.1
+   ```
+
+   또는 새로운 테스트 브랜치를 만들 수도 있습니다:
+   ```bash
+   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
+   git add .
+   git commit -m "chore: release 1.2.0-test.2"
+   git push origin 1.2.0-test.2
+   ```
+
+5. **테스트 완료 후 정식 배포**
+   ```bash
+   # main 브랜치로 이동
+   git checkout main
+
+   # 테스트 브랜치 병합 (또는 PR 생성)
+   git merge 1.2.0-test.1
+
+   # 정식 버전으로 업데이트
+   npm version 1.2.0
+
+   # 빌드 및 배포
+   npm run build
+   npm publish --access public
+
+   # main에 푸시
+   git push origin main
+   git push origin 1.2.0  # version 명령어로 생성된 태그도 푸시
+   ```
+
+#### 테스트 버전 설치 방법
+
+```bash
+# test tag로 설치
+npm install @mint-ui/map@test
+
+# 특정 test 버전으로 설치
+npm install @mint-ui/map@1.2.0-test.1
+```
+
+#### 버전 네이밍 규칙
+
+- **현재 버전 기반 테스트**: `1.1.2-test.1` (현재 버전 1.1.2를 테스트하는 경우)
+- **신규 버전 개발 테스트**: `1.2.0-test.1` (새로운 기능으로 1.2.0을 만드는 경우)
+- **테스트 버전 증가**: `1.2.0-test.2`, `1.2.0-test.3` ...
+
+#### Tag별 버전 관리
+
+- **latest tag** (기본): 안정적인 정식 버전 (예: `1.1.2`)
+- **test tag**: 테스트 중인 버전 (예: `1.2.0-test.1`)
+
+`npm install @mint-ui/map` 명령어는 항상 `latest` tag의 버전을 설치하므로, test 버전은 명시적으로 `@test`를 붙여야만 설치됩니다.
+
+### 주의사항
+- 배포하기 전에 반드시 `npm run build`를 실행해야 합니다
+- 버전은 한 번 배포하면 되돌릴 수 없으니 신중하게 결정하세요
+- 스코프 패키지는 `--access public` 옵션을 반드시 붙여야 합니다
+- test tag로 배포할 때는 `--no-git-tag-version` 옵션을 사용하여 git tag 생성을 방지합니다

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

@@ -41,7 +41,7 @@ export declare abstract class MintMapController {
     mapInitialized: boolean;
     mapDivElement: HTMLDivElement;
     constructor(props: MintMapProps);
-    getMap(): any;
+    getMap(): MapVendorType | null;
     getMapType(): MapType;
     positionToOffset(position: Position): Offset;
     offsetToPosition(offset: Offset): Position;

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

@@ -8,6 +8,9 @@ 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('../types/MapDrawables.js');
+require('../types/MapEventTypes.js');
+var context = require('./advanced/woongCanvas/shared/context.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -96,7 +99,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>;