[Fix] useInfiniteScroll 범용 훅 추가로 다른 페이지에서도 무한스크롤 재사용 가능

[claudia99503]

📝 변경 사항

범용 무한스크롤 훅 추가 및 리팩토링

hooks/use-group/use-group-infinite-list/index.ts

• 범용 훅 useInfiniteScroll 추가

  • 제네릭 타입 지원으로 다양한 데이터 타입 사용 가능
  • queryFn을 파라미터로 받아 API 호출 함수 주입 가능
  • completedMessage 파라미터 추가로 페이지별 완료 메시지 커스터마이징
  • 다른 페이지에서도 재사용 가능한 상태

• useInfiniteGroupList 리팩토링

  • 내부적으로 useInfiniteScroll 사용하도록 변경
  • 기존 사용법은 그대로 유지 (하위 호환성 보장)
  • completedMessage 기본값: "모든 모임을 불러왔습니다."

components/pages/group-list/index.tsx

• 완료 메시지 동적화
  • 하드코딩된 "모든 모임을 불러왔습니다." 제거
  • useInfiniteGroupList에서 반환하는 completedMessage 사용

주요 개선 사항

• 재사용성: 다른 페이지(팔로잉, 댓글 등)에서도 동일한 무한스크롤 로직 사용 가능
• 유연성: API가 달라도 queryFn만 전달하면 사용 가능
• 커스터마이징: 페이지별 완료 메시지 설정 가능

사용 예시

'use client';

import { useInfiniteScroll } from '@/hooks/use-group/use-group-infinite-list';
import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
import { API } from '@/api';

export default function FollowingList() {
  // 1. 무한 스크롤 훅 호출
  const { items, error, fetchNextPage, hasNextPage, isFetchingNextPage, completedMessage } =
    useInfiniteScroll({
      queryFn: async ({ cursor, size }) => {
        return await API.followerService.getFollowing({ cursor, size });
      },
      queryKey: ['following'],
      completedMessage: '모든 팔로잉을 불러왔습니다.',
    });

  // 2. IntersectionObserver로 스크롤 감지
  const sentinelRef = useIntersectionObserver({
    onIntersect: () => {
      if (hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    },
    enabled: hasNextPage && error === null,
    threshold: INTERSECTION_OBSERVER_THRESHOLD,
  });

  return (
    <div>
      {/* 3. 아이템 렌더링 */}
      {items.map((item) => (
        <div key={item.id}>{/* ... */}</div>
      ))}

      {/* 4. Sentinel 요소 (필수!) */}
      {hasNextPage && !error && <div ref={sentinelRef} className='h-1' />}

      {/* 5. 완료 메시지 */}
      {!hasNextPage && items.length > 0 && !error && (
        <div>{completedMessage}</div>
      )}
    </div>
  );
}

🔗 관련 이슈

Closes #

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch minseo-feat/infinite

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎭 Playwright Report

✨ E2E Test가 성공적으로 완료되었습니다.

Test 요약 내용을 확인해주세요.

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-15 00:48:55

📊 Test Summary

• ✅ Passed: 9
• ❌ Failed: 0
• ⏱️ Duration: 78.3s

📜 Test Details

✅ Passed Tests (9)

• profile.test.ts (9)
  • [chromium] 비로그인 상태에서 /mypage 접속 시 /login으로 redirect 되는 지 테스트
  • [chromium] 나의 프로필 페이지로 접속 시 /mypage로 /redirect 되는 지 테스트
  • [chromium] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [firefox] 비로그인 상태에서 /mypage 접속 시 /login으로 redirect 되는 지 테스트
  • [firefox] 나의 프로필 페이지로 접속 시 /mypage로 /redirect 되는 지 테스트
  • [firefox] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [webkit] 비로그인 상태에서 /mypage 접속 시 /login으로 redirect 되는 지 테스트
  • [webkit] 나의 프로필 페이지로 접속 시 /mypage로 /redirect 되는 지 테스트
  • [webkit] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-15 00:47:05

📉 #183을 main에 병합하면 coverage가 0.54% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #183       +/-   ##
===========================================
- Coverage   35.50%   34.96%    -0.54%     
===========================================
  Files         150      150         0     
  Lines        6149     6244       +95     
  Branches      247      247         0     
===========================================
  Hits         2183     2183         0     
+ Misses       3966     4061       +95     

영향받은 파일

✅ 이 PR로 영향받은 파일이 없습니다

수정된 모든 파일이 현재 coverage를 유지했습니다.

[github-actions]

🎨 Storybook Report

✅ 변경 사항이 없습니다

모든 Story가 이전 빌드와 동일합니다.

Status	Storybook	Build Log	Updated (UTC)
✅ Unchanged	View Storybook	View Build	2025-12-15 00:48:24

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-15 00:48:09

[HopeFullee]

나이수