diff --git a/dev/src/pages/samples/addMapClickEventWithMarker.tsx b/dev/src/pages/samples/addMapClickEventWithMarker.tsx
new file mode 100644
index 00000000..3709735f
--- /dev/null
+++ b/dev/src/pages/samples/addMapClickEventWithMarker.tsx
@@ -0,0 +1,47 @@
+import { Map, MapMarker } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import { useState } from "react"
+
+const center = {
+ // 지도의 중심좌표
+ lat: 33.450701,
+ lng: 126.570667,
+}
+
+export default function AddMapClickEventWithMarker() {
+ useKakaoLoader()
+ const [position, setPosition] = useState<{
+ lat: number
+ lng: number
+ }>()
+
+ return (
+ <>
+
+
+ 지도를 클릭해주세요!
+
+
+ {position &&
+ `클릭한 위치의 위도는 ${position.lat} 이고, 경도는 ${position.lng} 입니다`}
+
+ >
+ )
+}
diff --git a/dev/src/pages/samples/sampleList.tsx b/dev/src/pages/samples/sampleList.tsx
index 0f62286d..dbc593c9 100644
--- a/dev/src/pages/samples/sampleList.tsx
+++ b/dev/src/pages/samples/sampleList.tsx
@@ -15,6 +15,7 @@ import ChangeOverlay2 from "./changeOverlay2"
import SetBounds from "./setBounds"
import MapRelayout from "./mapRelayout"
import AddMapClickEvent from "./addMapClickEvent"
+import AddMapClickEventWithMarker from "./addMapClickEventWithMarker"
export const samples: RouteObject[] = [
{
@@ -81,4 +82,8 @@ export const samples: RouteObject[] = [
path: "addMapClickEvent",
element: ,
},
+ {
+ path: "addMapClickEventWithMarker",
+ element: ,
+ },
]
diff --git a/docs/docs/sample/map/addMapClickEventWithMarker.mdx b/docs/docs/sample/map/addMapClickEventWithMarker.mdx
index 69c0103d..51a7ac07 100644
--- a/docs/docs/sample/map/addMapClickEventWithMarker.mdx
+++ b/docs/docs/sample/map/addMapClickEventWithMarker.mdx
@@ -7,34 +7,6 @@ sidebar_position: 16
> original docs : https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/
-```jsx live
-function(){
- const Main = () => {
- const [position, setPosition] = useState()
- return (
- <>
-
- {position && {'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}
}
- >
- )
- }
- return ()
-}
-```
+import codesource from "!!raw-loader!~samples/addMapClickEventWithMarker.tsx"
+
+{codesource}
diff --git a/packages/react-kakao-maps-sdk/__test__/addMapClickEventWithMarker.spec.ts b/packages/react-kakao-maps-sdk/__test__/addMapClickEventWithMarker.spec.ts
new file mode 100644
index 00000000..ca4ccffc
--- /dev/null
+++ b/packages/react-kakao-maps-sdk/__test__/addMapClickEventWithMarker.spec.ts
@@ -0,0 +1,34 @@
+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(
+ "addMapClickEventWithMarker",
+ testInfo.config.updateSnapshots === "all",
+ )
+ await page.goto(url, { waitUntil: "networkidle" })
+ await page.waitForLoadState("networkidle")
+ await expect(page).toHaveScreenshot({
+ maxDiffPixels: 120, // map의 center값을 넘겼지만, `map.getCenter()` 시 넘어오는 값이 정확하게 일치하지 않아서 fail 나는 부분을 무시
+ })
+
+ const mapBoundingBox = await page.locator("#map").boundingBox()
+ await page.mouse.click(mapBoundingBox!.x, mapBoundingBox!.y)
+ await expect(page.locator("#clickLatlng")).toHaveText(
+ "클릭한 위치의 위도는 33.452254813152855 이고, 경도는 126.5638559967347 입니다",
+ )
+ await expect(page).toHaveScreenshot()
+
+ await page.mouse.click(
+ mapBoundingBox!.x + mapBoundingBox!.width / 2,
+ mapBoundingBox!.y + mapBoundingBox!.height / 2,
+ )
+ await expect(page.locator("#clickLatlng")).toHaveText(
+ "클릭한 위치의 위도는 33.450700761312206 이고, 경도는 126.57066121198349 입니다",
+ )
+ await expect(page).toHaveScreenshot()
+})