fix: implement API call throttling in AddPlace component

src/components/AddPlace.js

@@ -15,6 +15,8 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
   const [favorites, setFavorites] = useState(new Set());
   const [favoriteItems, setFavoriteItems] = useState([]);
   const [debouncedKeyword, setDebouncedKeyword] = useState(searchKeyword);
+  const [lastApiCall, setLastApiCall] = useState(0);
+  const API_CALL_INTERVAL = 2000; // 2초
 
   const [tabStates, setTabStates] = useState({
     attractions: {
@@ -72,11 +74,6 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
     }
   };
 
-  const cachedData = useRef({
-    attractions: { data: null },
-    festivals: { data: null }
-  });
-
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedKeyword(searchKeyword);
@@ -261,15 +258,31 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
   };
 
   const observerCallback = useCallback(entries => {
-    console.log('스크롤 끝 인식');
     const target = entries[0];
     const currentState = tabStates[activeTab];
+    
     if (target.isIntersecting && currentState.hasMore && !currentState.loading) {
+      const now = Date.now();
+      const timeToWait = API_CALL_INTERVAL - (now - lastApiCall);
+
+      if (timeToWait <= 0) {
         updateTabState(activeTab, {
           pageNo: currentState.pageNo + 1
         });
+        setLastApiCall(now);
+        console.log('API 호출 준비 완료');
+      } else {
+        console.log(`API 호출 간격이 너무 짧습니다. ${timeToWait}ms 후 재시도...`);
+        setTimeout(() => {
+          updateTabState(activeTab, {
+            pageNo: currentState.pageNo + 1
+          });
+          setLastApiCall(Date.now());
+          console.log('대기 후 API 호출 준비 완료');
+        }, timeToWait);
       }
-  }, [tabStates, activeTab]);
+    }
+  }, [tabStates, activeTab, lastApiCall]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(observerCallback, {
@@ -382,8 +395,8 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
           items.map(async (item) => {
             try {
               const detailResponse = await fetch(
-                `${TOUR_API_BASE_URL}/detailIntro1?` +
-                `ServiceKey=${TOUR_API_KEY}` +
+                `${TOUR_API_BASE_URL}/detailIntro1? +
+`                `ServiceKey=${TOUR_API_KEY}` +
                 `&contentId=${item.contentid}` +
                 `&contentTypeId=15` +
                 `&MobileOS=ETC` +

src/pages/Home.js

@@ -520,10 +520,11 @@ const Home = () => {
         <div className={`map-container ${showNewTrip ? 'hidden' : ''}`}>
           {!showNewTrip && !showDirection && !selectedPlace && (
             <MapSearch
-              onPlaceSelect={handlePlaceSelect}
               map={map}
-              markers={markers}
+              onSearchResult={handleSearchResult}
+              clearMap={clearMap}
               setMarkers={setMarkers}
+              trips={trips}
             />
           )}
           <Map