Refact: 디바운스 적용해 스크롤 이벤트 제어

Author: mimizae

package.json

@@ -17,9 +17,10 @@
     "dayjs": "^1.11.12",
     "firebase": "^10.13.0",
     "heic2any": "^0.0.4",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-responsive": "^10.0.0",    
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.24.1",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
@@ -29,6 +30,7 @@
     "swiper": "^11.1.8"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/pages/Home/OOTD/index.tsx

@@ -6,6 +6,7 @@ import type { PostSummary } from '@apis/post/dto';
 import { handleError } from '@apis/util/handleError';
 import type { ModalProps } from '@components/Modal/dto';
 import Modal from '@components/Modal';
+import debounce from 'lodash/debounce';
 
 const OOTD: React.FC = () => {
 	const [feeds, setFeeds] = useState<PostSummary[]>([]);
@@ -48,25 +49,29 @@ const OOTD: React.FC = () => {
 	};
 
 	useEffect(() => {
-		// Intersection Observer 설정
+		if (reachedEnd && observerRef.current && loadMoreRef.current) {
+			observerRef.current.unobserve(loadMoreRef.current);
+			return; // 더 이상 옵저버 실행 안 함
+		}
+
 		observerRef.current = new IntersectionObserver(
-			(entries) => {
+			debounce((entries) => {
 				const target = entries[0];
-				if (target.isIntersecting && !isFetching) {
+				console.log('Intersection Observer:', target.isIntersecting);
+				if (target.isIntersecting && !isFetching && !reachedEnd) {
 					getPostList();
 				}
-			},
+			}, 300), // 디바운스 적용
 			{
-				root: null, // viewport
-				rootMargin: '0px',
-				threshold: 1.0, // 요소가 100% 보여질 때 트리거
+				root: null,
+				rootMargin: '100px', // 미리 데이터 로드
+				threshold: 0, // 요소가 조금이라도 보이면 트리거
 			},
 		);
 
 		if (loadMoreRef.current) {
 			observerRef.current.observe(loadMoreRef.current);
 		}
-
 		return () => {
 			if (observerRef.current && loadMoreRef.current) {
 				observerRef.current.unobserve(loadMoreRef.current);

yarn.lock

@@ -1068,6 +1068,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/lodash@^4.17.13":
+  version "4.17.13"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
+  integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
+
 "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "22.10.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.2.tgz#a485426e6d1fdafc7b0d4c7b24e2c78182ddabb9"
@@ -1927,6 +1932,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 long@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"