✅ Add E2E addMapCenterChangedEvent

- #61

dev/src/pages/samples/addMapCenterChangedEvent.tsx

@@ -0,0 +1,58 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+export default function AddMapCenterChangedEvent() {
+  useKakaoLoader()
+  const [data, setData] = useState<{
+    level: number
+    position: {
+      lat: number
+      lng: number
+    }
+  }>()
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+        onCenterChanged={(map) => {
+          const level = map.getLevel()
+          const latlng = map.getCenter()
+
+          setData({
+            level: level,
+            position: {
+              lat: latlng.getLat(),
+              lng: latlng.getLng(),
+            },
+          })
+        }}
+      />
+      <p>
+        <em>지도 중심좌표가 변경되면 지도 정보가 표출됩니다</em>
+      </p>
+      <p id="result">
+        {data && (
+          <>
+            <p>지도 레벨은 {data.level} 이고</p>
+            <p>
+              중심 좌표는 위도 {data.position.lat}, 경도 {data.position.lng}
+              입니다
+            </p>
+          </>
+        )}
+      </p>
+    </>
+  )
+}

docs/docs/sample/map/addMapCenterChangedEvent.mdx

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

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

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test"
+import { getTestUrl, waitNetworkIdleWithTimeout } from "./util"
+
+test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
+  const url = getTestUrl(
+    "addMapCenterChangedEvent",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page).toHaveScreenshot()
+
+  const mapBoundingBox = await page.locator("#map").boundingBox()
+  await page.mouse.move(mapBoundingBox!.x, mapBoundingBox!.y)
+  await page.mouse.wheel(0, 10)
+  await page.mouse.down()
+  await page.mouse.move(
+    mapBoundingBox!.x + mapBoundingBox!.width / 2,
+    mapBoundingBox!.y + mapBoundingBox!.height / 2,
+  )
+  await waitNetworkIdleWithTimeout(page)
+
+  await expect(page.locator("#result")).toHaveText(
+    "지도 레벨은 4 이고중심 좌표는 위도 33.44914633366172, 경도 126.57746618837292입니다",
+  )
+  await page.mouse.move(
+    mapBoundingBox!.x + mapBoundingBox!.width / 3,
+    mapBoundingBox!.y + mapBoundingBox!.height / 3,
+  )
+  await page.mouse.up()
+  await page.mouse.wheel(0, -3)
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page.locator("#result")).toHaveText(
+    "지도 레벨은 3 이고중심 좌표는 위도 33.449670516261634, 경도 126.5751942751081입니다",
+  )
+})