feat: 위 경도 커스터마이징 가능

src/app/(playground)/playground/map/_components/KakaoMap/index.tsx

@@ -1,45 +1,43 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import type { Coordinate } from "~/app/(playground)/playground/map/_store/KakaoAdressStore";
 import { useKakaoAddress } from "~/app/(playground)/playground/map/_store/KakaoAdressStore";
 
 interface KakaoMapProps {
   width: string;
   height: string;
   level?: number;
   addCenterPin?: boolean;
+  latitude?: number;
+  longitude?: number;
 }
 
 export default function KakaoMap({
   width,
   height,
   level = 3,
   addCenterPin = false,
+  latitude,
+  longitude,
 }: KakaoMapProps) {
-  const { coordinate, setCoordinate } = useKakaoAddress();
+  const { coordinate } = useKakaoAddress();
   const mapRef = useRef<HTMLDivElement | null>(null);
 
   const initializeMap = () => {
     if (!mapRef.current) return;
 
     window.kakao.maps.load(() => {
-      const { latitude, longitude }: Coordinate = coordinate;
-      const center = new window.kakao.maps.LatLng(latitude, longitude);
-      const mapOption = {
-        center: center,
-        level: level,
-      };
-      const map = new window.kakao.maps.Map(
-        mapRef.current as HTMLElement,
-        mapOption,
+      const center = new window.kakao.maps.LatLng(
+        latitude ?? coordinate.latitude,
+        longitude ?? coordinate.longitude,
       );
+      const map = new window.kakao.maps.Map(mapRef.current as HTMLElement, {
+        center,
+        level,
+      });
 
       if (addCenterPin) {
-        const marker = new window.kakao.maps.Marker({
-          position: center,
-        });
-        marker.setMap(map);
+        new window.kakao.maps.Marker({ position: center }).setMap(map);
       }
     });
   };
@@ -48,7 +46,7 @@ export default function KakaoMap({
     if (window.kakao && window.kakao.maps) {
       initializeMap();
     }
-  }, [level, addCenterPin, coordinate]);
+  }, [coordinate]);
 
   return (
     <div style={{ width, height }}>

src/app/(playground)/playground/map/page.tsx

@@ -1,13 +1,14 @@
+import { AMain } from "~/app/(playground)/playground/inner-tools";
 import AddressSearchButton from "~/app/(playground)/playground/map/_components/AddressSearchButton";
 import KakaoMap from "~/app/(playground)/playground/map/_components/KakaoMap";
 
 export default function KaKaoMapPage() {
   return (
-    <div>
+    <AMain>
       <div>
         <KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
         <AddressSearchButton />
       </div>
-    </div>
+    </AMain>
   );
 }