refactor: 전역 상태에서 context provider 기반으로 리팩토링

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

@@ -1,9 +1,10 @@
 "use client";
 
-import { useKakaoAddress } from "~/app/(playground)/playground/map/_store/KakaoAdressStore";
+import { useKakaoAddress } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";
 
 export default function AddressSearchButton() {
-  const { coordinate, setCoordinate } = useKakaoAddress();
+  const { setCoordinate } = useKakaoAddress();
+
   const handleClickButton = () => {
     new window.daum.Postcode({
       oncomplete: (addressData: any) => {

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+}
+
+interface KakaoAddressContextType {
+  coordinate: Coordinate;
+  setCoordinate: (latitude: number, longitude: number) => void;
+}
+
+const KakaoAddressContext = createContext<KakaoAddressContextType | undefined>(
+  undefined,
+);
+
+export function KakaoAddressProvider({ children }: { children: ReactNode }) {
+  const [coordinate, setCoordinateState] = useState<Coordinate>({
+    latitude: 37.566828,
+    longitude: 126.9786567,
+  });
+
+  const setCoordinate = (latitude: number, longitude: number) => {
+    setCoordinateState({ latitude, longitude });
+  };
+
+  return (
+    <KakaoAddressContext.Provider value={{ coordinate, setCoordinate }}>
+      {children}
+    </KakaoAddressContext.Provider>
+  );
+}
+
+export function useKakaoAddress() {
+  const context = useContext(KakaoAddressContext);
+  if (context === undefined) {
+    throw new Error(
+      "useKakaoAddress must be used within a KakaoAddressProvider",
+    );
+  }
+  return context;
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { useKakaoAddress } from "~/app/(playground)/playground/map/_store/KakaoAdressStore";
+import { useKakaoAddress } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";
 
 interface KakaoMapProps {
   width: string;

src/app/(playground)/playground/map/_components/MapUtilsButton/UtilsContainer/index.tsx

@@ -0,0 +1 @@
+export default function UtilsContainer() {}

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

@@ -1,13 +1,36 @@
 import { AMain } from "~/app/(playground)/playground/inner-tools";
 import AddressSearchButton from "~/app/(playground)/playground/map/_components/AddressSearchButton";
+import { KakaoAddressProvider } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";
 import KakaoMap from "~/app/(playground)/playground/map/_components/KakaoMap";
 
 export default function KaKaoMapPage() {
   return (
     <AMain>
       <div>
-        <KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
-        <AddressSearchButton />
+        <p>결과 페이지에서 보여줄 위도 경도 입력한 지도</p>
+        <KakaoAddressProvider>
+          <KakaoMap
+            height={"400px"}
+            width={"100%"}
+            addCenterPin={true}
+            latitude={37}
+            longitude={126.87}
+          />
+        </KakaoAddressProvider>
+      </div>
+      <div>
+        <p>Provider Test 1</p>
+        <KakaoAddressProvider>
+          <KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
+          <AddressSearchButton />
+        </KakaoAddressProvider>
+      </div>
+      <div>
+        <p>Provider Test 2</p>
+        <KakaoAddressProvider>
+          <KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
+          <AddressSearchButton />
+        </KakaoAddressProvider>
       </div>
     </AMain>
   );