Feature/my-profile api 연결 및 무한 스크롤 훅 생성

[youdaeng2]

📦 Pull Request

중간에 분리를 했어야했는데.. 급하게 하다보니
길어졌습니다 죄송합니다 ㅠㅠ

📝 요약(Summary)

1. 리스트 API 연동

   • getMyReviews, getMyWines API 연동
   • TanStack Query 기반 useInfiniteQuery로 데이터 무한 패칭 구현
   • API 타입 및 응답 형태에 맞춰 MyReviewsResponse, MyWinesResponse 정의

2. MyProfile 페이지 수정

   • 탭(내가 쓴 후기 / 내가 등록한 와인)에 따라 API 데이터 패칭
   • TabNav에서 각 탭별 totalCount를 반영하여 개수 출력
   • mock 데이터 제거 → 실제 API 연동

3. 무한스크롤 훅 작성 및 적용

   • useInfiniteScroll 훅 작성
     → IntersectionObserver 기반
     → hasNextPage, isFetching, fetchNextPage 조건 처리
   • ReviewList, WineList 컴포넌트에 적용하여 페이징 자동 처리
     useInfiniteQuery에 좀 더 알고 싶으시면 해당 블로그 글을 읽어보시길 추천드립니다

• myprofile 페이지를 my-profile로 변경해서 Gnb도 수정하였습니다
• next.config에 이미지 도메인을 추가하였습니다 -> 성주님 작성해주신 거랑 겹쳐서 머지 전에 제가 작성한 부분은 삭제하겠습니다

---

💬 공유사항 to 리뷰어

• useInfiniteScroll 훅은 타 컴포넌트에서도 재사용 가능한 구조로 작성했습니다.
• 무한스크롤 옵저버 요소는 ref로 명시해야 하며, 리스트 마지막에 <div ref={observerElement} />로 부착했습니다.
• totalCount는 첫 페이지 패칭 이후 useEffect를 통해 상위 TabNav로 전달하고 있습니다.
• 무한스크롤 훅과 옵저버 로직이 과도하게 분리되지 않았는지, 불필요한 재렌더가 발생할 여지가 없는지도 확인해주시면 좋을 것 같아요.

---

무한스크롤 훅 사용법

// 1. useInfiniteQuery 설정
const {
  data, fetchNextPage, hasNextPage, isFetching,
} = useInfiniteQuery({
  queryKey: ['myWines'],
  queryFn: ({ pageParam = 0 }) => getMyWines(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
});

// 2. 옵저버 타겟 요소 ref 생성
const observerRef = useRef<HTMLDivElement | null>(null);

// 3. useInfiniteScroll 훅 연결
useInfiniteScroll({
  targetRef: observerRef,
  hasNextPage,
  fetchNextPage,
  isFetching,
  threshold: 1.0, // (옵션) 요소가 완전히 보일 때 호출
});

// 4. JSX에 감지 요소 ref 달기
return (
  <>
    {data?.pages.map((page) =>
      page.list.map((item) => <Card key={item.id} {...item} />),
    )}
    {hasNextPage && <div ref={observerRef} className="h-1" />}
  </>
);

---

🗂️ 관련 이슈

#67
#66

📸 스크린샷

2025-07-29.150726.mp4

2025-07-29.150817.mp4

---

Todo

• 유저 프로필 영역(Profile 컴포넌트) API 연동 예정
• 현재 남겨둔 주석들 정리 및 리팩토링 예정
• 로딩 상태 및 에러 처리 UI 개선 예정 (Skeleton, ErrorFallback 등 추가 고려)
• 불필요한 렌더링 방지, useMemo, React.memo 등으로 성능 최적화 검토 예정

---

✅ 체크리스트

• API 연동 완료
• 무한스크롤 정상 작동
• ESLint / Prettier 통과
• 반응형 스타일 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
whyne-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 29, 2025 8:09am

[626-ju]

앗 위에 설정이 되어 있는데 혹시 안되서 따로 추가하신 건가요?

[youdaeng2]

제가 성주님께서 추가한신지 모르고 따로 추가했던 걸 그대로 올렸어용 ㅋㅋ 머지 전에 삭제하겠습니다!

[626-ju]

인피니티 쿼리를 쓰면 이렇게 쓰는 거군요.
패칭함수를 따로 콜백으로 넘겨줘야할 것 같다고 생각하고 있었는데
인피티니 쿼리랑 같이 쓰니까 간결하고 좋네요