@mint-ui/map

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

Installation

yarn add @mint-ui/map

npm install @mint-ui/map

Examples

...
...

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

개발 및 NPM 배포

NPM 배포하는 방법

1. NPM 계정 로그인 확인

먼저 NPM에 로그인되어 있는지 확인합니다.

npm whoami

만약 로그인이 안되어 있다면:

npm login

2. 프로젝트 빌드

배포하기 전에 반드시 프로젝트를 빌드해야 합니다.

npm run build

이 명령어는 dist/ 폴더에 배포용 파일들을 생성합니다.

3. 버전 업데이트 (필요한 경우)

새로운 기능이나 버그 수정이 있다면 버전을 올려야 합니다.

• 버그 수정: 1.1.2 → 1.1.3 (patch)

npm version patch

• 새로운 기능 추가: 1.1.2 → 1.2.0 (minor)

npm version minor

• 호환성이 깨지는 변경: 1.1.2 → 2.0.0 (major)

npm version major

4. 배포 전 확인 (권장)

실제 배포하기 전에 어떤 파일들이 배포될지 확인해보세요.

npm pack

이 명령어는 .tgz 파일을 생성하고, 배포될 파일 목록을 보여줍니다.

5. NPM에 배포

스코프 패키지(@mint-ui/map)는 기본적으로 private이므로 public으로 배포해야 합니다.

npm publish 

6. 배포 완료 확인

배포가 성공했는지 NPM 웹사이트에서 확인하거나:

npm view @mint-ui/map

전체 배포 과정 요약

# 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 브랜치에서 분리하여 작업

   # 새로운 브랜치 생성 및 체크아웃
   git checkout -b 1.2.0-test.1

2. 개발 중인 버전의 pre-release 버전 생성

   • 예: 1.2.0을 개발 중이라면 1.2.0-test.1 형식 사용

   # 버전 변경 (git tag 생성하지 않음)
   npm version 1.2.0-test.1 --no-git-tag-version
   
   # 빌드
   npm run build
   
   # test tag로 배포
   npm publish  --tag test

3. 변경사항 커밋 및 푸시

   git add .
   git commit -m "chore: release 1.2.0-test.1"
   git push origin 1.2.0-test.1

4. 수정 후 재배포 (같은 브랜치에서)

   # 버전 업데이트
   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

   또는 새로운 테스트 브랜치를 만들 수도 있습니다:

   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. 테스트 완료 후 정식 배포

   # 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 명령어로 생성된 태그도 푸시

테스트 버전 설치 방법

# test tag로 설치
npm install @mint-ui/map@test

# 특정 test 버전으로 설치
npm install @mint-ui/[email protected]

버전 네이밍 규칙

• 현재 버전 기반 테스트: 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 생성을 방지합니다