Conversation
Walkthrough이 변경사항은 이벤트 목록의 무한 스크롤 및 페이징 처리를 위한 커스텀 훅( Changes
Sequence Diagram(s)sequenceDiagram
participant UI as EventList/SearchPage UI
participant Hook as useEventList
participant API as getAllEventsInfinite
UI->>Hook: useEventList() 호출
Hook->>API: getAllEventsInfinite({ page, filter })
API-->>Hook: 이벤트 페이지 데이터 반환
Hook-->>UI: { data, fetchNextPage, hasNextPage, isFetching }
UI->>Hook: fetchNextPage() (스크롤 하단 도달 시)
Hook->>API: getAllEventsInfinite(다음 페이지)
API-->>Hook: 다음 이벤트 페이지 데이터 반환
Hook-->>UI: 갱신된 데이터
Possibly related PRs
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ 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: 2
🔭 Outside diff range comments (1)
src/features/event-manage/event-list/ui/EventList.tsx (1)
33-55: 🛠️ Refactor suggestion데이터 불러오기 상태에 대한 처리가 필요합니다.
현재 코드는 데이터가 로딩 중일 때 전체 그리드를 렌더링하지만,
data가 undefined인 초기 상태에 대한 처리가 누락되어 있습니다. 로딩 상태에 대한 명시적인 처리를 추가하는 것이 좋겠습니다.return ( <> + {!data && <div className="text-center py-4">데이터를 불러오는 중입니다...</div>} <div className="grid grid-cols-2 gap-4 mx-6 mt-2 md:grid-cols-2 lg:grid-cols-2"> {data?.pages.map((page, pageIndex) =>
🧹 Nitpick comments (4)
src/pages/home/ui/MainPage.tsx (1)
44-48: 로그인 상태에 따른 UI 개선이 적절합니다.로그인 상태에 따라 다른 컴포넌트를 표시하는 조건부 렌더링이 잘 구현되었습니다. 다만, 몇 가지 개선 사항을 제안합니다:
- ProfileCircle에 고정된 "userProfile" 값 대신 실제 사용자 프로필 이미지를 활용하는 것이 좋겠습니다.
- name?.slice(1, 3)는 이름이 짧은 경우(한 글자) 문제가 될 수 있습니다. 이름 길이에 따른 조건부 처리를 고려해보세요.
- <ProfileCircle profile="userProfile" name={name?.slice(1, 3) || ''} className="w-11 h-11 text-15" /> + <ProfileCircle + profile={userProfile || "userProfile"} + name={name ? (name.length > 1 ? name.slice(1, 3) : name) : ''} + className="w-11 h-11 text-15" + />src/features/event-manage/event-list/ui/EventList.tsx (2)
4-5: 임포트 구조가 적절합니다.필요한 훅과 타입을 적절히 임포트했습니다. 다만 컴포넌트와 타입 이름이 동일하여 정적 분석 도구에서 경고가 발생했습니다. 타입 이름에 접미사를 추가하는 방식으로 구분하는 것이 좋습니다.
- import type { EventList } from '../model/eventList'; + import type { EventList as EventListType } from '../model/eventList';
12-12: 개발용 콘솔 로그를 제거해주세요.프로덕션 코드에는 디버깅용 콘솔 로그를 남겨두지 않는 것이 좋습니다.
- console.log('EventList data.pages:', data?.pages);src/pages/search/ui/SearchPage.tsx (1)
93-99:toLowerCase()반복 호출을 줄여 가독성과 성능을 개선하세요같은
keyword.toLowerCase()와 각 필드의toLowerCase()를 루프마다 세 번씩 호출하고 있습니다. 한 번만 소문자로 변환해 두고 비교하면 더 간결하며, 대규모 데이터셋에서도 약간의 성능 이점을 얻을 수 있습니다.- .filter( - (event: EventList) => - event.title.toLowerCase().includes(keyword.toLowerCase()) || - event.address.toLowerCase().includes(keyword.toLowerCase()) || - event.hostChannelName.toLowerCase().includes(keyword.toLowerCase()) - ) + .filter((event: EventList) => { + const lower = keyword.toLowerCase(); + return ( + event.title.toLowerCase().includes(lower) || + event.address.toLowerCase().includes(lower) || + event.hostChannelName.toLowerCase().includes(lower) + ); + })같은 방식으로 145-147행의
some조건도 수정해 주세요.Also applies to: 145-147
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/entities/event/hook/useEventListHook.ts(1 hunks)src/features/event-manage/event-list/model/eventList.ts(1 hunks)src/features/event-manage/event-list/ui/EventList.tsx(2 hunks)src/pages/home/ui/MainPage.tsx(2 hunks)src/pages/search/ui/SearchPage.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/features/event-manage/event-list/model/eventList.ts (1)
src/shared/types/baseEventType.ts (1)
BaseEvent(5-24)
src/entities/event/hook/useEventListHook.ts (3)
src/shared/hooks/useInfiniteScroll.ts (1)
useInfiniteScroll(14-21)src/features/event-manage/event-list/model/eventList.ts (1)
EventList(3-7)src/entities/event/api/event.ts (1)
getAllEventsInfinite(28-44)
src/features/event-manage/event-list/ui/EventList.tsx (1)
src/features/event-manage/event-list/model/eventList.ts (1)
EventList(3-7)
src/pages/search/ui/SearchPage.tsx (1)
src/features/event-manage/event-list/model/eventList.ts (1)
EventList(3-7)
🪛 Biome (1.9.4)
src/features/event-manage/event-list/ui/EventList.tsx
[error] 7-7: Shouldn't redeclare 'EventList'. Consider to delete it or rename it.
'EventList' is defined here:
(lint/suspicious/noRedeclare)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (6)
src/features/event-manage/event-list/model/eventList.ts (1)
1-7: 타입 정의가 명확하고 적절합니다.BaseEvent를 확장하여 이벤트 목록에 필요한 추가 속성들을 잘 정의하였습니다. id, hostChannelName, remainDays 속성들은 이벤트 목록 UI에 필요한 정보들을 포함하고 있습니다.
src/pages/home/ui/MainPage.tsx (1)
17-17: ProfileCircle 컴포넌트 추가 확인새로운 프로필 컴포넌트를 추가하여 UI 개선을 수행했습니다.
src/entities/event/hook/useEventListHook.ts (1)
1-4: 필요한 임포트들이 잘 정의되어 있습니다.이벤트 목록 기능 구현에 필요한 타입과 훅, API 함수를 적절히 임포트했습니다.
src/features/event-manage/event-list/ui/EventList.tsx (2)
8-8: 커스텀 훅 사용이 잘 구현되었습니다.기존의 인라인 infinite scroll 로직을 커스텀 훅으로 추출하여 코드가 더 간결해졌습니다.
37-37: 타입 적용이 올바르게 되었습니다.이벤트 아이템의 타입이 올바르게 EventList로 지정되었습니다. 이를 통해 IDE의 타입 힌트와 자동완성 기능을 활용할 수 있습니다.
src/pages/search/ui/SearchPage.tsx (1)
36-53: IntersectionObserver 재생성 로직 확인 권고
observerRef.current를 매 렌더마다 새로 생성/해제하고 있는데,lastEventCardRef.current가 아직 설정되지 않은 첫 렌더에서 옵저버가 등록되지 않을 수 있습니다. 필요한 경우
if (!lastEventCardRef.current) return;로 빠르게 종료하거나useCallbackref 로 마지막 카드 요소가 바뀔 때마다 옵저버를 재등록하는 방식도 고려해 보세요.큰 문제는 아니지만 빠른 스크롤 상황에서 페치가 지연될 가능성을 줄일 수 있습니다.
| const useEventList = () => { | ||
| const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteScroll<EventList>({ | ||
| queryKey: ['events', 'infinite'], | ||
| queryFn: getAllEventsInfinite, | ||
| size: 10, | ||
| filters: { tag: 'current' }, | ||
| }); | ||
| return { data, fetchNextPage, hasNextPage, isFetching }; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
커스텀 훅의 재사용성 개선이 필요합니다.
이벤트 목록을 가져오는 훅이 잘 구현되었지만, 하드코딩된 필터 값({ tag: 'current' })과 고정된 사이즈(10)는 훅의 재사용성을 제한합니다. 다양한 상황에서 활용할 수 있도록 매개변수를 받도록 개선하는 것이 좋겠습니다.
- const useEventList = () => {
+ const useEventList = (options = { size: 10, tag: 'current' }) => {
const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteScroll<EventList>({
queryKey: ['events', 'infinite'],
queryFn: getAllEventsInfinite,
- size: 10,
- filters: { tag: 'current' },
+ size: options.size,
+ filters: { tag: options.tag },
});
return { data, fetchNextPage, hasNextPage, isFetching };
};📝 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.
| const useEventList = () => { | |
| const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteScroll<EventList>({ | |
| queryKey: ['events', 'infinite'], | |
| queryFn: getAllEventsInfinite, | |
| size: 10, | |
| filters: { tag: 'current' }, | |
| }); | |
| return { data, fetchNextPage, hasNextPage, isFetching }; | |
| }; | |
| const useEventList = (options = { size: 10, tag: 'current' }) => { | |
| const { data, fetchNextPage, hasNextPage, isFetching } = | |
| useInfiniteScroll<EventList>({ | |
| queryKey: ['events', 'infinite'], | |
| queryFn: getAllEventsInfinite, | |
| size: options.size, | |
| filters: { tag: options.tag }, | |
| }); | |
| return { data, fetchNextPage, hasNextPage, isFetching }; | |
| }; |
| {hostData?.result | ||
| .filter(host => host.hostChannelName.toLowerCase().includes(keyword.toLowerCase())) | ||
| .map(host => ( | ||
| <ProfileCircle | ||
| key={host.id} | ||
| profile="hostInfoProfile" | ||
| name={host.name} | ||
| id={host.id} | ||
| profile="hostInfoProfile" | ||
| name={host.hostChannelName} | ||
| onClick={() => navigate(`/menu/hostInfo/${host.id}`)} | ||
| className="w-19 h-19 md:w-20 md:h-20 text-sm md:text-16 lg:text-base" | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
hostData?.result 접근 시 null-safe 체인이 빠져 런타임 오류가 발생합니다
hostData 가 아직 로딩 중이거나 에러로 인해 undefined 인 경우, hostData?.result 는 undefined 를 반환합니다. 그럼에도 .filter / .some 메서드를 바로 호출하기 때문에 “Cannot read properties of undefined (reading 'filter')” 와 같은 예외가 발생할 수 있습니다.
아래처럼 result 에도 optional chaining 을 추가하여 방어 코드를 적용해 주세요.
- {hostData?.result
- .filter(host => host.hostChannelName.toLowerCase().includes(keyword.toLowerCase()))
+ {hostData?.result?.filter(
+ host => host.hostChannelName.toLowerCase().includes(keyword.toLowerCase())
+ )- {!hostData?.result.some(host =>
+ {!hostData?.result?.some(host =>Also applies to: 141-149
2 participants
ToDo
이슈 이외에 ToDo
추가 작업
Summary by CodeRabbit
신규 기능
리팩터