@rousen/react-naver-maps 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
## 설치
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install react-naver-maps
|
|
8
|
+
npm install @rousen/react-naver-maps
|
|
9
9
|
# 또는
|
|
10
|
-
yarn add react-naver-maps
|
|
10
|
+
yarn add @rousen/react-naver-maps
|
|
11
11
|
# 또는
|
|
12
|
-
pnpm add react-naver-maps
|
|
12
|
+
pnpm add @rousen/react-naver-maps
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## 사용법
|
|
@@ -39,13 +39,13 @@ import { Map, MapProvider, Marker, useMap } from "react-naver-maps";
|
|
|
39
39
|
|
|
40
40
|
function MyComponent() {
|
|
41
41
|
const { current } = useMap(); // 현재 맵 인스턴스 접근
|
|
42
|
-
|
|
42
|
+
|
|
43
43
|
const handleClick = () => {
|
|
44
44
|
if (current) {
|
|
45
45
|
current.setCenter(new naver.maps.LatLng(37.4979, 127.0276));
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
|
|
48
|
+
|
|
49
49
|
return <button onClick={handleClick}>중심 이동</button>;
|
|
50
50
|
}
|
|
51
51
|
```
|
|
@@ -62,12 +62,12 @@ function MyComponent() {
|
|
|
62
62
|
|
|
63
63
|
```tsx
|
|
64
64
|
interface MapProps {
|
|
65
|
-
ncpKeyId: string;
|
|
66
|
-
id?: string;
|
|
67
|
-
mapTypeId?: naver.maps.MapTypeId;
|
|
68
|
-
mapOptions?: naver.maps.MapOptions;
|
|
69
|
-
submodules?: NaverMapsSubmodule[];
|
|
70
|
-
style?: React.CSSProperties;
|
|
65
|
+
ncpKeyId: string; // 필수: NCP 클라이언트 ID
|
|
66
|
+
id?: string; // 맵 인스턴스 ID (여러 맵 관리 시 사용)
|
|
67
|
+
mapTypeId?: naver.maps.MapTypeId; // 지도 타입 (기본값: "normal")
|
|
68
|
+
mapOptions?: naver.maps.MapOptions; // 네이버 맵 옵션
|
|
69
|
+
submodules?: NaverMapsSubmodule[]; // 서브모듈 (gl, traffic, transit 등)
|
|
70
|
+
style?: React.CSSProperties; // 컨테이너 스타일
|
|
71
71
|
onLoad?: (map: naver.maps.Map) => void;
|
|
72
72
|
onZoomStart?: (map: naver.maps.Map) => void;
|
|
73
73
|
onZoomEnd?: (map: naver.maps.Map) => void;
|
|
@@ -90,11 +90,7 @@ interface MapProps {
|
|
|
90
90
|
### Overlay 컴포넌트 예제
|
|
91
91
|
|
|
92
92
|
```tsx
|
|
93
|
-
<Overlay
|
|
94
|
-
position={[127.0276, 37.4979]}
|
|
95
|
-
zIndex={100}
|
|
96
|
-
anchor="center"
|
|
97
|
-
>
|
|
93
|
+
<Overlay position={[127.0276, 37.4979]} zIndex={100} anchor="center">
|
|
98
94
|
<div style={{ background: "white", padding: "10px" }}>
|
|
99
95
|
커스텀 오버레이 내용
|
|
100
96
|
</div>
|
package/package.json
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './ExampleComponent.css';
|
|
3
|
-
export interface ExampleComponentProps {
|
|
4
|
-
/**
|
|
5
|
-
* 컴포넌트에 표시할 텍스트
|
|
6
|
-
*/
|
|
7
|
-
text?: string;
|
|
8
|
-
/**
|
|
9
|
-
* 클릭 이벤트 핸들러
|
|
10
|
-
*/
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* 예제 컴포넌트입니다.
|
|
15
|
-
*/
|
|
16
|
-
declare const ExampleComponent: React.FC<ExampleComponentProps>;
|
|
17
|
-
export default ExampleComponent;
|
|
18
|
-
//# sourceMappingURL=ExampleComponent.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleComponent.d.ts","sourceRoot":"","sources":["../../src/components/ExampleComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CASrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/dist/index.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.example-component{background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;padding:16px;transition:all .2s ease}.example-component:hover{background-color:#f0f0f0;border-color:#ccc}.example-component p{color:#333;font-size:16px;margin:0}
|
package/dist/index.esm.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.example-component{background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;padding:16px;transition:all .2s ease}.example-component:hover{background-color:#f0f0f0;border-color:#ccc}.example-component p{color:#333;font-size:16px;margin:0}
|