fix: 무한 스크롤 에러 수정 등 #151
fix: 무한 스크롤 에러 수정 등 #151
Conversation
|
💄 Storybook: https://673dcf13c9a3a1189a7c6fd4-jqkalbqajq.chromatic.com/ # Chromatic에서 생성된 Storybook URL |
| className="mb-4 h-[132px] w-full lg:h-[160px]" | ||
| /> | ||
| <div className="mb-12 rounded-lg bg-white p-5"> | ||
| <div className="mb-4"> |
There was a problem hiding this comment.
mb-12 rounded-lg bg-white p-5를 밑에 div에 추가해도되지않나요?
| onClick={handleAddComment} | ||
| disabled={addComment.isPending || !newComment.trim()} | ||
| className="h-[52px] w-[108px] text-base lg:h-[64px] lg:w-[214px] lg:text-xl" | ||
| className="h-[52px] w-[108px] rounded-lg text-[14px] font-medium sm:h-[64px] sm:w-[140px]" |
|
|
||
| return ( | ||
| <main className="min-h-screen bg-white py-12"> | ||
| <div className="min-h-screen bg-white py-12"> |
There was a problem hiding this comment.
여기도 그냥 안쪽 div에 속성 추가하면 되지않을까요?
min-h-screen은 app layout에 적용되어있고 bg는 불필요해보입니다
| } | ||
| return lastPage.nextCursor; | ||
| }, | ||
| getNextPageParam: (lastPage) => lastPage.nextCursor, |
There was a problem hiding this comment.
이 부분이 무한스크롤 에러 원인이었나요?
There was a problem hiding this comment.
-
pageParam 누락
기존 코드에서는 queryFn에서 pageParam을 받아오지 않았습니다
queryFn: async ({ pageParam }) =>로 수정하여 페이지 파라미터를 제대로 받아오도록 했습니다 -
getNextPageParam 로직 미흡
기존에는 단순히 lastPage.nextCursor만 반환했습니다
데이터가 없거나 nextCursor가 없는 경우에 대한 처리가 없었습니다
if (!lastPage.nextCursor || lastPage.data.length === 0) return undefined를 추가하여 더 이상 불러올 데이터가 없을 때 무한 로딩을 방지합니다 -
불필요한 파라미터 제거
cursor 파라미터를 props에서 제거하고 pageParam으로 대체했습니다
limit에 기본값 10을 설정했습니다 -
에러 처리 추가
toast 메시지를 추가하여 사용자에게 에러 상황을 알립니다
에러가 발생했을 때 적절한 처리를 할 수 있도록 했습니다
게시글 상세