diff --git a/dev/src/pages/samples/addMapZoomChangedEvent.tsx b/dev/src/pages/samples/addMapZoomChangedEvent.tsx
new file mode 100644
index 00000000..6291f2c0
--- /dev/null
+++ b/dev/src/pages/samples/addMapZoomChangedEvent.tsx
@@ -0,0 +1,36 @@
+import { Map, ZoomControl } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+export default function AddMapZoomChangedEvent() {
+  useKakaoLoader()
+  const [result, setResult] = useState("")
+
+  return (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={{
+          // 지도의 중심좌표
+          lat: 33.450701,
+          lng: 126.570667,
+        }}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+        onZoomChanged={(map) => {
+          const level = map.getLevel()
+          setResult(`현재 지도 레벨은 ${level} 입니다`)
+        }}
+      >
+        <ZoomControl />
+      </Map>
+      <p>
+        <em>지도를 확대 또는 축소 해주세요!</em>
+      </p>
+      <p id="result">{result}</p>
+    </>
+  )
+}
diff --git a/docs/docs/sample/map/addMapZoomChangedEvent.mdx b/docs/docs/sample/map/addMapZoomChangedEvent.mdx
index 40d28080..480e8d12 100644
--- a/docs/docs/sample/map/addMapZoomChangedEvent.mdx
+++ b/docs/docs/sample/map/addMapZoomChangedEvent.mdx
@@ -9,31 +9,6 @@ sidebar_position: 18
 
 > original docs : https://apis.map.kakao.com/web/sample/addMapZoomChangedEvent/
 
-```jsx live
-function(){
-  const Main = () => {
-    const [level, setLevel] = useState()
-    return (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 33.450701,
-            lng: 126.570667,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          onZoomChanged={(map) => setLevel(map.getLevel())}
-        >
-          <ZoomControl />
-        </Map>
-        {level && <p>{'현재 지도 레벨은 ' + level + ' 입니다'}</p>}
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+import codesource from "!!raw-loader!~samples/addMapZoomChangedEvent.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>
diff --git a/packages/react-kakao-maps-sdk/__test__/addMapZoomChangedEvent.spec.ts b/packages/react-kakao-maps-sdk/__test__/addMapZoomChangedEvent.spec.ts
new file mode 100644
index 00000000..79629089
--- /dev/null
+++ b/packages/react-kakao-maps-sdk/__test__/addMapZoomChangedEvent.spec.ts
@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test"
+import { getTestUrl, waitNetworkIdleWithTimeout } from "./util"
+
+test("ScreenShot 렌더링 결과 비교", async ({ page }, testInfo) => {
+  const url = getTestUrl(
+    "addMapZoomChangedEvent",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page).toHaveScreenshot()
+
+  await page.getByTitle("확대").click()
+  await expect(page.locator("#result")).toHaveText("현재 지도 레벨은 2 입니다")
+
+  await page.getByTitle("축소").click()
+  await waitNetworkIdleWithTimeout(page)
+  await page.getByTitle("축소").click()
+  await waitNetworkIdleWithTimeout(page)
+  await expect(page.locator("#result")).toHaveText("현재 지도 레벨은 4 입니다")
+})