[Hotfix] 백엔드 totalCount 미응답 시 clubs.length 기준으로 카드리스트 표시 처리 #826
[Hotfix] 백엔드 totalCount 미응답 시 clubs.length 기준으로 카드리스트 표시 처리 #826oesnuj merged 1 commit intodevelop-fefrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| 코호트 / 파일 | 변경 요약 |
|---|---|
MainPage 컴포넌트 타입 및 로직 개선 frontend/src/pages/MainPage/MainPage.tsx |
활성 탭 상태 타입 주석을 typeof tabs[number]에서 (typeof tabs)[number]로 수정; useGetCardList 호출을 리팩토링하여 division을 요청 객체의 일부로 전달; totalCount 계산을 data?.totalCount ?? clubs.length로 변경(백엔드 의존성 주석 포함); isEmpty와 hasData 파생 값을 clubs.length 기반으로 리팩토링; 탭 매핑 블록 및 전체 개수 표시 UI 포맷팅 조정 |
예상 코드 리뷰 소요 시간
🎯 3 (보통) | ⏱️ ~20분
totalCount계산 로직 변경 부분 검토 필요 - 백엔드 의존성 주석 확인isEmpty와hasData가clubs.length에 의존하도록 변경된 영향 범위 확인useGetCardList호출 시division전달 방식이 기존 기능과 호환되는지 검증
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 변경 사항의 주요 내용을 명확하게 설명하고 있습니다. 백엔드 totalCount 미응답 시 clubs.length를 기준으로 카드리스트를 표시하는 처리 방식의 변경이 제목과 실제 코드 변경 내용이 일치합니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
hotfix/#825-fix-cardlist-visibility
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 @coderabbitai help to get the list of available commands and usage tips.
oesnuj
requested review from
PororoAndFriends,
Zepelown,
alsdddk,
lepitaaar,
seongje973,
seongwon030,
suhyun113 and
yw6938
and removed request for
PororoAndFriends
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/MainPage/MainPage.tsx (1)
77-77: 매직 넘버를 명명된 상수로 추출하는 것을 고려하세요.로딩 중일 때 표시할 카운트 값
0을 명명된 상수로 추출하면 코드 가독성이 향상됩니다.다음과 같이 리팩터링할 수 있습니다:
+const LOADING_COUNT = 0; + const MainPage = () => { // ... existing code ... return ( // ... existing JSX ... <Styled.TotalCountResult role='status'> - {`전체 ${isLoading ? 0 : totalCount}개의 동아리`} + {`전체 ${isLoading ? LOADING_COUNT : totalCount}개의 동아리`} </Styled.TotalCountResult> ); };As per coding guidelines
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/src/pages/MainPage/MainPage.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/MainPage/MainPage.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/MainPage/MainPage.tsx
🧠 Learnings (8)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-03-19T05:18:07.818Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
📚 Learning: 2025-07-19T05:05:10.196Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Applied to files:
frontend/src/pages/MainPage/MainPage.tsx
🧬 Code graph analysis (1)
frontend/src/pages/MainPage/MainPage.tsx (1)
frontend/src/hooks/queries/club/useGetCardList.ts (1)
useGetCardList(13-28)
🔇 Additional comments (3)
frontend/src/pages/MainPage/MainPage.tsx (3)
27-27: 타입 정확성 개선이 올바릅니다.
typeof tabs[number]에서(typeof tabs)[number]로 수정하여 배열 요소의 리터럴 타입 유니온을 올바르게 추출하고 있습니다. 이는 TypeScript 타입 정확성을 개선하는 좋은 수정입니다.
42-43: 실제 데이터 기반 UI 상태 판단이 더 신뢰성 있습니다.
isEmpty와hasData를 totalCount 대신clubs.length로 판단하는 것은 올바른 접근입니다. 실제 렌더링할 데이터를 기준으로 UI 상태를 결정하므로 백엔드 응답의 불일치와 무관하게 정확한 화면을 표시할 수 있습니다.
39-40: 현재 폴백 로직은 합리적이고 안전합니다. 백엔드 수정 후 제거하세요.검증 결과, 우려사항은 이론적이지만 실제 구현은 안전합니다:
폴백 작동 범위 제한:
keepPreviousData설정으로 인해 쿼리 변경 시 이전 데이터가 유지되므로, 폴백은 첫 로딩 또는 에러 상태에서만 작동합니다.첫 로딩 시 일관성: 첫 로딩 시
clubs = []이므로totalCount = 0이 되어 clubs 배열 길이와 일치합니다.0값 처리 개선:
??연산자 사용으로 0을 유효한 값으로 취급하므로, 검색 결과가 실제로 0개인 경우 정확히 처리됩니다.ClubSearchResponse 타입에서
totalCount: number가 필수 필드로 정의되어 있으므로, 백엔드 정상화 후 폴백을 제거하면 됩니다.
2 participants
#️⃣연관된 이슈
📝작업 내용
백엔드 totalCount 응답 누락 시, clubs.length를 기준으로 카드리스트 표시하도록 임시 처리했습니다.
Summary by CodeRabbit
릴리즈 노트
이번 업데이트는 주로 코드 품질 개선에 중점을 두었으며, 사용자에게 영향을 주는 기능 변경사항은 없습니다.