✅ Add E2E test addMapControl

- #61

dev/src/pages/samples/addMapControl.tsx

@@ -0,0 +1,33 @@
+import { Map, MapTypeControl, ZoomControl } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+
+export default function AddMapControl() {
+  useKakaoLoader()
+
+  const MapControls = () => (
+    <>
+      <MapTypeControl position={kakao.maps.ControlPosition.TOPRIGHT} />
+      <ZoomControl position={kakao.maps.ControlPosition.RIGHT} />
+    </>
+  ) // 렌더링 시점에 kakao 객체 존재 하지 않는 오류 우회 하기 위한 Wrapping 처리
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+      >
+        <MapControls />
+      </Map>
+    </>
+  )
+}

dev/src/pages/samples/sampleList.tsx

@@ -3,6 +3,7 @@ import BasicMap from "./basicMap"
 import MoveMap from "./moveMap"
 import ChangeLevel from "./changeLevel"
 import MapInfo from "./mapInfo"
+import AddMapControl from "./addMapControl"
 
 export const samples: RouteObject[] = [
   {
@@ -17,9 +18,12 @@ export const samples: RouteObject[] = [
     path: "changeLevel",
     element: <ChangeLevel />,
   },
-
   {
     path: "mapInfo",
     element: <MapInfo />,
   },
+  {
+    path: "addMapControl",
+    element: <AddMapControl />,
+  },
 ]

docs/docs/sample/map/addMapControl.mdx

@@ -7,30 +7,6 @@ sidebar_position: 5
 
 > original docs : https://apis.map.kakao.com/web/sample/addMapControl/
 
-```jsx live
-function(){
-  const Main = () => {
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          id="map"
-          center={{
-            // 지도의 중심좌표
-            lat: 36.2683,
-            lng: 127.6358,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-        >
-          <ZoomControl position={kakao.maps.ControlPosition.TOPRIGHT} />
-          <MapTypeControl position={kakao.maps.ControlPosition.TOPRIGHT}/>
-        </Map>
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+import codesource from "!!raw-loader!../../../../dev/src/pages/samples/addMapControl.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>

docs/src/theme/MDXComponents.js

@@ -25,7 +25,7 @@ export default function useKakaoLoader() {
   useKakaoLoaderOrigin({
     /** 
      * ※주의※ appkey의 경우 본인의 appkey를 사용하셔야 합니다.
-     * 해당 키는 docs를 위해 발급된 키 이므로, 임으로 사용하셔서는 안됩니다.
+     * 해당 키는 docs를 위해 발급된 키 이므로, 임의로 사용하셔서는 안됩니다.
      * 
      * @참고 https://apis.map.kakao.com/web/guide/
      */

docs/src/theme/SiteMetadata/index.js

@@ -0,0 +1,16 @@
+import React from "react"
+import SiteMetadata from "@theme-original/SiteMetadata"
+import { getSandpackCssText } from "@codesandbox/sandpack-react"
+
+export default function SiteMetadataWrapper(props) {
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
+        id="sandpack"
+        key="sandpack-css"
+      />
+      <SiteMetadata {...props} />
+    </>
+  )
+}

packages/react-kakao-maps-sdk/__test__/addMapControl.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test"
+
+const getUrl = (id: string, isUpdateSanpShots: boolean = false) =>
+  isUpdateSanpShots
+    ? `http://127.0.0.1:5252/samples/${id}.html`
+    : `/samples/${id}`
+
+test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
+  const url = getUrl("addMapControl", testInfo.config.updateSnapshots === "all")
+  await page.goto(url, { waitUntil: "networkidle" })
+  await expect(page).toHaveScreenshot()
+})