npm package: @mint-ui/map
Description: - React map library  - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported
Author: RSQUARE
Latest version: 1.2.5

# @mint-ui/map

- React map library 
- Control various map with one interface
- Google, Naver, Kakao map supported now
- Typescript supported
- Canvas marker supported

## Installation

``` bash
yarn add @mint-ui/map

npm install @mint-ui/map
```

## Examples

``` javascript
...
...

import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'

const root = ReactDOM.createRoot(
  document.getElementById('root')
)

function MyMapComponent(){

  return <MintMap 
    mapType={'google'} 
    mapKey={'YOUR_GOOGLE_MAP_KEY'}
    mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
    base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
  >
    {/* Your marker */}
    <MapMarkerWrapper position={new Position(-25.344, 131.031)}>
    
      {/* Your marker elements */}
      <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
      
    </MapMarkerWrapper>

    {/* Canvas marker */}
    <CanvasMarker

      /* Canvas renderer */
      renderer={({ context, offset, payload }) => {
        context.beginPath();

        // rect
        context.rect(offset[0].x, offset[0].y, 20, 20);
        context.fillStyle = 'orange';
        context.fill();

        // rect outline
        context.strokeStyle = 'red';
        context.strokeRect(offset[0].x, offset[0].y, 20, 20);

        // font
        context.fillStyle = 'white';
        context.font = '10px caption';
        context.fillText(String(payload?.no), offset[0].x + 2, offset[0].y + 14);
        context.closePath();
      }}
      zIndex={2}
      data={markers}
    />
      
  </MintMap>

}

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 
```

#### 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 
```

### 현재 패키지 정보
- **패키지명**: `@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  --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  --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  --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 

   # 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`를 실행해야 합니다
- 버전은 한 번 배포하면 되돌릴 수 없으니 신중하게 결정하세요
- 스코프 패키지는 `` 옵션을 반드시 붙여야 합니다
- test tag로 배포할 때는 `--no-git-tag-version` 옵션을 사용하여 git tag 생성을 방지합니다