feat(docs): create docs

map docs
marker docs

README.md

@@ -1,9 +1,12 @@
-# vue3-naver-maps
+# <center>vue3-naver-maps (WIP)</center>
 
-본 프로젝트는 **개발 진행중인(pre-release)** 프로젝트 입니다.
+<center>
+본 프로젝트는 <b>개발 진행중인(pre-release)</b> 프로젝트 입니다.
 
 업데이트에 대한 자세한 현황은 [Update Roadmap](https://github.com/DongKyuuuu/vue3-naver-maps/issues/3)에서 확인 가능합니다.
 
+</center>
+
 ## Introduce
 
 `vue3-naver-maps`는 `NAVER 지도 API v3` Vue3에서 간편하게 사용하기 위해 작성 된 라이브러리 입니다.

docs/.vitepress/config.js

@@ -0,0 +1,91 @@
+const config = {
+  lang: "ko",
+  title: "Vue3 Naver Maps",
+  description: "NaverMap component for Vue3",
+  locales: {
+    "/": {
+      lang: "ko",
+      title: "Vue3 Naver Maps",
+      description: "NaverMap component for Vue3",
+    },
+  },
+
+  themeConfig: {
+    repo: "DongKyuuuu/vue3-naver-maps",
+    docsRepo: "DongKyuuuu/vue3-naver-maps",
+    docsDir: "docs",
+    docsBranch: "main",
+    editLinks: true,
+    editLinkText:
+      "이 문서에 대한 의견이 있으시거나, 문제를 발견하셨으면 제보해주세요!",
+    locales: {
+      // Korean
+      "/": {
+        label: "한국어",
+        selectText: "Languages",
+        nav: [
+          {
+            text: "Guide",
+            link: "/guide/",
+          },
+          {
+            text: "API 레퍼런스",
+            link: "/api/",
+          },
+          {
+            text: "NaverMapsAPI",
+            link: "https://navermaps.github.io/maps.js.ncp/",
+          },
+          {
+            text: "Changelog",
+            link: "https://github.com/DongKyuuuu/vue3-naver-maps/blob/main/CHANGELOG.md",
+          },
+        ],
+        sidebar: [
+          {
+            text: "소개",
+            link: "/",
+          },
+          {
+            text: "설치하기",
+            link: "/installation",
+          },
+          {
+            text: "컴포넌트 가이드",
+            collapsable: false,
+            children: [
+              {
+                text: "시작하기",
+                link: "/guide/",
+              },
+              {
+                text: "naver-map",
+                link: "/guide/componentMap",
+              },
+              {
+                text: "naver-marker",
+                link: "/guide/componentMarker",
+              },
+            ],
+          },
+          {
+            text: "타입스크립트",
+            collapsable: false,
+            children: [
+              // {
+              //   text: "타입스크립트 지원",
+              //   link: "/types/",
+              // },
+              {
+                text: "타입정의",
+                link: "/types/define",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+};
+
+module.exports = config;

docs/api/index.md

@@ -0,0 +1,163 @@
+---
+sidebar: auto
+---
+
+# API 레퍼런스
+
+## 설치옵션
+
+`main.js`에서 vue3-naver-maps를 설치 할 때, 사용할 수 있는 옵션 입니다.
+
+### clinetId
+
+- **필수**
+- **타입:** `string`
+- **상세:**
+
+네이버 지도에서 발급받은 ClinetId 값을 입력합니다. 기능을 이용하기 위해선 필수적으로 입력 되어야 합니다.
+
+```javascript
+// main.js
+import { createApp } from "vue";
+import naver from "vue3-naver-maps";
+
+const app = createApp(App);
+
+app.use(naver, { clientId: "your clientId" }).mount("#app");
+```
+
+### category
+
+- **선택**
+- **타입:** `"ncp" | "gov" | "fin"`
+- **기본값:** `ncp`
+- **상세:**
+
+사용할 클라이언트 종류를 입력합니다. `ncp`가 기본값으로 설정 되어 있습니다. 다른 클라이언트 타입을 이용하고 있는경우 사용해주세요.
+
+`ncp`: 네이버클라우드 플랫폼<br/>
+`gov`: 공공기관용<br/>
+`fin`: 금융기관용
+
+```javascript
+// main.js
+import { createApp } from "vue";
+import naver from "vue3-naver-maps";
+
+const app = createApp(App);
+
+app.use(naver, { clientId: "your clientId", category: "gov" }).mount("#app");
+```
+
+### subModules
+
+- **선택**
+- **타입:** `string`
+- **상세:**
+
+사용할 서브모듈을 생성합니다. 여러개의 서브모듈을 이용할 경우 `콤마(,)`를 이용하여 작성해야 합니다.
+
+```javascript
+// main.js
+import { createApp } from "vue";
+import naver from "vue3-naver-maps";
+
+const app = createApp(App);
+
+app
+  .use(naver, { clientId: "your clientId", subModules: "panorama,geocoder" })
+  .mount("#app");
+```
+
+## naver-map
+
+### width
+
+- **선택**
+- **타입:** `string`
+- **기본값:** `400px`
+- **상세:**
+
+생성된 지도의 너비를 정합니다. `px` `em` `%` `vh` `vw` 등 css 단위 전부 사용 가능합니다.
+
+### height
+
+- **선택**
+- **타입:** `string`
+- **기본값:** `400px`
+- **상세:**
+
+생성된 지도의 높이를 정합니다. `px` `em` `%` `vh` `vw` 등 css 단위 전부 사용 가능합니다.
+
+### mapOptions
+
+- **선택**
+- **타입:** [`naverV3.mapOptions`](/types/define.html#mapoptions)
+- **상세:**
+
+`naver.maps.mapOptions`타입을 상속받아 사용 합니다. 지도 생성 옵션을 지정 합니다. 옵션을 지정하지 않는 경우, 네이버에서 제공 하는 기본 지도 옵션을 사용합니다.
+
+`latitude`, `longitude`로 맵 로드 시 중앙을 설정 할 수 있습니다.
+
+### initLayers
+
+- **선택**
+- **타입:** [`naverV3.initLayer[]`](/types/define.html#initlayer)
+- **기본값:** `[]`
+- **상세:**
+
+기본 레이어를 설정합니다. 대문자 그대로 사용하여야 하며, 아래의 지정 된 옵션만 사용해야 합니다.
+
+- `BACKGROUND`
+- `BACKGROUND_DETAIL`
+- `BICYCLE`
+- `CADASTRAL`
+- `CTT`
+- `HIKING_TRAIL`
+- `PANORAMA`
+- `POI_KOREAN`
+- `TRANSIT`
+- `KOREAN`
+- `ENGLISH`
+- `CHINESE`
+- `JAPANESE`
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Map`
+- **상세:**
+
+컴포넌트에서 생성한 지도 객체를 반환 합니다. 반환받은 네이버 맵 객체를 통해 지도를 설정 할 수 있습니다.
+
+## naver-marker
+
+### latitude
+
+- **필수**
+- **타입:** `number`
+- **상세:**
+
+마커의 위도를 지정합니다.
+
+### longitude
+
+- **필수**
+- **타입:** `number`
+- **상세:**
+
+마커의 경도를 지정합니다.
+
+### htmlIcon
+
+- **선택**
+- **타입:** [`naverV3.htmlIcon`](/types/define.html#htmlicon)
+- **상세:**
+
+htmlIcon을 사용하는 경우, 초기 `size`와 `anchor`를 지정합니다. `@onLoad`를 통해 마커 객체를 반환 받고 `setIcon()`을 사용하여도 무관합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Marker`
+- **상세:**

docs/guide/componentMap.md

@@ -0,0 +1,63 @@
+# naver-map
+
+`naver-map` 컴포넌트는 지도를 생성하는 컴포넌트 입니다. 해당 컴포넌트를 사용하지 않고 다른 컴포넌트를 사용하는 경우 동작하지 않습니다. 모든 컴포넌트 중 가장 먼저 사용해주셔야 합니다.
+
+## 예시
+
+```vue
+<template>
+  <naver-map
+    width="400px"
+    height="400px"
+    :mapOptions="mapOptions"
+    :initLayers="initLayers"
+    @onLoad="onLoadMap($event)"
+  >
+  </naver-map>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup: () => {
+    const map = ref(null);
+    const mapOptions = {
+      latitude: 36,
+      longitude: 126,
+      zoom: 12,
+      zoomControl: false,
+      zoomControlOptions: { position: "TOP_RIGHT" },
+      mapTypeControl: false,
+    };
+    const initLayers = [
+      "BACKGROUND",
+      "BACKGROUND_DETAIL",
+      "POI_KOREAN",
+      "TRANSIT",
+      "ENGLISH",
+    ];
+
+    const onLoadMap = (mapObject) => {
+      map.value = mapObject;
+    };
+
+    return {
+      map,
+      mapOptions,
+      initLayers,
+    };
+  },
+};
+</script>
+```
+
+## 설정
+
+모든 Props는 필수 값이 아닙니다. 해당 Props이 없는 경우 기본값이 적용 됩니다. `@onLoad`도 마찬가지로 naver 객체를 설정할 일이 없으면 사용하지 않아도 상관 없습니다.
+
+자세한 설정 옵션은 [naver-map 옵션](/api/#naver-map)에서 확인 가능합니다.
+
+:::info 알림
+기본 값은 네이버에서 제공하는 기본 값으로 설정 됩니다.
+:::

docs/guide/componentMarker.md

@@ -0,0 +1,50 @@
+# naver-marker
+
+`naver-marker` 마커를 생성하는 컴포넌트 입니다. `naver-map` 생성 이후에 생성됩니다. Vue.js의 `v-on` 이벤트를 같이 사용 가능합니다.
+
+## 예시
+
+```vue
+<template>
+  <naver-map>
+    <naver-marker
+      :latitude="37"
+      :longitude="126"
+      @click="alertMarker()"
+      @onLoad="onLoadMarker($event)"
+    >
+      <!-- Html Icon  -->
+    </naver-marker>
+  </naver-map>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup: () => {
+    const marker = ref(null);
+    const onLoadMarker = (markerObject) => {
+      marker.value = markerObject;
+    };
+    const alertMarker = () => {
+      console.log(marker.value);
+    };
+
+    return { onLoadMarker, alertMarker };
+  },
+};
+</script>
+```
+
+## 설정
+
+`latitude`, `longitude`는 필수적으로 입력해 주셔야 합니다.
+
+컴포넌트 내부에 코드를 작성하면 `HtmlIcon`이 적용 됩니다. `HtmlIcon`사용 시 `anchor`와 `size`를 별도로 지정해 주셔야 마커위치를 정확히 유지 할 수 있습니다.
+
+자세한 설정 옵션은 [naver-marker 옵션](/api/#naver-marker)에서 확인 가능합니다.
+
+:::info 알림
+HtmlIcon을 사용하지 않으면 네이버 기본 마커 스타일이 적용 됩니다.
+:::