diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index 406767f..c95f959 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/src/components/Home/InsightVideos.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { InsightVideosContainer } from '@/styles/HomepageStyle'; import Card from '../category/Card'; import { IVideoProps } from 'types/videos'; @@ -17,46 +17,42 @@ const InsightVideos: React.FC = ({ const formattedHashtags = popularHashtags.map((tag) => '#' + tag); const [categoryItems] = useState([]); const [checkedItems, setCheckedItems] = useState([]); + const [showEndMessage, setShowEndMessage] = useState(false); + + const endBox = useRef(null); const onFileClick = (e: React.MouseEvent) => { e.stopPropagation(); // 비디오 카테고리로 저장 API 호출 후 이런 인사이트는 어때요 API 재호출로 최신화하기 }; - const [isEndOfPage, setIsEndOfPage] = useState(false); - - const timerId = useRef(null); useEffect(() => { - if (isEndOfPage) { - timerId.current = setTimeout(() => { - window.scroll(0, 1000); - setIsEndOfPage(false); - }, 3000); - } - - return () => { - if (timerId.current !== null) { - clearTimeout(timerId.current); - } + const handleIntersect = (entries: IntersectionObserverEntry[]) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setShowEndMessage(true); + setTimeout(() => { + setShowEndMessage(false); + }, 2000); + } + }); }; - }, [isEndOfPage]); - - const checkScrollPosition = useCallback(() => { - if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { - setIsEndOfPage(true); - } else { - setIsEndOfPage(false); - } - }, []); + const observer = new IntersectionObserver(handleIntersect, { + threshold: 1.0, + }); - useEffect(() => { - window.addEventListener('scroll', checkScrollPosition); + const endBoxElement = endBox.current; + if (endBoxElement) { + observer.observe(endBoxElement); + } return () => { - window.removeEventListener('scroll', checkScrollPosition); - } - }, [checkScrollPosition]); + if (endBoxElement) { + observer.unobserve(endBoxElement); + } + }; + }, []); return ( @@ -82,15 +78,14 @@ const InsightVideos: React.FC = ({ ))} - {isEndOfPage && -
-
- successImg -

- 마지막 영상이에요!
더 많은 영상 변환하러 가볼까요? -

-
-
} +
+
+ successImg +

+ 마지막 영상이에요!
더 많은 영상 변환하러 가볼까요? +

+
+
);