✅ Add E2E test addMapCustomControl

- #61

dev/src/pages/samples/addMapCustomControl.style.tsx

@@ -0,0 +1,18 @@
+export default function AddMapCustomControlStyle() {
+  return (
+    <style>{`html, body {width:100%;height:100%;margin:0;padding:0;} 
+.map_wrap {position:relative;overflow:hidden;width:100%;height:350px;}
+.radius_border{border:1px solid #919191;border-radius:5px;}     
+.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
+.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
+.custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
+.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
+.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
+.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
+.custom_typecontrol .selected_btn:hover {color:#fff;}   
+.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;} 
+.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}     
+.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}             
+.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}`}</style>
+  )
+}

dev/src/pages/samples/addMapCustomControl.tsx

@@ -0,0 +1,92 @@
+import { Map } from "react-kakao-maps-sdk"
+import useKakaoLoader from "./useKakaoLoader"
+import AddMapCustomControlStyle from "./addMapCustomControl.style"
+import { useEffect, useRef, useState } from "react"
+
+export default function AddMapCustomControl() {
+  useKakaoLoader()
+
+  const mapRef = useRef<kakao.maps.Map>(null)
+  const [mapType, setMapType] = useState<"roadmap" | "skyview">("roadmap")
+
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+
+    if (mapType === "roadmap") {
+      map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP)
+    } else {
+      map.setMapTypeId(kakao.maps.MapTypeId.HYBRID)
+    }
+  }, [mapType])
+
+  const zoomIn = () => {
+    const map = mapRef.current
+    if (!map) return
+    map.setLevel(map.getLevel() - 1)
+  }
+
+  const zoomOut = () => {
+    const map = mapRef.current
+    if (!map) return
+    map.setLevel(map.getLevel() + 1)
+  }
+
+  return (
+    <>
+      <AddMapCustomControlStyle />
+      <div className={`map_wrap`}>
+        <Map // 지도를 표시할 Container
+          id="map"
+          center={{
+            // 지도의 중심좌표
+            lat: 33.450701,
+            lng: 126.570667,
+          }}
+          style={{
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            overflow: "hidden",
+          }}
+          level={3}
+          ref={mapRef}
+        ></Map>
+        {/* 지도타입 컨트롤 div 입니다 */}
+        <div className="custom_typecontrol radius_border">
+          <span
+            id="btnRoadmap"
+            className={mapType === "roadmap" ? "selected_btn" : "btn"}
+            onClick={() => setMapType("roadmap")}
+          >
+            지도
+          </span>
+          <span
+            id="btnSkyview"
+            className={mapType === "skyview" ? "selected_btn" : "btn"}
+            onClick={() => {
+              setMapType("skyview")
+            }}
+          >
+            스카이뷰
+          </span>
+        </div>
+        {/* 지도 확대, 축소 컨트롤 div 입니다 */}
+        <div className="custom_zoomcontrol radius_border">
+          <span onClick={zoomIn}>
+            <img
+              src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png"
+              alt="확대"
+            />
+          </span>
+          <span onClick={zoomOut}>
+            <img
+              src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png"
+              alt="축소"
+            />
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}

dev/src/pages/samples/sampleList.tsx

@@ -4,6 +4,7 @@ import MoveMap from "./moveMap"
 import ChangeLevel from "./changeLevel"
 import MapInfo from "./mapInfo"
 import AddMapControl from "./addMapControl"
