Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { useEffect, useRef } from 'react';
import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
interface UseIntersectionObserverParams {
onIntersect: () => void;
enabled?: boolean;
threshold?: number;
root?: Element | null;
}
export const useIntersectionObserver = ({
onIntersect, // 요소가 화면에 보일 때 실행할 콜백 함수
enabled = true, // observer 활성화 여부 (기본값: true)
threshold = INTERSECTION_OBSERVER_THRESHOLD, // 요소가 얼마나 보여야 감지할지 (기본값: 10%로 설정)
root = null, // 관찰 기준 요소 (기본값: null = 뷰포트)
}: UseIntersectionObserverParams) => {
const targetRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const target = targetRef.current;
if (!target || !enabled) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
onIntersect();
}
},
{
threshold,
root,
},
);
observer.observe(target);
return () => {
observer.disconnect();
};
}, [onIntersect, enabled, threshold, root]);
return targetRef;
};
|