✅ Add E2E addMapDraggendEvent

- #61

dev/src/App.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom"
-import { samples } from "./pages/samples/sampleList"
+import { samples } from "./pages/sampleList"
 
 function App() {
   return (

dev/src/main.tsx

@@ -3,7 +3,7 @@ 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"
+import { samples } from "./pages/sampleList.tsx"
 
 const router = createBrowserRouter([
   {

dev/src/pages/sampleList.tsx

@@ -0,0 +1,19 @@
+import { RouteObject } from "react-router-dom"
+
+const samplesModules = import.meta.glob("./samples/!(use)*.tsx", {
+  eager: true,
+})
+
+export const samples = Object.keys(samplesModules)
+  .map((path) => {
+    const { default: Component } = samplesModules[path] as {
+      default: React.FC
+    }
+
+    const route: RouteObject = {
+      path: path.substring("./samples/".length, path.length - ".tsx".length),
+      element: <Component />,
+    }
+    return route
+  })
+  .filter((route) => !route.path!.endsWith(".style"))

dev/src/pages/samples/addMapDragendEvent.tsx

@@ -0,0 +1,36 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+export default function AddMapDragendEvent() {
+  useKakaoLoader()
+  const [result, setResult] = useState("")
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+        onDragEnd={(map) => {
+          const latlng = map.getCenter()
+          setResult(
+            `변경된 지도 중심좌표는 ${latlng.getLat()} 이고, 경도는 ${latlng.getLng()} 입니다`,
+          )
+        }}
+      />
+      <p>
+        <em>지도를 움직여 주세요!</em>
+      </p>
+      <p id="result">{result}</p>
+    </>
+  )
+}

docs/docs/sample/map/addMapDragendEvent.mdx

@@ -7,33 +7,6 @@ sidebar_position: 17
 
 > original docs : https://apis.map.kakao.com/web/sample/addMapDragendEvent/
 
-```jsx live
-function(){
-  const Main = () => {
-    const [position, setPosition] = useState()
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 33.450701,
-            lng: 126.570667,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          onDragEnd={(map) => setPosition({
-            lat: map.getCenter().getLat(),
-            lng: map.getCenter().getLng(),
-          })}
-        >
-        </Map>
-        {position && <p>{'변경된 지도 중심좌표는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+import codesource from "!!raw-loader!~samples/addMapDragendEvent.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>

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

@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test"
+import { getTestUrl, waitNetworkIdleWithTimeout } from "./util"
+
+test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
+  const url = getTestUrl(
+    "addMapDragendEvent",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page).toHaveScreenshot()
+
+  const drag = async () => {
+    const mapBoundingBox = await page.locator("#map").boundingBox()
+    await page.mouse.move(mapBoundingBox!.x, mapBoundingBox!.y)
+    await page.mouse.down()
+    await page.mouse.move(
+      mapBoundingBox!.x + mapBoundingBox!.width / 2,
+      mapBoundingBox!.y + mapBoundingBox!.height / 2,
+    )
+    await page.mouse.up()
+    await waitNetworkIdleWithTimeout(page)
+  }
+
+  await drag()
+  await expect(page.locator("#result")).toHaveText(
+    "변경된 지도 중심좌표는 33.452254813152855 이고, 경도는 126.5638559967347 입니다",
+  )
+
+  await drag()
+  await expect(page.locator("#result")).toHaveText(
+    "변경된 지도 중심좌표는 33.453808489118444 이고, 경도는 126.55705054272451 입니다",
+  )
+})