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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
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.