Repository navigation
fix: resolve book story QA layout issues - #491
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughSearch results now use authenticated like mutations and cached like state. Club member role changes are restricted by actor and target status, with ownership-transfer cache invalidation. Multiple lists share ChangesBook state and list presentation
Club member role permissions
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant AdminMembersPage
participant useClubMeQuery
participant RoleEditDropdown
participant ClubMemberMutation
participant ReactQueryCache
AdminMembersPage->>useClubMeQuery: query actor status
useClubMeQuery-->>AdminMembersPage: return actorStatus
AdminMembersPage->>RoleEditDropdown: provide actorStatus and target status
RoleEditDropdown-->>AdminMembersPage: render permitted actions
AdminMembersPage->>ClubMemberMutation: submit authorized role change
ClubMemberMutation->>ReactQueryCache: invalidate member queries
ClubMemberMutation->>ReactQueryCache: invalidate club-home query for ownership transfer
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces layout fixes (using min-w-0 to prevent flex overflow), replaces inline empty states with a reusable EmptyState component, and integrates the book-liking mutation into the search page. It also attempts to sync the book detail query with cached like states. However, the reviewer noted a critical issue in useBookDetailQuery where overriding fresh server data with cached state can lead to UI bugs and stale data; they suggested using React Query's initialData or placeholderData instead.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| queryFn: async () => { | ||
| const book = await bookService.getBookDetail(isbn); | ||
| const cachedLikeState = getCachedBookLikeState(queryClient, isbn); | ||
|
|
||
| if (book.likedByMe || cachedLikeState === undefined) { | ||
| return book; | ||
| } | ||
|
|
||
| return { | ||
| ...book, | ||
| likedByMe: cachedLikeState, | ||
| }; | ||
| }, |
There was a problem hiding this comment.
서버에서 조회한 최신 데이터(book.likedByMe)가 false임에도 불구하고, 클라이언트 캐시(cachedLikeState)가 true인 경우 캐시 값으로 덮어씌우도록 구현되어 있습니다.
이 방식은 다음과 같은 심각한 부작용을 초래할 수 있습니다:
- 서버 데이터와의 불일치: 다른 기기나 브라우저 탭에서 좋아요를 취소하여 서버 상태는
false가 되었더라도, 현재 기기의 로컬 캐시에true가 남아있다면 사용자는 상세 페이지에서 계속 좋아요가 된 상태로 보게 됩니다. 즉, 서버의 최신 상태가 무시됩니다. - 캐시 정합성 문제:
getCachedBookLikeState는 여러 검색 쿼리 중 하나라도true를 가지고 있으면true를 반환합니다. 비활성화된(inactive) 오래된 검색 결과 캐시가 남아있는 경우, 사용자가 좋아요를 취소했음에도 계속true로 덮어씌워져 좋아요 취소가 반영되지 않는 버그가 발생할 수 있습니다.
해당 기능을 구현한 의도가 상세 페이지 진입 시 로딩 중에도 이전 페이지(검색 결과 등)의 좋아요 상태를 즉시 보여주기 위함(낙관적 UI 또는 끊김 없는 UX)이라면, queryFn 내부에서 서버 데이터를 덮어쓰는 대신 React Query의 initialData 또는 placeholderData 옵션을 사용하는 것이 올바른 접근법입니다.
이렇게 하면 상세 페이지 진입 시 캐시된 데이터를 먼저 보여주고, 서버 요청이 완료되면 서버에서 가져온 최신 데이터로 자연스럽게 업데이트(refetch)됩니다.
queryFn: () => bookService.getBookDetail(isbn),
📌 개요 (Summary)
🛠️ 변경 사항 (Changes)
📸 스크린샷 (Screenshots)
(UI 변경 사항이 있다면 첨부해주세요)
✅ 체크리스트 (Checklist)
pnpm build)pnpm lint)Summary by CodeRabbit