diff --git a/src/pages/listPage/ListPage.jsx b/src/pages/listPage/ListPage.jsx index 16fa895..e8c9f0b 100644 --- a/src/pages/listPage/ListPage.jsx +++ b/src/pages/listPage/ListPage.jsx @@ -71,7 +71,10 @@ function ListPage() { onCreditShortageClick={() => openModal('creditNotEnough')} credits={credits} /> - openModal('donation', item)} /> + openModal('donation', item)} + credits={credits} + /> { openModal('vote'); diff --git a/src/pages/listPage/donation/DonationsList.jsx b/src/pages/listPage/donation/DonationsList.jsx index c030092..2ae5b31 100644 --- a/src/pages/listPage/donation/DonationsList.jsx +++ b/src/pages/listPage/donation/DonationsList.jsx @@ -6,7 +6,7 @@ import nextIcon from '@/assets/icons/nextIcon.svg'; const MAXIMUL_VIEW_DONATIONS = 4; -function DonationsList({ onDonationClick }) { +function DonationsList({ onDonationClick, credits }) { const [items, setItems] = useState([]); const [cursor, setCursor] = useState(0); const [cursorArr, setCursorArr] = useState([0]); @@ -14,6 +14,7 @@ function DonationsList({ onDonationClick }) { const [isError, setIsError] = useState(false); const [isPC, setIsPC] = useState(window.innerWidth >= 1200); const observerRef = useRef(null); + const prevCreditsRef = useRef(credits); const handleLoad = async (query) => { setIsLoading(true); @@ -76,6 +77,24 @@ function DonationsList({ onDonationClick }) { return () => observer.disconnect(); }, [cursor, isPC]); + // 크레딧 값이 감소했을 시 GET Request + useEffect(() => { + setTimeout(() => { + prevCreditsRef.current = credits; + }, 0); + }, [credits]); + + useEffect(() => { + if (prevCreditsRef.current > credits) { + if (isPC) { + handleLoad({ cursor: cursorArr[cursorArr.length - 1] }); + } else { + setItems([]); + handleLoad({ cursor: 0 }); + } + } + }, [credits]); + return (