feat(docs): add polygone docs

docs/.vitepress/config.js

@@ -98,6 +98,10 @@ const config = {
                 text: "Rectangle",
                 link: "/guide/Rectangle",
               },
+              {
+                text: "Polygon",
+                link: "/guide/Polygon",
+              },
             ],
           },
           {

docs/.vitepress/theme/index.js

@@ -6,6 +6,7 @@ import NaverInfoWindow from "../../example/InfoWindow.vue";
 import NaverCircle from "../../example/Circle.vue";
 import NaverEllipse from "../../example/Ellipse.vue";
 import NaverRectangle from "../../example/Rectangle.vue";
+import NaverPolygon from "../../example/Polygon.vue";
 
 export default {
   ...theme,
@@ -15,6 +16,6 @@ export default {
     app.component("naver-info-window", NaverInfoWindow);
     app.component("naver-circle", NaverCircle);
     app.component("naver-ellipse", NaverEllipse);
-    app.component("naver-rectangle", NaverRectangle);
+    app.component("naver-polygon", NaverPolygon);
   },
 };

docs/api/index.md

@@ -338,3 +338,76 @@ const bounds = {
 - **선택**
 - **반환타입:** `naver.maps.Rectangle`
 - **상세:**
+-
+
+## NaverPolygon
+
+폴리곤 컴포넌트에서 사용되는 Props 입니다.
+
+### paths
+
+- **필수**
+- **타입:** `naver.maps.ArrayOfCoords`| `naver.maps.KVOArrayOfCoords` | `naver.maps ArrayOfCoordsLiteral`
+- **상세:**
+
+연결 될 각 좌표들을 설정합니다.
+
+```js
+// naver.maps.ArrayOfCoords 타입
+const paths = [
+  new naver.maps.LatLng(38, 127),
+  new naver.maps.LatLng(39, 128),
+  new naver.maps.LatLng(39, 128),
+];
+```
+
+```js
+// naver.maps.KVOArrayOfCoords 타입
+const paths = [
+  {
+    south: 37.566616443521745,
+    north: 38.566616443521745,
+    west: 126.97837068565364,
+    east: 127.97837068565364,
+  },
+  {
+    south: 37.566616443521745,
+    north: 38.566616443521745,
+    west: 126.97837068565364,
+    east: 127.97837068565364,
+  },
+];
+```
+
+```js
+// naver.maps ArrayOfCoordsLiteral 타입
+const paths = [
+  [126.9797895, 37.5670131],
+  [126.979215, 37.5649555],
+  [126.9766789, 37.5649082],
+  [126.9789515, 37.5637645],
+  [126.9785598, 37.5614914],
+  [126.9804949, 37.5632666],
+  [126.9827689, 37.5619065],
+  [126.9818039, 37.5639213],
+  [126.9837414, 37.5653719],
+  [126.9811162, 37.5651081],
+];
+```
+
+위와 같은 예제로 paths를 지정할 수 있습니다.
+
+### options
+
+- **선택**
+- **타입:** `naver.maps.PolygonOptions`
+- **기본값:** `{}`
+- **상세:**
+
+폴리곤 컴포넌트에서 사용 가능한 추가적인 옵션을 입력합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Polygon`
+- **상세:**

docs/example/Polygon.vue

@@ -0,0 +1,66 @@
+<template>
+  <naver-maps
+    width="100%"
+    height="400px"
+    :mapOptions="mapOptions"
+    :initLayers="initLayers"
+    @onLoad="onLoadMap($event)"
+  >
+    <naver-polygon :paths="paths" @onLoad="onLoadPolygon($event)" />
+  </naver-maps>
+</template>
+
+<script>
+import { ref } from "vue";
+import { NaverMaps, NaverPolygon } from "../../dist/vue3-naver-maps";
+
+export default {
+  components: { NaverMaps, NaverPolygon },
+  setup: () => {
+    const map = ref();
+    const polygon = ref();
+    const paths = ref([
+      [126.9797895, 37.5670131],
+      [126.979215, 37.5649555],
+      [126.9766789, 37.5649082],
+      [126.9789515, 37.5637645],
+      [126.9785598, 37.5614914],
+      [126.9804949, 37.5632666],
+      [126.9827689, 37.5619065],
+      [126.9818039, 37.5639213],
+      [126.9837414, 37.5653719],
+      [126.9811162, 37.5651081],
+    ]);
+    const mapOptions = {
+      latitude: 37.56663888630603, // 지도 중앙 위도
+      longitude: 126.97838310403904, // 지도 중앙 경도
+      zoom: 15,
+      zoomControl: false,
+      zoomControlOptions: { position: "TOP_RIGHT" },
+    };
+    const initLayers = [
+      "BACKGROUND",
+      "BACKGROUND_DETAIL",
+      "POI_KOREAN",
+      "TRANSIT",
+      "ENGLISH",
+    ];
+
+    const onLoadMap = (mapObject) => {
+      map.value = mapObject;
+    };
+    const onLoadPolygon = (polygonObject) => {
+      polygon.value = polygonObject;
+    };
+
+    return {
+      map,
+      mapOptions,
+      initLayers,
+      onLoadMap,
+      onLoadPolygon,
+      paths,
+    };
+  },
+};
+</script>

docs/guide/Polygon.md

@@ -0,0 +1,97 @@
+# Polygon
+
+`NaverPolygon`는 폴리곤을 생성하는 컴포넌트 입니다. `NaverMaps` 생성 이후에 사용 가능합니다.
+
+## 예시
+
+\
+<naver-polygon />
+
+```vue
+<template>
+  <naver-maps
+    width="100%"
+    height="400px"
+    :mapOptions="mapOptions"
+    :initLayers="initLayers"
+    @onLoad="onLoadMap($event)"
+  >
+    <naver-polygon :paths="paths" @onLoad="onLoadPolygon($event)" />
+  </naver-maps>
+</template>
+
+<script>
+import { ref } from "vue";
+import { NaverMaps, NaverPolygon } from "../../dist/vue3-naver-maps";
+
+export default {
+  components: { NaverMaps, NaverPolygon },
+  setup: () => {
+    const map = ref();
+    const polygon = ref();
+    const paths = ref([
+      [126.9797895, 37.5670131],
+      [126.979215, 37.5649555],
+      [126.9766789, 37.5649082],
+      [126.9789515, 37.5637645],
+      [126.9785598, 37.5614914],
+      [126.9804949, 37.5632666],
+      [126.9827689, 37.5619065],
+      [126.9818039, 37.5639213],
+      [126.9837414, 37.5653719],
+      [126.9811162, 37.5651081],
+    ]);
+    const mapOptions = {
+      latitude: 37.56663888630603, // 지도 중앙 위도
+      longitude: 126.97838310403904, // 지도 중앙 경도
+      zoom: 15,
+      zoomControl: false,
+      zoomControlOptions: { position: "TOP_RIGHT" },
+    };
+    const initLayers = [
+      "BACKGROUND",
+      "BACKGROUND_DETAIL",
+      "POI_KOREAN",
+      "TRANSIT",
+      "ENGLISH",
+    ];
+
+    const onLoadMap = (mapObject) => {
+      map.value = mapObject;
+    };
+    const onLoadPolygon = (polygonObject) => {
+      polygon.value = polygonObject;
+    };
+
+    return {
+      map,
+      mapOptions,
+      initLayers,
+      onLoadMap,
+      onLoadPolygon,
+      paths,
+    };
+  },
+};
+</script>
+```
+
+자세한 Props, Emit 옵션은 [NaverPolygon](../api/#naverpolygon)에서 확인 가능합니다.
+
+## 설정
+
+`paths`는 필수적으로 입력해 주셔야 합니다. 연결할 각 좌표를 의미 합니다.
+
+## UI 이벤트
+
+이벤트에 대한 자세한 설명은 [이벤트 상세설명](https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Polygon.html#toc28__anchor)에서 확인 가능합니다.
+
+- click
+- clickable_changed
+- dblclick
+- mousedown
+- mouseout
+- mouseover
+- mouseup
+- visible_changed
+- zIndex_changed