From 282ddfe8bd4290280b1e15b738e1555df9618180 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Tue, 5 Nov 2024 11:28:55 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EA=B3=BC=20=EB=A7=88?=
 =?UTF-8?q?=EC=BB=A4=20=EC=97=B0=EB=8F=99=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20#12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx               |  2 +-
 frontend/src/Dashboard.tsx         |  2 ++
 frontend/src/NewPlaceSearchBar.tsx | 48 ++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/NewPlaceSearchBar.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9e96eb86..44ffbedf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -24,7 +24,7 @@ function App() {
     <Wrapper
       apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''}
       render={render}
-      libraries={['marker']}
+      libraries={['marker', 'places']}
     />
   );
 }
diff --git a/frontend/src/Dashboard.tsx b/frontend/src/Dashboard.tsx
index 24ca2dbd..42d04d58 100644
--- a/frontend/src/Dashboard.tsx
+++ b/frontend/src/Dashboard.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { getGoogleMapStore, useGoogleMapStore } from './store/googleMapState';
 import { createMarkerInstance } from './marker';
+import NewPlaceSearchBar from './NewPlaceSearchBar';
 
 const Dashboard = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -58,6 +59,7 @@ const Dashboard = () => {
 
   return (
     <div className={'absolute left-0 top-0 h-72 w-36 bg-white'}>
+      <NewPlaceSearchBar />
       <div>
         <label>
           Latitude:
diff --git a/frontend/src/NewPlaceSearchBar.tsx b/frontend/src/NewPlaceSearchBar.tsx
new file mode 100644
index 00000000..bcfd7b14
--- /dev/null
+++ b/frontend/src/NewPlaceSearchBar.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import { useGoogleMapStore } from './store/googleMapState';
+
+function NewPlaceSearchBar() {
+  const inputRef = useRef(null);
+  const googleMap = useGoogleMapStore.getState().googleMap;
+  const markerRef = useRef<google.maps.marker.AdvancedMarkerElement | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!googleMap || !inputRef.current) return;
+
+    const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
+      fields: ['place_id', 'geometry', 'name'],
+    });
+
+    autocomplete.addListener('place_changed', () => {
+      const place = autocomplete.getPlace();
+      if (!place.geometry || !place.geometry.location) {
+        alert('장소의 위치 정보를 가져올 수 없습니다.');
+        return;
+      }
+
+      googleMap.setCenter(place.geometry.location);
+      googleMap.setZoom(15);
+
+      if (markerRef.current) {
+        markerRef.current.map = null;
+      }
+      markerRef.current = new google.maps.marker.AdvancedMarkerElement({
+        position: place.geometry.location,
+        map: googleMap,
+      });
+    });
+  }, [googleMap]);
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      placeholder="검색할 장소를 입력하세요"
+      style={{ width: '300px', padding: '8px' }}
+    />
+  );
+}
+
+export default NewPlaceSearchBar;