Conversation
Walkthrough이 변경 사항은 이벤트 리스트 UI에서 기존의 수동 가상화 및 반응형 레이아웃 로직을 제거하고, Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/features/event/ui/EventList.tsx(2 hunks)
🔇 Additional comments (1)
src/features/event/ui/EventList.tsx (1)
31-31: 카드 높이 상수 조정이 적절합니다데스크톱 카드 높이를 350에서 330으로 조정한 것은 가상화 성능 향상에 도움이 됩니다. 실제 EventCard 높이와 더 정확히 맞추면 가상 스크롤의 높이 추정이 개선됩니다.
Yejiin21
left a comment
Yejiin21
left a comment
There was a problem hiding this comment.
기존 react-virtual에서 virtuoso로 변경하여 내부 스크롤 없애도록 수정한거 확인했습니다:)
수고하셨습니다!
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/features/event/ui/EventList.tsx (1)
64-66: VirtuosoGrid의 네이티브 그리드 기능 활용을 고려해보세요.현재 CSS 클래스로 그리드 레이아웃을 구현하고 있지만, VirtuosoGrid는
totalCount와componentsprops를 통해 더 효율적인 그리드 지원을 제공합니다.- listClassName="flex flex-wrap justify-between" - itemClassName="w-[48%] mb-4 cursor-pointer" + totalCount={flatEvents.length} + components={{ + Item: ({ children, ...props }) => ( + <div {...props} className="w-[48%] mb-4 cursor-pointer"> + {children} + </div> + ), + List: ({ children, ...props }) => ( + <div {...props} className="flex flex-wrap justify-between"> + {children} + </div> + ), + }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/features/event/ui/EventList.tsx(2 hunks)
🔇 Additional comments (3)
src/features/event/ui/EventList.tsx (3)
1-6: import 변경사항이 적절합니다.
VirtuosoGrid컴포넌트와useNavigate훅의 추가가 새로운 구현에 맞게 잘 구성되어 있습니다.
42-52: 빈 이벤트 목록 처리가 잘 구현되었습니다.조건부 렌더링을 통해 빈 목록 상태를 효율적으로 처리하고, 태그/카테고리별로 적절한 메시지를 표시합니다.
57-57: 이전 리뷰 우려사항이 적절히 해결되었습니다.
style={{ height: '80vh', width: '90%', margin: '0 auto' }}로 고정 높이가 명시적으로 설정되어 있어, 이전 리뷰에서 제기된 가상화 동작 문제가 해결되었습니다.
| <VirtuosoGrid | ||
| style={{ height: '80vh', width: '90%', margin: '0 auto' }} // 높이 명시 필수! | ||
| useWindowScroll={true} // 전체 창 스크롤 아니라면 false 권장 | ||
| data={flatEvents} | ||
| endReached={() => { | ||
| if (hasNextPage && !isFetching) fetchNextPage(); | ||
| }} | ||
| overscan={200} | ||
| listClassName="flex flex-wrap justify-between" | ||
| itemClassName="w-[48%] mb-4 cursor-pointer" | ||
| itemContent={(_index, event) => ( | ||
| <EventCard | ||
| key={event.id} | ||
| id={event.id} | ||
| img={event.bannerImageUrl} | ||
| eventTitle={event.title} | ||
| eventDate={event.startDate} | ||
| location={event.address} | ||
| host={event.hostChannelName} | ||
| hashtags={event.hashtags} | ||
| dDay={event.remainDays} | ||
| onClick={() => navigate(`/event-details/${event.id}`)} | ||
| /> | ||
| )} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
VirtuosoGrid 구현에서 스크롤 동작을 검토해주세요.
useWindowScroll={true} 설정으로 인해 전체 페이지 스크롤을 사용하게 되는데, 이것이 의도된 동작인지 확인이 필요합니다.
개선 제안:
- 컨테이너 기반 스크롤을 원한다면
useWindowScroll={false}로 변경 overscan={200}은 다소 높은 값으로, 성능에 영향을 줄 수 있습니다. 기본값(50-100) 사용 권장
- useWindowScroll={true} // 전체 창 스크롤 아니라면 false 권장
+ useWindowScroll={false}
- overscan={200}
+ overscan={100}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <VirtuosoGrid | |
| style={{ height: '80vh', width: '90%', margin: '0 auto' }} // 높이 명시 필수! | |
| useWindowScroll={true} // 전체 창 스크롤 아니라면 false 권장 | |
| data={flatEvents} | |
| endReached={() => { | |
| if (hasNextPage && !isFetching) fetchNextPage(); | |
| }} | |
| overscan={200} | |
| listClassName="flex flex-wrap justify-between" | |
| itemClassName="w-[48%] mb-4 cursor-pointer" | |
| itemContent={(_index, event) => ( | |
| <EventCard | |
| key={event.id} | |
| id={event.id} | |
| img={event.bannerImageUrl} | |
| eventTitle={event.title} | |
| eventDate={event.startDate} | |
| location={event.address} | |
| host={event.hostChannelName} | |
| hashtags={event.hashtags} | |
| dDay={event.remainDays} | |
| onClick={() => navigate(`/event-details/${event.id}`)} | |
| /> | |
| )} | |
| /> | |
| <VirtuosoGrid | |
| style={{ height: '80vh', width: '90%', margin: '0 auto' }} // 높이 명시 필수! | |
| useWindowScroll={false} | |
| data={flatEvents} | |
| endReached={() => { | |
| if (hasNextPage && !isFetching) fetchNextPage(); | |
| }} | |
| overscan={100} | |
| listClassName="flex flex-wrap justify-between" | |
| itemClassName="w-[48%] mb-4 cursor-pointer" | |
| itemContent={(_index, event) => ( | |
| <EventCard | |
| key={event.id} | |
| id={event.id} | |
| img={event.bannerImageUrl} | |
| eventTitle={event.title} | |
| eventDate={event.startDate} | |
| location={event.address} | |
| host={event.hostChannelName} | |
| hashtags={event.hashtags} | |
| dDay={event.remainDays} | |
| onClick={() => navigate(`/event-details/${event.id}`)} | |
| /> | |
| )} | |
| /> |
🤖 Prompt for AI Agents
In src/features/event/ui/EventList.tsx between lines 56 and 80, the VirtuosoGrid
component uses useWindowScroll={true}, which enables full page scrolling; verify
if this is intended. If container-based scrolling is preferred, change
useWindowScroll to false. Also, reduce overscan from 200 to a value between 50
and 100 to improve performance by limiting offscreen item rendering.
2 participants
Summary by CodeRabbit