Conversation
suhyun113
requested review from
lepitaaar,
oesnuj,
seongje973 and
seongwon030
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 변경 내용 |
|---|---|
API & 타입 frontend/src/apis/getClubList.ts, frontend/src/types/club.responses.ts |
API 응답 형태를 Club[]에서 ClubSearchResponse (clubs: Club[], totalCount: number)로 변경하고 타입 파일 추가. |
쿼리 훅 frontend/src/hooks/queries/club/useGetCardList.ts |
useQuery 제네릭을 ClubSearchResponse로 변경. select에서 로고 변환 후 { totalCount, clubs } 형태로 반환하도록 수정. |
메인 페이지 로직 frontend/src/pages/MainPage/MainPage.tsx |
data.clubs → clubs, data.totalCount → totalCount로 사용; isEmpty/hasData 판정 로직을 totalCount 기반으로 변경하고 TotalCountResult 컴포넌트로 총 개수 표시 추가. |
메인 페이지 스타일 frontend/src/pages/MainPage/MainPage.styles.ts |
SectionBar 및 TotalCountResult 스타일 컴포넌트 추가. SectionTabs 마진 조정 및 반응형 스타일 업데이트. |
카테고리 버튼 스타일 frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts |
CategoryButton 패딩 8px→10px, span line-height 30px→17px 변경(레이아웃/간격 조정). |
Sequence Diagram(s)
sequenceDiagram
participant Page as MainPage
participant Hook as useGetCardList
participant API as getClubList API
Page->>Hook: useQuery 요청 (검색 파라미터)
Hook->>API: getClubList 호출
API-->>Hook: { clubs: Club[], totalCount: number }
Hook-->>Page: select 변환 → { totalCount, clubs: Club[] (logo 변환) }
Page->>Page: totalCount로 isEmpty/hasData 판정 및 UI 렌더링 (TotalCountResult 포함)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- 주의할 파일/영역:
useGetCardList.ts의 select 변환에서 로고 변환과 totalCount 보존이 정확한지 검증MainPage.tsx의 isEmpty/hasData 재정의가 모든 경계 조건(로딩, 에러, 빈 결과)에 대해 올바른지 확인- 스타일 변경(SectionBar/TotalCountResult)에서 모바일/데스크톱 반응형 동작 검증
Possibly related issues
- [feature] MOA-290 검색 결과 개수를 표시한다 #786: 프론트에서 검색 결과 총개수 노출 관련 변경과 직접 연관됨 — 동일 목적(총 개수 표시).
- MOA-290: 검색 결과 개수 표시 기능 요구사항과 일치 — 이 PR이 해당 이슈의 구현 목표를 포함함.
Possibly related PRs
- [Feature] 검색 결과에 총 개수를 숫자한다. #763 — 백엔드에서 club search 응답에 totalCount 추가한 PR과 데이터 형식 변경이 일관됨.
- [feature] 모집 상태 보기 기능을 제거하고 중앙동아리 태그를 이동한다 #759 — MainPage UI/레이아웃 관련 변경을 다루는 PR로, 섹션/탭 구조와 스타일 변경이 겹침.
Suggested reviewers
- seongje973
- oesnuj
- seongwon030
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | PR 제목 "[feature] 검색 결과 개수를 표시한다"는 변경 사항의 핵심 목표를 명확하고 정확하게 설명합니다. 모든 코드 변경사항이 검색 결과 개수를 API에서 반환하고 화면에 표시하는 기능을 구현하기 위한 것으로, 제목은 간결하고 의미 있는 정보를 전달합니다. 스캔 중인 팀원이 이 PR의 주요 변경사항을 쉽게 파악할 수 있습니다. |
| Linked Issues Check | ✅ Passed | 연결된 이슈 MOA-290의 모든 요구사항이 구현되었습니다. 검색 결과 개수 연동 측면에서는 getClubList에서 totalCount를 포함하는 응답 구조로 변경하고, useGetCardList에서 ClubSearchResponse 타입을 도입하여 데이터 흐름을 구성했습니다. 검색 결과 개수 표시 측면에서는 MainPage에서 TotalCountResult 컴포넌트를 통해 totalCount를 화면에 표시하고 있습니다. 결과 디자인 적용 측면에서는 SectionBar 컨테이너, TotalCountResult 스타일, 그리고 CategoryButton의 패딩/라인 높이 조정으로 디자인을 구현했습니다. |
| Out of Scope Changes Check | ✅ Passed | 모든 코드 변경사항이 "검색 결과 개수를 표시한다"는 PR의 주요 목표와 MOA-290 이슈의 요구사항 범위 내에 있습니다. getClubList의 반환 타입 변경, ClubSearchResponse 타입 도입, MainPage의 totalCount 표시, SectionBar와 TotalCountResult 스타일 추가, 그리고 CategoryButton의 스타일 조정은 모두 검색 결과 개수 연동 및 디자인 적용이라는 명확한 목표 달성을 위한 변경사항입니다. 범위를 벗어난 무관한 수정사항이 없습니다. |
✨ 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
feature/#786-show-search-result-count-MOA-290
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.
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/apis/getClubList.ts (1)
3-8: getClubList 파라미터 전달 순서 수정getClubList 정의 순서
(keyword, recruitmentStatus, category, division)와 호출부(useGetCardList.ts:19)(keyword, recruitmentStatus, division, category)가 뒤바뀌어 잘못된 검색 결과를 초래합니다. 호출부 인자를 정의 순서에 맞게 교정하세요.
♻️ Duplicate comments (1)
frontend/src/hooks/queries/club/useGetCardList.ts (1)
6-9: 중복된 타입 정의를 제거하세요.이 인터페이스는
frontend/src/types/club.ts에서 이미 정의되어 있습니다. 자세한 내용은club.ts파일의 리뷰 코멘트를 참조하세요.
🧹 Nitpick comments (3)
frontend/src/pages/MainPage/MainPage.tsx (1)
68-70: 로딩 중 총 개수 표시 개선을 고려하세요.로딩 중일 때 "총 0개"를 표시하는 것은 사용자에게 혼란을 줄 수 있습니다. 로딩 중임을 나타내는 별도의 텍스트나 표시를 고려해보세요.
다음과 같이 수정할 수 있습니다:
<Styled.TotalCountResult role="status"> - {`총 ${isLoading ? 0 : totalCount}개의 동아리가 검색되었습니다`} + {isLoading ? '검색 중...' : `총 ${totalCount}개의 동아리가 검색되었습니다`} </Styled.TotalCountResult>frontend/src/pages/MainPage/MainPage.styles.ts (1)
71-80: 총 개수 표시 스타일이 적절합니다.
TotalCountResult컴포넌트의 스타일링과 반응형 처리가 잘 되어 있습니다. 다만 75번 라인의padding-top: 13px는 매직 넘버입니다. 코드 가독성을 위해 이 값의 의도를 주석으로 설명하거나 의미 있는 이름의 상수로 추출하는 것을 고려해보세요.As per coding guidelines
frontend/src/hooks/queries/club/useGetCardList.ts (1)
17-27: 데이터 변환 로직이 올바릅니다.
useQuery의 제네릭 타입이 새로운ClubSearchResponse에 맞게 업데이트되었고,select함수에서 로고 URL을 적절히 변환하면서totalCount를 유지하고 있습니다.23번 라인의
clubs배열을 감싸는 불필요한 괄호를 제거하여 코드를 간결하게 만들 수 있습니다:select: (data) => ({ totalCount: data.totalCount, - clubs: (data.clubs.map((club) => ({ + clubs: data.clubs.map((club) => ({ ...club, logo: convertToDriveUrl(club.logo), - }))), + })), }),
📜 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 (6)
frontend/src/apis/getClubList.ts(1 hunks)frontend/src/hooks/queries/club/useGetCardList.ts(1 hunks)frontend/src/pages/MainPage/MainPage.styles.ts(2 hunks)frontend/src/pages/MainPage/MainPage.tsx(2 hunks)frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts(2 hunks)frontend/src/types/club.ts(1 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/types/club.tsfrontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.tsfrontend/src/apis/getClubList.tsfrontend/src/hooks/queries/club/useGetCardList.tsfrontend/src/pages/MainPage/MainPage.styles.tsfrontend/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
🧬 Code graph analysis (3)
frontend/src/hooks/queries/club/useGetCardList.ts (2)
frontend/src/types/club.ts (1)
Club(3-12)frontend/src/apis/getClubList.ts (1)
getClubList(3-30)
frontend/src/pages/MainPage/MainPage.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(8-14)
frontend/src/pages/MainPage/MainPage.tsx (1)
frontend/src/hooks/queries/club/useGetCardList.ts (1)
useGetCardList(11-29)
🔇 Additional comments (4)
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts (1)
25-25: 스타일 조정이 적절합니다.버튼 패딩과 라인 높이 조정으로 시각적 정렬이 개선되었습니다.
Also applies to: 52-52
frontend/src/apis/getClubList.ts (1)
26-29: API 응답 구조 변경이 올바릅니다.클럽 목록과 함께 총 개수를 반환하도록 구조를 변경한 것은 PR 목표에 부합합니다.
frontend/src/pages/MainPage/MainPage.tsx (1)
31-38: 데이터 처리 로직이 올바릅니다.새로운 API 응답 구조에 맞춰
clubs와totalCount를 적절히 추출하고 있으며,isEmpty와hasData조건도totalCount를 기반으로 정확하게 업데이트되었습니다.frontend/src/pages/MainPage/MainPage.styles.ts (1)
22-31: 새로운 레이아웃 컴포넌트가 적절합니다.
SectionBar컴포넌트로 섹션 탭과 총 개수 표시를 감싸는 구조가 깔끔하며, 반응형 마진 조정도 적절합니다.
frontend/src/types/club.ts
Outdated
| export interface ClubSearchResponse { | ||
| clubs: Club[]; | ||
| totalCount: number; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
타입이 중복 정의되어 있습니다.
ClubSearchResponse 인터페이스가 이 파일과 frontend/src/hooks/queries/club/useGetCardList.ts (6-9번 라인)에 중복 정의되어 있습니다. 타입은 한 곳에서만 정의하고 필요한 곳에서 임포트해야 합니다.
useGetCardList.ts에서 중복 정의를 제거하고 이 파일에서 임포트하도록 수정하세요:
frontend/src/hooks/queries/club/useGetCardList.ts에 다음 diff를 적용하세요:
import { useQuery, keepPreviousData } from '@tanstack/react-query';
import { getClubList } from '@/apis/getClubList';
-import { Club } from '@/types/club';
+import { Club, ClubSearchResponse } from '@/types/club';
import convertToDriveUrl from '@/utils/convertGoogleDriveUrl';
-export interface ClubSearchResponse {
- clubs: Club[];
- totalCount: number;
-}
-
export const useGetCardList = (📝 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.
| export interface ClubSearchResponse { | |
| clubs: Club[]; | |
| totalCount: number; | |
| } | |
| // frontend/src/hooks/queries/club/useGetCardList.ts | |
| import { useQuery, keepPreviousData } from '@tanstack/react-query'; | |
| import { getClubList } from '@/apis/getClubList'; | |
| import { Club, ClubSearchResponse } from '@/types/club'; | |
| import convertToDriveUrl from '@/utils/convertGoogleDriveUrl'; | |
| export const useGetCardList = ( | |
| /* your parameters here */ | |
| ) => { | |
| return useQuery<ClubSearchResponse>( | |
| ['clubList' /*, params */], | |
| () => getClubList(/* params */), | |
| { | |
| keepPreviousData, | |
| } | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In frontend/src/types/club.ts around lines 35 to 38, the ClubSearchResponse
interface is the canonical definition; remove the duplicate definition from
frontend/src/hooks/queries/club/useGetCardList.ts (lines 6-9) and replace it
with an import of ClubSearchResponse from frontend/src/types/club.ts. Update
useGetCardList.ts to remove the local interface, add an import statement for
ClubSearchResponse (and any dependent types like Club if needed) from
frontend/src/types/club.ts, and ensure all usages in the file reference the
imported type.
There was a problem hiding this comment.
@lepitaaar 네, 맞습니다! 타입 정의를 frontend/src/types/club.ts에 통합하고, useGetCardList.ts에서는 임포트해서 사용하는 것이 좋습니다.
위에서 제안한 대로 useGetCardList.ts의 중복된 인터페이스 정의를 제거하고, 대신 ClubSearchResponse를 @/types/club에서 임포트하면 코드 중복을 제거하고 타입 일관성을 유지할 수 있습니다. 👍
frontend/src/types/club.ts
Outdated
| export interface ClubSearchResponse { | ||
| clubs: Club[]; | ||
| totalCount: number; | ||
| } |
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
타입 분리하면 좋을 것 같네요 고생하셨습니다 !
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/hooks/queries/club/useGetCardList.ts (1)
16-22: 선택적 리팩토링: 불필요한 괄호 제거
select함수의 로직은 올바르게 구현되었습니다. 다만 18-21번 줄의data.clubs.map주위의 괄호는 불필요하므로 가독성을 위해 제거할 수 있습니다.다음과 같이 괄호를 제거할 수 있습니다:
select: (data) => ({ totalCount: data.totalCount, - clubs: (data.clubs.map((club) => ({ + clubs: data.clubs.map((club) => ({ ...club, logo: convertToDriveUrl(club.logo), - }))), + })), }),
📜 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 (2)
frontend/src/hooks/queries/club/useGetCardList.ts(2 hunks)frontend/src/types/club.responses.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
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/types/club.responses.tsfrontend/src/hooks/queries/club/useGetCardList.ts
🧠 Learnings (1)
📚 Learning: 2025-05-01T08:32:09.398Z
Learnt from: Due-IT
Repo: Moadong/moadong PR: 329
File: backend/src/main/java/moadong/club/controller/ClubSearchController.java:0-0
Timestamp: 2025-05-01T08:32:09.398Z
Learning: ClubSearchController의 searchClubsByKeyword 메서드와 ClubSearchService의 searchClubsByKeyword 메서드 사이에 파라미터 순서 일치가 중요하다. 현재 컨트롤러의 매개변수 순서는 'keyword, recruitmentStatus, category, division'인 반면, 서비스 메서드의 순서는 'keyword, recruitmentStatus, division, category'이다. 컨트롤러에서 서비스 호출 시 'keyword, recruitmentStatus, division, category' 순서로 전달하면 category와 division 값이 바뀌어 검색 결과가 잘못될 수 있다.
Applied to files:
frontend/src/hooks/queries/club/useGetCardList.ts
🧬 Code graph analysis (2)
frontend/src/types/club.responses.ts (1)
frontend/src/types/club.ts (1)
Club(3-12)
frontend/src/hooks/queries/club/useGetCardList.ts (2)
frontend/src/types/club.responses.ts (1)
ClubSearchResponse(3-6)frontend/src/apis/getClubList.ts (1)
getClubList(3-30)
🔇 Additional comments (2)
frontend/src/types/club.responses.ts (1)
1-6: 잘 구현되었습니다!타입 정의가 명확하고 구조가 깔끔합니다.
ClubSearchResponse인터페이스가 검색 결과와 총 개수를 적절히 표현하고 있습니다.frontend/src/hooks/queries/club/useGetCardList.ts (1)
3-3: 적절한 타입 임포트입니다.새로운
ClubSearchResponse타입을 올바르게 임포트했습니다.
| return useQuery<ClubSearchResponse, unknown, ClubSearchResponse>({ | ||
| queryKey: ['clubs', keyword, recruitmentStatus, division, category], | ||
| queryFn: () => getClubList(keyword, recruitmentStatus, division, category), |
There was a problem hiding this comment.
파라미터 순서 오류로 인한 검색 결과 오류가 발생합니다.
getClubList 함수 호출 시 division과 category 파라미터의 순서가 바뀌어 있습니다. API 함수의 시그니처는 getClubList(keyword, recruitmentStatus, category, division) 순서를 기대하지만, 현재 코드는 division과 category를 반대로 전달하고 있습니다. 이로 인해 검색 필터가 올바르게 작동하지 않습니다.
다음 diff를 적용하여 파라미터 순서를 수정하세요:
return useQuery<ClubSearchResponse, unknown, ClubSearchResponse>({
- queryKey: ['clubs', keyword, recruitmentStatus, division, category],
- queryFn: () => getClubList(keyword, recruitmentStatus, division, category),
+ queryKey: ['clubs', keyword, recruitmentStatus, category, division],
+ queryFn: () => getClubList(keyword, recruitmentStatus, category, division),
placeholderData: keepPreviousData,📝 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.
| return useQuery<ClubSearchResponse, unknown, ClubSearchResponse>({ | |
| queryKey: ['clubs', keyword, recruitmentStatus, division, category], | |
| queryFn: () => getClubList(keyword, recruitmentStatus, division, category), | |
| return useQuery<ClubSearchResponse, unknown, ClubSearchResponse>({ | |
| queryKey: ['clubs', keyword, recruitmentStatus, category, division], | |
| queryFn: () => getClubList(keyword, recruitmentStatus, category, division), |
🤖 Prompt for AI Agents
In frontend/src/hooks/queries/club/useGetCardList.ts around lines 12 to 14, the
call to getClubList passes division and category in the wrong order causing
incorrect search filters; change the argument order so it matches the API
signature getClubList(keyword, recruitmentStatus, category, division) by
swapping the division and category arguments in the function call.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 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 (5)
📓 Common learnings
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')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
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 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Learnt from: Due-IT
Repo: Moadong/moadong PR: 329
File: backend/src/main/java/moadong/club/controller/ClubSearchController.java:0-0
Timestamp: 2025-05-01T08:32:09.398Z
Learning: ClubSearchController의 searchClubsByKeyword 메서드와 ClubSearchService의 searchClubsByKeyword 메서드 사이에 파라미터 순서 일치가 중요하다. 현재 컨트롤러의 매개변수 순서는 'keyword, recruitmentStatus, category, division'인 반면, 서비스 메서드의 순서는 'keyword, recruitmentStatus, division, category'이다. 컨트롤러에서 서비스 호출 시 'keyword, recruitmentStatus, division, category' 순서로 전달하면 category와 division 값이 바뀌어 검색 결과가 잘못될 수 있다.
📚 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: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
📚 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-05-01T08:32:09.398Z
Learnt from: Due-IT
Repo: Moadong/moadong PR: 329
File: backend/src/main/java/moadong/club/controller/ClubSearchController.java:0-0
Timestamp: 2025-05-01T08:32:09.398Z
Learning: ClubSearchController의 searchClubsByKeyword 메서드와 ClubSearchService의 searchClubsByKeyword 메서드 사이에 파라미터 순서 일치가 중요하다. 현재 컨트롤러의 매개변수 순서는 'keyword, recruitmentStatus, category, division'인 반면, 서비스 메서드의 순서는 'keyword, recruitmentStatus, division, category'이다. 컨트롤러에서 서비스 호출 시 'keyword, recruitmentStatus, division, category' 순서로 전달하면 category와 division 값이 바뀌어 검색 결과가 잘못될 수 있다.
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(6-24)
🔇 Additional comments (1)
frontend/src/pages/MainPage/MainPage.tsx (1)
34-38: LGTM!데이터 구조 변경에 따른 기본값 설정과 상태 플래그 로직이 올바르게 구현되었습니다.
| const { data, error, isLoading } = | ||
| useGetCardList(keyword, recruitmentStatus, division, searchCategory); |
There was a problem hiding this comment.
파라미터 순서 오류로 인해 검색 결과가 잘못될 수 있습니다.
useGetCardList 훅의 시그니처는 (keyword, recruitmentStatus, category, division) 순서이지만, 호출 시 (keyword, recruitmentStatus, division, searchCategory) 순서로 전달하고 있습니다. 이로 인해 division과 category 값이 서로 바뀌어 검색 결과가 의도와 다르게 나올 수 있습니다.
다음과 같이 파라미터 순서를 수정하세요:
const { data, error, isLoading } =
- useGetCardList(keyword, recruitmentStatus, division, searchCategory);
+ useGetCardList(keyword, recruitmentStatus, searchCategory, division);🤖 Prompt for AI Agents
In frontend/src/pages/MainPage/MainPage.tsx around lines 31 to 32, the call to
useGetCardList passes parameters in the wrong order (keyword, recruitmentStatus,
division, searchCategory) while the hook expects (keyword, recruitmentStatus,
category, division); swap the third and fourth arguments so the category
(searchCategory) is passed as the third parameter and division as the fourth to
restore correct search behavior.
| <Styled.TotalCountResult role="status"> | ||
| {`전체 ${isLoading ? 0 : totalCount}개의 동아리`} | ||
| </Styled.TotalCountResult> |
There was a problem hiding this comment.
로딩 중 "0개"를 표시하면 사용자에게 혼란을 줄 수 있습니다.
로딩 중일 때 "전체 0개의 동아리"를 표시하는 것은 실제로 결과가 없는 것처럼 보일 수 있습니다. 로딩 중에는 개수를 표시하지 않거나 로딩 인디케이터를 표시하는 것이 더 나은 UX를 제공할 수 있습니다.
다음과 같이 수정하는 것을 고려해보세요:
<Styled.TotalCountResult role="status">
- {`전체 ${isLoading ? 0 : totalCount}개의 동아리`}
+ {isLoading ? '검색 중...' : `전체 ${totalCount}개의 동아리`}
</Styled.TotalCountResult>📝 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.
| <Styled.TotalCountResult role="status"> | |
| {`전체 ${isLoading ? 0 : totalCount}개의 동아리`} | |
| </Styled.TotalCountResult> | |
| <Styled.TotalCountResult role="status"> | |
| {isLoading ? '검색 중...' : `전체 ${totalCount}개의 동아리`} | |
| </Styled.TotalCountResult> |
🤖 Prompt for AI Agents
In frontend/src/pages/MainPage/MainPage.tsx around lines 68 to 70, the component
currently renders "전체 0개의 동아리" while isLoading is true which can mislead users;
change the rendering so that when isLoading is true you either render a loading
indicator/placeholder (e.g., "로딩 중..." or a spinner) or render nothing for the
count, and only show the totalCount once loading completes (isLoading ===
false). Ensure the accessible status element still exists (role="status") and
updates appropriately when the final count is available.
3 participants
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
새 기능
스타일
타입/데이터