diff --git a/src/components/AddPlace.js b/src/components/AddPlace.js index 4654edc902e196e7b77285b2c53c60bd65f00fa9..78124425b10d39330066dd71063e5b99759cbac2 100644 --- a/src/components/AddPlace.js +++ b/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) { - updateTabState(activeTab, { - pageNo: currentState.pageNo + 1 - }); + 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, { @@ -319,7 +332,7 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa const searchPlaces = async (page, isNewSearch) => { const currentState = tabStates[activeTab]; if (currentState.loading || (!currentState.hasMore && !isNewSearch)) return; - + const areaCode = getAreaCode(location); if (!areaCode) { toast.error('올바른 지역 정보가 아닙니다.'); @@ -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` + diff --git a/src/pages/Home.js b/src/pages/Home.js index 3b6304bba86b4c105f448416a0dae206168a2c3b..c528bb6abc3acd1a6feaa4e082290c83c9f56fb5 100644 --- a/src/pages/Home.js +++ b/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