@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 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 /}


{/ Your marker elements /}


{/ Canvas marker /}

/ 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}
/>

}

root.render(())

`

Document / Reference Site

https://dev-rsquare.github.io/mint-ui-map-guide

개발 및 NPM 배포

$3

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

$3

`bash


1단계: 로그인 확인

npm whoami

2단계: 빌드

npm run build

3단계: 버전 업데이트 (필요시)

npm version patch

4단계: 배포 전 확인 (선택사항)

npm pack

5단계: 배포

npm publish
`

$3

- 패키지명: @mint-ui/map
- 현재 버전: 1.1.2
- 패키지 타입: 스코프 패키지 (@mint-ui 네임스페이스 사용)

$3

새로운 기능을 개발 중이거나 테스트가 필요한 경우, 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를 붙여야만 설치됩니다.

$3


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