Repository navigation
07.11 최신화 - QA 내용 수정 - #492
Conversation
- 원인: React Query의 useQuery(enabled: false)를 수동 refetch할 때, 네트워크 에러 발생 시 데이터가 undefined가 되어 조건문에서 false로 잘못 평가됨. 그 결과 통신 실패 시에도 '사용 가능한 모임 이름입니다'가 노출되는 버그가 존재했음. - 해결: 사용자 트리거 이벤트에 적합한 useMutation으로 리팩토링(useClubNameCheckMutation 도입). - mutateAsync를 활용하여 API 호출 실패 시 명시적으로 catch 블록으로 빠지도록 에러 핸들링 구조 개선. - 모임 생성 페이지와 수정 페이지 모두에 적용하여, 에러 발생 시 정상적으로 '이름 중복 확인 실패' 에러가 렌더링되도록 수정.
- 원인: 검색 결과의 좋아요 상태를 서버 상태(React Query)와 연동하지 않고, 검색 페이지 내의 불필요한 지역 상태(useState)로만 덮어쓰고 있었음. - 해결: SearchPageClient 내부의 useState(likedResults)를 완전히 제거하고, 단일 진실 공급원 원칙에 따라 useToggleBookLikeMutation을 도입하여 전역 캐시(likedByMe)를 직접 참조 및 업데이트하도록 개선.
- 원인: 검색 결과의 총 개수를 서버에서 받아오지 않고, 현재 화면에 렌더링 된 누적 데이터의 길이(searchResults.length)를 계산하여 노출하고 있었음. 이로 인해 무한 스크롤이 트리거될 때마다 총 개수가 비정상적으로 계속 증가함. - 해결: BookSearchResponse 타입 명세에 누락되었던 totalResults 속성을 추가(nextCursor 제거). - SearchPageClient에서 첫 페이지 응답(searchData.pages[0])의 totalResults 값을 참조하도록 수정하여 스크롤 여부와 상관없이 실제 총 개수가 고정 표기되도록 개선.
- 원인: 비밀번호 입력창의 우측 패딩 공간이 부족하여 텍스트가 눈(Eye) 아이콘 밑으로 겹치는 현상 발생. - 해결: input의 우측 패딩을 pr-10(40px)에서 pr-14(56px)로 확장하여 안전 구역 확보 및 아이콘을 right-4로 재배치.
- 원인: 내부 리스트 요소가 t:w-[296px] 등 고정 너비로 설정되어 있어 부모의 내부 가용 너비(292px)를 초과해 오른쪽 여백을 밀어냄. - 해결: 내부 리스트 요소의 너비를 w-full로 변경하여 좌우 여백이 완벽히 대칭을 이루도록 개선.
- 모바일 환경에서 불필요한 하단 구분선 제거 (hidden d:block) - 모바일 메인 래퍼의 하단 패딩 축소 (pb-20 -> pb-8 d:pb-20) - 확보된 공간만큼 새로운 소식 리스트의 최대 높이를 늘려(max-h-[calc(100vh-200px)]) 더 많은 카드가 노출되도록 개선
Fix: 웹 QA 버그 수정 (모임 이름 중복확인, 검색 좋아요 동기화, 무한 스크롤 총 개수 오류)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 38 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThe update replaces club-name query refetching with mutations, uses API-provided search totals and like state, changes responsive news and subscription layouts, and adjusts password toggle positioning. ChangesFunctional and responsive UI updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant GroupPage
participant ClubNameCheckMutation
participant clubService
GroupPage->>ClubNameCheckMutation: mutateAsync(name)
ClubNameCheckMutation->>clubService: checkNameDuplicate(clubName)
clubService-->>ClubNameCheckMutation: duplicate result
ClubNameCheckMutation-->>GroupPage: duplicate boolean
GroupPage->>GroupPage: update status and toast
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 several improvements and fixes across different pages, including refactoring the club name duplicate check from a query to a mutation, integrating a book-liking mutation on the search page, and refining responsive layouts. Feedback focuses on correcting a Tailwind CSS syntax issue with the calc() function in NewsPageClient.tsx and ensuring the height prop is not ignored in the Subscription/list_subscribe_large.tsx component.
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.
| <div | ||
| className="flex flex-col gap-4 overflow-y-auto no-scrollbar pr-2" | ||
| style={{ maxHeight: "calc(100vh - 400px)", minHeight: "400px" }} | ||
| className="flex flex-col gap-4 overflow-y-auto no-scrollbar pr-2 max-h-[calc(100vh-200px)] d:max-h-[calc(100vh-400px)] min-h-[400px]" |
There was a problem hiding this comment.
CSS의 calc() 함수에서 뺄셈(-) 연산자는 양옆에 반드시 공백(whitespace)이 있어야 브라우저에서 올바르게 해석됩니다. 공백이 없으면 (calc(100vh-200px)) 유효하지 않은 CSS로 처리되어 max-height 스타일이 적용되지 않습니다.
Tailwind CSS의 임의 값(arbitrary values) 문법에서는 공백 대신 언더스코어(_)를 사용하여 calc(100vh_-_200px)와 같이 작성해야 올바른 CSS가 생성됩니다.
| className="flex flex-col gap-4 overflow-y-auto no-scrollbar pr-2 max-h-[calc(100vh-200px)] d:max-h-[calc(100vh-400px)] min-h-[400px]" | |
| className="flex flex-col gap-4 overflow-y-auto no-scrollbar pr-2 max-h-[calc(100vh_-_200px)] d:max-h-[calc(100vh_-_400px)] min-h-[400px]" |
| return ( | ||
| <section | ||
| className={`w-[336px] ${height} rounded-lg border-2 border-Subbrown-4 bg-stone-50 p-5`} | ||
| className={`w-full max-w-[336px] h-[380px] rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} |
There was a problem hiding this comment.
컴포넌트의 Props로 height를 구조 분해 할당으로 받고 있지만, 실제 section 태그의 className에는 h-[380px]가 하드코딩되어 있어 전달받은 height 옵션이 무시되고 있습니다. 외부에서 지정한 높이가 올바르게 반영되도록 ${height} 변수를 사용하도록 수정하는 것이 좋습니다.
| className={`w-full max-w-[336px] h-[380px] rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} | |
| className={`w-full max-w-[336px] ${height} rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} |
![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
🧹 Nitpick comments (1)
src/app/(main)/groups/[id]/admin/edit/page.tsx (1)
70-70: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUpdate stale comments referencing the old query-based approach.
Line 70's inline comment says "중복확인 쿼리 사용" but
useClubNameCheckMutationis a mutation, not a query. Lines 146-147 referenceuseClubNameCheckQuerywhich no longer exists — both create and edit pages now useuseClubNameCheckMutation.♻️ Proposed comment updates
- const checkNameMutation = useClubNameCheckMutation(); // ✅ edit에서도 중복확인 쿼리 사용 + const checkNameMutation = useClubNameCheckMutation(); // ✅ edit에서도 중복확인 mutation 사용- // ⚠️ create에선 useClubNameCheckQuery를 썼는데, edit 페이지에선 "UI 왌전 동일" 원칙 때문에 버튼/문구 동일 유지. - // 다만 실제 체크 API 훅이 edit쪽에 없다면, create 훅을 그대로 import해서 쓰면 됨. - // 여기서는 "이름이 바뀌면 체크 필요"만 UI로 강제한다. + // create와 동일한 useClubNameCheckMutation을 사용하여 중복확인 수행. + // edit에서는 "이름이 바뀌면 체크 필요"만 UI로 강제한다.Also applies to: 146-147
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/`(main)/groups/[id]/admin/edit/page.tsx at line 70, Update the comments near checkNameMutation and the related validation logic to accurately reference useClubNameCheckMutation as a mutation, not a query; replace stale useClubNameCheckQuery references with the current mutation name while leaving the implementation unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/base-ui/home/Subscription/list_subscribe_large.tsx`:
- Line 86: In the section rendered by the ListSubscribeLarge component, replace
the hardcoded h-[380px] class in the className with the interpolated height prop
so caller-supplied values are applied, while preserving the existing default.
---
Nitpick comments:
In `@src/app/`(main)/groups/[id]/admin/edit/page.tsx:
- Line 70: Update the comments near checkNameMutation and the related validation
logic to accurately reference useClubNameCheckMutation as a mutation, not a
query; replace stale useClubNameCheckQuery references with the current mutation
name while leaving the implementation unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 14781adc-cbfd-42f8-9343-4e05e642c226
📒 Files selected for processing (9)
src/app/(main)/groups/[id]/admin/edit/page.tsxsrc/app/(main)/groups/create/CreateGroupPageClient.tsxsrc/app/(main)/news/NewsPageClient.tsxsrc/app/(main)/search/SearchPageClient.tsxsrc/components/base-ui/Login/components/LoginForm.tsxsrc/components/base-ui/home/Recommendation/list_subscribe_large.tsxsrc/components/base-ui/home/Subscription/list_subscribe_large.tsxsrc/hooks/queries/useCreateClubQueries.tssrc/types/book.ts
| return ( | ||
| <section | ||
| className={`w-[336px] ${height} rounded-lg border-2 border-Subbrown-4 bg-stone-50 p-5`} | ||
| className={`w-full max-w-[336px] h-[380px] rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
height prop is silently ignored — hardcoded instead of interpolated.
The height prop is destructured (line 78, default "h-[380px]") and declared in ListSubscribeLargeProps (line 65), but the section's className hardcodes h-[380px] instead of using ${height}. Any caller passing a custom height value will have it silently ignored. The Recommendation version of this same component correctly interpolates ${height}.
🐛 Proposed fix: interpolate height prop instead of hardcoding
- className={`w-full max-w-[336px] h-[380px] rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`}
+ className={`w-full max-w-[336px] ${height} rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`}📝 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.
| className={`w-full max-w-[336px] h-[380px] rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} | |
| className={`w-full max-w-[336px] ${height} rounded-lg border border-Subbrown-4 bg-stone-50 px-5 pt-5 pb-6`} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/base-ui/home/Subscription/list_subscribe_large.tsx` at line
86, In the section rendered by the ListSubscribeLarge component, replace the
hardcoded h-[380px] class in the className with the interpolated height prop so
caller-supplied values are applied, while preserving the existing default.
…rame drops This fixes an issue where the drag listener was unmounted and remounted on every render, causing jank during continuous swiping.
…rtualization bug This prevents identical DOM nodes from mixing states when replacing items during a swipe, ensuring reliable rendering of edge cases.
Fix/486 groups logic
📌 개요 (Summary)
🛠️ 변경 사항 (Changes)
📸 스크린샷 (Screenshots)
(UI 변경 사항이 있다면 첨부해주세요)
✅ 체크리스트 (Checklist)
pnpm build)pnpm lint)Summary by CodeRabbit