From 8f5eab13ba854648593a276c918b44ed5ccf9979 Mon Sep 17 00:00:00 2001
From: Dongkyuuuu <desktop@kakao.com>
Date: Thu, 16 Sep 2021 23:11:31 +0900
Subject: [PATCH] feat(docs): add example components

---
 README.md                      |  2 +-
 docs/.vitepress/config.js      | 11 -----------
 docs/.vitepress/theme/index.js | 15 +++++++++++++++
 docs/guide/Maps.md             | 11 +++++++----
 docs/guide/Marker.md           |  9 +++++++--
 playground/App.vue             |  7 ++-----
 6 files changed, 32 insertions(+), 23 deletions(-)
 create mode 100644 docs/.vitepress/theme/index.js

diff --git a/README.md b/README.md
index 21028a0..23b7370 100644
--- a/README.md
+++ b/README.md
@@ -38,4 +38,4 @@ $ yarn add vue3-naver-maps
 
 ## Contributing Guide
 
-현재 `vue3-naver-maps`는 계속 작성해 나가고 있습니다. 자유롭게 [Issue](https://github.com/DongKyuuuu/vue3-naver-maps/issues) 혹은 [Pull Request](https://github.com/DongKyuuuu/vue3-naver-maps/pulls)를 통해 기여 가능합니다. **여러분들의 기여를 두 팔 벌려 환영합니다 👍**
+현재 `vue3-naver-maps`는 계속 작성해 나가고 있습니다. 자유롭게 [Issue](https://github.com/DongKyuuuu/vue3-naver-maps/issues) 혹은 [Pull Request](https://github.com/DongKyuuuu/vue3-naver-maps/pulls)를 통해 기여 가능합니다. 👍
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 559b83c..0018051 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -11,17 +11,6 @@ const config = {
     },
   },
 
-  head: [
-    [
-      "script",
-      {
-        href: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9675166132883612",
-        crossorigin: "anonymous",
-        async: "",
-      },
-    ],
-  ],
-
   themeConfig: {
     repo: "DongKyuuuu/vue3-naver-maps",
     docsRepo: "DongKyuuuu/vue3-naver-maps",
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 0000000..aa89872
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,15 @@
+import theme from "vitepress/dist/client/theme-default";
+import Vue3NaverMaps, {
+  NaverMaps,
+  NaverMarker,
+} from "../../../dist/vue3-naver-maps";
+
+export default {
+  ...theme,
+  enhanceApp({ app, router, siteData }) {
+    app.use(Vue3NaverMaps, { clientId: "krm0ye8xno" });
+
+    app.component("naver-maps", NaverMaps);
+    app.component("naver-marker", NaverMarker);
+  },
+};
diff --git a/docs/guide/Maps.md b/docs/guide/Maps.md
index c48a466..3c69ab6 100644
--- a/docs/guide/Maps.md
+++ b/docs/guide/Maps.md
@@ -4,6 +4,10 @@
 
 ## 예시
 
+\
+<naver-maps width="100%" :mapOptions="{latitude: 37.56663888630603, longitude: 126.97838310403904, zoom: 16, zoomControl: false, zoomControlOptions: { position: 'TOP_RIGHT' }}">
+</naver-maps>
+
 ```vue
 <template>
   <naver-maps
@@ -25,12 +29,11 @@ export default {
   setup: () => {
     const map = ref(null);
     const mapOptions = {
-      latitude: 36, // 지도 중앙 위도
-      longitude: 126, // 지도 중앙 경도
-      zoom: 12,
+      latitude: 37.56663888630603, // 지도 중앙 위도
+      longitude: 126.97838310403904, // 지도 중앙 경도
+      zoom: 16,
       zoomControl: false,
       zoomControlOptions: { position: "TOP_RIGHT" },
-      mapTypeControl: false,
     };
     const initLayers = [
       "BACKGROUND",
diff --git a/docs/guide/Marker.md b/docs/guide/Marker.md
index 9630d64..7067bc6 100644
--- a/docs/guide/Marker.md
+++ b/docs/guide/Marker.md
@@ -4,12 +4,17 @@
 
 ## 예시
 
+\
+<naver-maps width="100%" :mapOptions="{latitude: 37.56663888630603, longitude: 126.97838310403904, zoom: 16, zoomControl: false, zoomControlOptions: { position: 'TOP_RIGHT' }}">
+<naver-marker :latitude="37.56663888630603" :longitude="126.97838310403904" />
+</naver-maps>
+
 ```vue
 <template>
   <naver-maps>
     <naver-marker
-      :latitude="37"
-      :longitude="126"
+      :latitude="37.56663888630603"
+      :longitude="126.97838310403904"
       @click="alertMarker()"
       @onLoad="onLoadMarker($event)"
     >
diff --git a/playground/App.vue b/playground/App.vue
index c147d84..6430f62 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -24,14 +24,13 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, computed } from "vue";
 import type { naverV3 } from "../dist/vue3-naver-maps";
-import { NaverMaps, NaverMarker, useMap } from "../dist/vue3-naver-maps";
+import { NaverMaps, NaverMarker } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
   components: { NaverMaps, NaverMarker },
   name: "App",
   setup: (props, { emit }) => {
     const map = ref<naver.maps.Map | null>(null);
-    const { setZoom } = useMap();
     const mapSize = reactive({
       width: "400px",
       height: "400px",
@@ -62,9 +61,7 @@ export default defineComponent({
       console.log(event);
     };
 
-    const change = () => {
-      setZoom(5);
-    };
+    const change = () => {};
     return {
       mapOptions,
       initLayers,