From f246a42a016748ec163f78859c36829325ae6dd9 Mon Sep 17 00:00:00 2001
From: JaeSeoKim <48559454+JaeSeoKim@users.noreply.github.com>
Date: Thu, 18 Jan 2024 23:58:05 +0900
Subject: [PATCH] :white_check_mark: Add E2E addMapClickEventWithMarker

- #61
---
 .../samples/addMapClickEventWithMarker.tsx    | 47 +++++++++++++++++++
 dev/src/pages/samples/sampleList.tsx          |  5 ++
 .../sample/map/addMapClickEventWithMarker.mdx | 34 ++------------
 .../addMapClickEventWithMarker.spec.ts        | 34 ++++++++++++++
 4 files changed, 89 insertions(+), 31 deletions(-)
 create mode 100644 dev/src/pages/samples/addMapClickEventWithMarker.tsx
 create mode 100644 packages/react-kakao-maps-sdk/__test__/addMapClickEventWithMarker.spec.ts

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 (
+    <>
+      <Map // 지도를 표시할 Container
+        id="map"
+        center={center}
+        style={{
+          width: "100%",
+          height: "350px",
+        }}
+        level={3} // 지도의 확대 레벨
+        onClick={(_, mouseEvent) => {
+          const latlng = mouseEvent.latLng
+          setPosition({
+            lat: latlng.getLat(),
+            lng: latlng.getLng(),
+          })
+        }}
+      >
+        <MapMarker position={position ?? center} />
+      </Map>
+      <p>
+        <em>지도를 클릭해주세요!</em>
+      </p>
+      <div id="clickLatlng">
+        {position &&
+          `클릭한 위치의 위도는 ${position.lat} 이고, 경도는 ${position.lng} 입니다`}
+      </div>
+    </>
+  )
+}
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: <AddMapClickEvent />,
   },
+  {
+    path: "addMapClickEventWithMarker",
+    element: <AddMapClickEventWithMarker />,
+  },
 ]
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 (
-      <>
-        <Map // 지도를 표시할 Container
-          center={{
-            // 지도의 중심좌표
-            lat: 33.450701,
-            lng: 126.570667,
-          }}
-          style={{
-            width: "100%",
-            height: "450px",
-          }}
-          level={3} // 지도의 확대 레벨
-          onClick={(_t, mouseEvent) => setPosition({
-            lat: mouseEvent.latLng.getLat(),
-            lng: mouseEvent.latLng.getLng(),
-          })}
-        >
-          {position && <MapMarker position={position} />}
-        </Map>
-        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+import codesource from "!!raw-loader!~samples/addMapClickEventWithMarker.tsx"
+
+<LiveEditor>{codesource}</LiveEditor>
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()
+})