From 0d6ea686b04a7baffd02f036679a92e100e29425 Mon Sep 17 00:00:00 2001
From: pjookim <pjookim@naver.com>
Date: Sat, 7 Dec 2024 15:28:34 +0900
Subject: [PATCH] fix: implement API call throttling in AddPlace component
---
src/components/AddPlace.js | 39 +++++++++++++++++++++++++-------------
src/pages/Home.js | 5 +++--
2 files changed, 29 insertions(+), 15 deletions(-)
diff --git a/src/components/AddPlace.js b/src/components/AddPlace.js
index 4654edc..7812442 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 3b6304b..c528bb6 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
--
GitLab