Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add throttle for scroll event
Browse files Browse the repository at this point in the history
useruseruse committed Sep 18, 2024
1 parent 7d8fb43 commit 1c13347
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions src/pages/MainPage.tsx
Original file line number Diff line number Diff line change
@@ -16,12 +16,13 @@ import MainSearchSection from '../components/sections/main/MainSearchSection';
import NoticeSection from '../components/sections/main/NoticeSection';
import RateFeedSection from '../components/sections/main/RateFeedSection';
import { rootReducer } from '@/App';
import { range } from 'lodash';
import { range, throttle } from 'lodash';
import { useFeed, useNotices } from '@/queries/main';

type RootState = ReturnType<typeof rootReducer>;

// Feed 의 타입은 이후에 API 타입 패키지로 바꿀 예정
// TODO: Feed 의 타입은 이후에 API 타입 패키지로 바꿀 예정
// TODO: 스크롤 감지 interserct observer 로 바꾸기
const MainPage: React.FC = () => {
const contentRef = useRef<HTMLDivElement | null>(null);

@@ -32,16 +33,8 @@ const MainPage: React.FC = () => {
const { data: notices } = useNotices();
const { data: feedDays, isFetchingNextPage, fetchNextPage } = useFeed(user);

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);

const handleScroll = () => {
const handleScroll = throttle(() => {
if (!user || !contentRef.current) return;

const SCROLL_BOTTOM_PADDING = 100;
const columns = Array.from(
contentRef.current.querySelectorAll(`.${classNames('page-grid--main')} > div`),
@@ -56,7 +49,14 @@ const MainPage: React.FC = () => {
if (isBottomReached && !isFetchingNextPage) {
fetchNextPage();
}
};
}, 2000);

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [user]);

const mapFeedToSection = (feed: any, date: any) => {
switch (feed.type) {

0 comments on commit 1c13347

Please sign in to comment.