🏗️ Add E2E, Update Docs System

- #60
JaeSeoKim · Sep 8, 2023 · 6ab3ba4 · 6ab3ba4
1 parent ee5036b
commit 6ab3ba4
Show file tree

Hide file tree

Showing 118 changed files with 9,581 additions and 187 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -13,6 +13,7 @@ esm
 .next
 
 stats.html
+playwright-report
 
 # docs
 

diff --git a/dev/index.html b/dev/index.html
@@ -1,13 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
-  <body>
-    <div id="root"></div>
+  <body id="root">
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/dev/package.json b/dev/package.json
@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-kakao-maps-sdk": "workspace:^"
+    "react-kakao-maps-sdk": "workspace:^",
+    "react-router-dom": "^6.15.0",
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
     "@configs/eslint-config": "workspace:^",

diff --git a/dev/src/App.tsx b/dev/src/App.tsx
@@ -1,59 +1,21 @@
-import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk"
+import { Link } from "react-router-dom"
+import { samples } from "./pages/samples/sampleList"
 
 function App() {
-  useKakaoLoader({
-    appkey: import.meta.env.VITE_KAKAOMAP_API_KEY,
-    libraries: ["clusterer", "drawing", "services"],
-  })
-
-  const positions = [
-    {
-      title: "카카오",
-      latlng: { lat: 33.450705, lng: 126.570677 },
-    },
-    {
-      title: "생태연못",
-      latlng: { lat: 33.450936, lng: 126.569477 },
-    },
-    {
-      title: "텃밭",
-      latlng: { lat: 33.450879, lng: 126.56994 },
-    },
-    {
-      title: "근린공원",
-      latlng: { lat: 33.451393, lng: 126.570738 },
-    },
-  ]
-
   return (
-    <Map // 지도를 표시할 Container
-      center={{
-        // 지도의 중심좌표
-        lat: 33.450701,
-        lng: 126.570667,
-      }}
-      style={{
-        // 지도의 크기
-        width: "100%",
-        height: "450px",
-      }}
-      level={3} // 지도의 확대 레벨
-    >
-      {positions.map((position) => (
-        <MapMarker
-          key={`${position.title}-${position.latlng}`}
-          position={position.latlng} // 마커를 표시할 위치
-          image={{
-            src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png", // 마커이미지의 주소입니다
-            size: {
-              width: 24,
-              height: 35,
-            }, // 마커이미지의 크기입니다
-          }}
-          title={position.title} // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
-        />
+    <>
+      <h1>react-kakao-maps-sdk dev server</h1>
+      <p>
+        <Link to={"/dev"}>dev page</Link>
+      </p>
+      <hr />
+      <h2>sample list</h2>
+      {samples.map((sample) => (
+        <p key={sample.path}>
+          <Link to={`/samples/${sample.path!}`}>{sample.path!}</Link>
+        </p>
       ))}
-    </Map>
+    </>
   )
 }
 

diff --git a/dev/src/main.tsx b/dev/src/main.tsx
@@ -1,9 +1,27 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.tsx"
+import { RouterProvider, createBrowserRouter } from "react-router-dom"
+import { Dev } from "./pages/dev.tsx"
+import { samples } from "./pages/samples/sampleList.tsx"
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+  {
+    path: "/dev",
+    element: <Dev />,
+  },
+  {
+    path: "/samples",
+    children: samples,
+  },
+])
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )
diff --git a/dev/src/pages/dev.tsx b/dev/src/pages/dev.tsx
@@ -0,0 +1,25 @@
+import { Map, useKakaoLoader } from "react-kakao-maps-sdk"
+
+export function Dev() {
+  useKakaoLoader({
+    appkey: import.meta.env.VITE_KAKAOMAP_API_KEY,
+    libraries: ["clusterer", "drawing", "services"],
+  })
+
+  return (
+    <Map // 지도를 표시할 Container
+      id="map"
+      center={{
+        // 지도의 중심좌표
+        lat: 33.450701,
+        lng: 126.570667,
+      }}
+      style={{
+        // 지도의 크기
+        width: "100%",
+        height: "350px",
+      }}
+      level={3} // 지도의 확대 레벨
+    />
+  )
+}
diff --git a/dev/src/pages/samples/basicMap.tsx b/dev/src/pages/samples/basicMap.tsx
@@ -0,0 +1,23 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+
+export default function BasicMap() {
+  useKakaoLoader()
+
+  return (
+    <Map // 지도를 표시할 Container
+      id="map"
+      center={{
+        // 지도의 중심좌표
+        lat: 33.450701,
+        lng: 126.570667,
+      }}
+      style={{
+        // 지도의 크기
+        width: "100%",
+        height: "350px",
+      }}
+      level={3} // 지도의 확대 레벨
+    />
+  )
+}
diff --git a/dev/src/pages/samples/moveMap.tsx b/dev/src/pages/samples/moveMap.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react"
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+
+export default function MoveMap() {
+  useKakaoLoader()
+
+  const [state, setState] = useState({
+    // 지도의 초기 위치
+    center: { lat: 33.450701, lng: 126.570667 },
+    // 지도 위치 변경시 panto를 이용할지에 대해서 정의
+    isPanto: false,
+  })
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        center={state.center}
+        isPanto={state.isPanto}
+        style={{
+          // 지도의 크기
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+      ></Map>
+      <p>
+        <button
+          onClick={() =>
+            setState({
+              center: { lat: 33.452613, lng: 126.570888 },
+              isPanto: false,
+            })
+          }
+        >
+          지도 중심좌표 이동시키기
+        </button>{" "}
+        <button
+          onClick={() =>
+            setState({
+              center: { lat: 33.45058, lng: 126.574942 },
+              isPanto: true,
+            })
+          }
+        >
+          지도 중심좌표 부드럽게 이동시키기
+        </button>
+      </p>
+    </>
+  )
+}
diff --git a/dev/src/pages/samples/sampleList.tsx b/dev/src/pages/samples/sampleList.tsx
@@ -0,0 +1,14 @@
+import { RouteObject } from "react-router-dom"
+import BasicMap from "./basicMap"
+import MoveMap from "./moveMap"
+
+export const samples: RouteObject[] = [
+  {
+    path: "basicMap",
+    element: <BasicMap />,
+  },
+  {
+    path: "moveMap",
+    element: <MoveMap />,
+  },
+]
diff --git a/dev/src/pages/samples/useKakaoLoader.tsx b/dev/src/pages/samples/useKakaoLoader.tsx
@@ -0,0 +1,8 @@
+import { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk"
+
+export default function useKakaoLoader() {
+  useKakaoLoaderOrigin({
+    appkey: import.meta.env.VITE_KAKAOMAP_API_KEY,
+    libraries: ["clusterer", "drawing", "services"],
+  })
+}
diff --git a/docs/.eslintrc b/docs/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@configs/eslint-config"]
+}
diff --git a/docs/docs/intro.md → docs/docs/intro.mdx b/docs/docs/intro.md → docs/docs/intro.mdx
diff --git a/docs/docs/sample/map/basicMap.mdx b/docs/docs/sample/map/basicMap.mdx
@@ -7,22 +7,6 @@ sidebar_position: 1
 
 > original docs : https://apis.map.kakao.com/web/sample/basicMap/
 
-```jsx live
-function(){
-  return (
-    <Map // 지도를 표시할 Container
-      center={{
-        // 지도의 중심좌표
-        lat: 33.450701,
-        lng: 126.570667,
-      }}
-      style={{
-        // 지도의 크기
-        width: "100%",
-        height: "450px",
-      }}
-      level={3} // 지도의 확대 레벨
-    />
-  );
-}
-```
+import codesource from "!!raw-loader!../../../../dev/src/pages/samples/basicMap.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>
diff --git a/docs/docs/sample/map/moveMap.mdx b/docs/docs/sample/map/moveMap.mdx
@@ -7,56 +7,6 @@ sidebar_position: 2
 
 > original docs : https://apis.map.kakao.com/web/sample/moveMap/
 
-```jsx live
-function(){
-  const [state, setState] = useState({
-    // 지도의 초기 위치
-    center: { lat: 33.452613, lng: 126.570888 },
-    // 지도 위치 변경시 panto를 이용할지에 대해서 정의
-    isPanto: false,
-  })
+import codesource from "!!raw-loader!../../../../dev/src/pages/samples/moveMap.tsx"
 
-  return (
-    <>
-      <Map // 지도를 표시할 Container
-        center={state.center}
-        isPanto={state.isPanto}
-        style={{
-          // 지도의 크기
-          width: "100%",
-          height: "450px",
-        }}
-        level={3} // 지도의 확대 레벨
-      >
-        <div
-          style={{
-            display: "flex",
-            gap: "10px",
-          }}
-        >
-          <button
-            onClick={() =>
-              setState({
-                center: { lat: 33.452613, lng: 126.570888 },
-                isPanto: false,
-              })
-            }
-          >
-            지도 중심좌표 이동시키기
-          </button>
-          <button
-            onClick={() =>
-              setState({
-                center: { lat: 33.45058, lng: 126.574942 },
-                isPanto: true,
-              })
-            }
-          >
-            지도 중심좌표 부드럽게 이동시키기
-          </button>
-        </div>
-      </Map>
-    </>
-  )
-}
-```
+<LiveEditor>{codesource}</LiveEditor>
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 const lightCodeTheme = require("prism-react-renderer/themes/github")
 const darkCodeTheme = require("prism-react-renderer/themes/dracula")
 const path = require("path")
@@ -154,6 +156,9 @@ module.exports = {
       },
     ],
   ],
+  customFields: {
+    KAKAOMAP_API_KEY: process.env.KAKAOMAP_API_KEY,
+  },
   scripts: [
     `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAOMAP_API_KEY}&libraries=services,clusterer,drawing&autoload=false`,
   ],