+import AddMapCustomControl from "./addMapCustomControl"
 
 export const samples: RouteObject[] = [
   {
@@ -26,4 +27,8 @@ export const samples: RouteObject[] = [
     path: "addMapControl",
     element: <AddMapControl />,
   },
+  {
+    path: "addMapCustomControl",
+    element: <AddMapCustomControl />,
+  },
 ]

docs/docs/sample/map/addMapCustomControl.mdx

@@ -7,93 +7,13 @@ sidebar_position: 5.1
 
 > original docs : https://apis.map.kakao.com/web/sample/addMapCustomControl/
 
-```jsx live
-function(){
-  const Main = () => {
-    const mapRef = useRef()
+import codesource from "!!raw-loader!../../../../dev/src/pages/samples/addMapCustomControl.tsx"
+import styleSource from "!!raw-loader!../../../../dev/src/pages/samples/addMapCustomControl.style.tsx"
 
-    const setMapType = (maptype) => {
-      const map = mapRef.current
-      const roadmapControl = document.getElementById("btnRoadmap")
-      const skyviewControl = document.getElementById("btnSkyview")
-      if (maptype === "roadmap") {
-        map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP)
-        roadmapControl.className = "selected_btn"
-        skyviewControl.className = "btn"
-      } else {
-        map.setMapTypeId(kakao.maps.MapTypeId.HYBRID)
-        skyviewControl.className = "selected_btn"
-        roadmapControl.className = "btn"
-      }
-    }
-
-    const zoomIn = () => {
-      const map = mapRef.current
-      map.setLevel(map.getLevel() - 1)
-    }
-    const zoomOut = () => {
-      const map = mapRef.current
-      map.setLevel(map.getLevel() + 1)
-    }
-
-    return (
-      <>
-        <AddMapControlStyle/>
-        <div className={`map_wrap`}>
-          <Map // 지도를 표시할 Container
-            id="map"
-            center={{
-              // 지도의 중심좌표
-              lat: 36.2683,
-              lng: 127.6358,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              position: "relative",
-              overflow: "hidden",
-            }}
-            level={3}
-            ref={mapRef}
-          ></Map>
-          {/* 지도타입 컨트롤 div 입니다 */}
-          <div className="custom_typecontrol radius_border">
-            <span
-              id="btnRoadmap"
-              className="selected_btn"
-              onClick={() => setMapType("roadmap")}
-            >
-              지도
-            </span>
-            <span
-              id="btnSkyview"
-              className="btn"
-              onClick={() => {
-                setMapType("skyview")
-              }}
-            >
-              스카이뷰
-            </span>
-          </div>
-          {/* 지도 확대, 축소 컨트롤 div 입니다 */}
-          <div className="custom_zoomcontrol radius_border">
-            <span onClick={zoomIn}>
-              <img
-                src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png"
-                alt="확대"
-              />
-            </span>
-            <span onClick={zoomOut}>
-              <img
-                src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png"
-                alt="축소"
-              />
-            </span>
-          </div>
-        </div>
-      </>
-    )
-  }
-  return (<Main/>)
-}
-```
+<LiveEditor
+  files={{
+    "/addMapCustomControl.style.tsx": styleSource,
+  }}
+>
+  {codesource}
+</LiveEditor>

docs/src/theme/MDXComponents.js

@@ -3,10 +3,11 @@ import MDXComponents from "@theme-original/MDXComponents"
 import { Sandpack } from "@codesandbox/sandpack-react"
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 
-function LiveEditor({ children }) {
+function LiveEditor({ children, files }) {
   const {
     siteConfig: { customFields },
   } = useDocusaurusContext()
+  if (!files) files = {}
 
   return (
     <Sandpack
@@ -17,6 +18,7 @@ function LiveEditor({ children }) {
         },
       }}
       files={{
+        ...files,
         "/App.tsx": children,
         "/useKakaoLoader.tsx": `
 import { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk"

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

@@ -0,0 +1,33 @@
+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(
+    "addMapCustomControl",
+    testInfo.config.updateSnapshots === "all",
+  )
+  await page.goto(url, { waitUntil: "networkidle" })
+  await expect(page).toHaveScreenshot()
+
+  await page.locator("#btnSkyview").click()
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+
+  await page.locator("#btnRoadmap").click()
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+
+  await page.getByAltText("확대").click()
+  await page.getByAltText("확대").click()
+  await page.getByAltText("확대").click()
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+
+  await page.getByAltText("축소").click()
+  await page.waitForLoadState("networkidle")
+  await expect(page).toHaveScreenshot()
+})