Conversation
|
""" Walkthrough이 변경사항은 마이페이지의 이력서 리스트에 무한 스크롤 기능을 도입하고, 스크롤이 적용되지 않는 버그를 수정합니다. API 엔드포인트가 페이지네이션을 지원하도록 확장되었으며, 프론트엔드에서는 새로운 무한 쿼리 훅과 스크롤 감지 훅이 도입되어 이력서 리스트를 페이지 단위로 불러오고, 사용자가 스크롤 하단에 도달하면 다음 페이지를 자동으로 요청합니다. 이와 함께 관련 컴포넌트와 타입 정의가 이에 맞게 리팩토링되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ResumeListComponent
participant useResumeInfiniteQuery
participant API
User->>ResumeListComponent: 페이지 진입/스크롤 하단 도달
ResumeListComponent->>useResumeInfiniteQuery: 다음 페이지 요청
useResumeInfiniteQuery->>API: GET /api/resume?page=X&limit=8&reqType=infinity
API-->>useResumeInfiniteQuery: { resumeList, nextPage }
useResumeInfiniteQuery-->>ResumeListComponent: 데이터 및 nextPage 반환
ResumeListComponent-->>User: 이력서 리스트 추가 렌더링
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
""" 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 1
🧹 Nitpick comments (2)
src/features/resume-list/hooks/use-resume-infinite-query.ts (1)
8-8: 상수의 구성 가능성 고려
ITEM_PER_PAGE가 하드코딩되어 있습니다. 다른 컨텍스트에서 이 값이 변경될 필요가 있다면, 이 값을 매개변수로 받도록 설계하는 것이 더 유연할 수 있습니다.src/app/api/resume/route.ts (1)
33-57: 무한 스크롤 기능 구현 로직 검토페이지네이션 로직이 잘 구현되었습니다. 특히 다음과 같은 측면이 좋습니다:
- 파라미터 유효성 검사
- 데이터베이스 쿼리에 적절한 스킵/테이크 패턴 사용
- 다음 페이지 존재 여부 계산
개선 제안:
- 에러 메시지를 상수로 분리하여 다른 메시지 상수와 함께 관리하는 것이 좋을 것 같습니다.
- 페이지와 리밋에 대한 기본값을 제공하면 클라이언트 측에서 이러한 파라미터를 생략해도 작동할 수 있을 것입니다.
무한 스크롤 로직을 더 견고하게 만들기 위해:
- if (reqType === 'infinity') { + if (reqType === 'infinity') { + // 기본값 설정으로 클라이언트 요청 유연성 향상 + const pageNumber = Number(page || 1); + const limitNumber = Number(limit || 10); - const pageNumber = Number(page); - const limitNumber = Number(limit); if (isNaN(pageNumber) || isNaN(limitNumber)) { - return NextResponse.json({ message: '유효하지 않은 파라미터입니다.' }, { status: 400 }); + return NextResponse.json({ message: GET_INVALID_PARAMETER }, { status: 400 }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/app/api/resume/route.ts(1 hunks)src/constants/resume-constants.ts(1 hunks)src/features/interview/resume-all-modal.tsx(0 hunks)src/features/resume-list/hooks/use-resume-infinite-query.ts(1 hunks)src/features/resume-list/resume-item.tsx(1 hunks)src/features/resume-list/resume-list.tsx(2 hunks)src/features/resume/api/client-services.ts(4 hunks)
💤 Files with no reviewable changes (1)
- src/features/interview/resume-all-modal.tsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/features/resume-list/resume-item.tsx (1)
src/types/DTO/resume-dto.ts (1)
ResumeType(3-3)
src/features/resume-list/hooks/use-resume-infinite-query.ts (3)
src/constants/query-key.ts (1)
QUERY_KEY(1-13)src/constants/resume-constants.ts (1)
RESUME_STATUS(1-4)src/features/resume/api/client-services.ts (1)
getResumeListByInfinite(88-103)
src/features/resume-list/resume-list.tsx (4)
src/constants/my-page-constants.ts (1)
TABS(1-5)src/constants/resume-constants.ts (1)
RESUME_STATUS(1-4)src/features/resume-list/hooks/use-resume-infinite-query.ts (1)
useResumeInfiniteQuery(9-27)src/hooks/customs/use-infinite-scroll.ts (1)
useInfiniteScroll(8-31)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (17)
src/constants/resume-constants.ts (1)
4-4: 타입 안전성 향상을 위한 좋은 변경입니다!
as const를 추가하여 RESUME_STATUS 객체를 읽기 전용으로 만들고 리터럴 타입을 보존함으로써 타입 안전성을 높였습니다. 이는 새로운 무한 쿼리(infiniteQuery) 구현에서 이 상수가 타입 파라미터로 사용될 때 특히 유용합니다.src/features/resume-list/hooks/use-resume-infinite-query.ts (1)
1-27: 무한 스크롤을 위한 훅 구현이 잘 되었습니다!React Query의
useInfiniteQuery를 활용하여 이력서 목록의 무한 스크롤을 구현한 커스텀 훅이 깔끔하게 작성되었습니다. 타입 안전성을 보장하기 위해RESUME_STATUS타입을 적절히 활용한 점이 좋습니다.src/features/resume-list/resume-item.tsx (3)
4-4: 컴포넌트 구조 개선이 잘 되었습니다!
hrOption대신 더 명확한 의미의isLastChild프롭으로 변경한 것은 좋은 결정입니다. 이렇게 하면 컴포넌트의 의도가 더 명확해집니다.Also applies to: 9-9, 12-12
17-17: 스타일링 접근 방식 개선외부
<hr>요소를 사용하는 대신clsx를 활용하여 조건부 테두리 스타일을 적용하는 방식으로 변경한 것은 좋은 개선입니다. 이렇게 하면 DOM 구조가 더 간결해지고 의미론적으로도 더 명확합니다.
24-26: 타이포그래피에 'as' 속성 추가
Typography컴포넌트에as='span'속성을 추가하여 명시적으로 HTML 요소 타입을 지정한 것은 좋은 접근입니다. 이는 의미론적으로 올바른 HTML 구조를 보장합니다.Also applies to: 28-30
src/features/resume-list/resume-list.tsx (5)
4-8: 무한 스크롤 구현을 위한 적절한 의존성 추가필요한 상수, 훅, 유틸리티를 정확히 임포트하고 있습니다.
RESUME_STATUS에서SUBMIT상수를 추출하여 사용하는 것은 타입 안전성을 유지하는 좋은 방법입니다.Also applies to: 12-12
15-19: 무한 스크롤 로직의 효과적인 구현
useResumeInfiniteQuery와useInfiniteScroll훅을 활용하여 무한 스크롤 기능을 효과적으로 구현했습니다. 필요한 상태와 함수를 적절하게 추출하고 있습니다.
35-36: 데이터 처리 로직 개선무한 쿼리 결과에서 모든 페이지의 데이터를
flatMap을 사용하여 단일 배열로 평탄화하는 접근 방식이 적절합니다. 이는 무한 스크롤 구현에서 일반적인 패턴입니다.
38-48: 의미론적 마크업과 스타일링 개선
<ul>요소를 사용하여 의미론적으로 올바른 리스트 구조를 만들고, 스크롤 처리를 위한 CSS 클래스를 적절히 적용했습니다.isLastChild프롭을 적절히 전달하는 것도 좋은 방법입니다.
49-51: 무한 스크롤 로딩 표시기 구현스크롤 감지를 위한 참조 요소와 다음 페이지 로딩 중 상태를 보여주는 표시기가 잘 구현되어 있습니다. 사용자 경험 측면에서 로딩 상태를 표시하는 것은 매우 중요합니다.
src/app/api/resume/route.ts (3)
8-8: sanitizeQueryParams 유틸리티 추가로 코드 품질 향상새로운 유틸리티 함수를 사용하여 쿼리 파라미터를 안전하게 처리하는 방식은 좋은 접근입니다. 이는 입력값 검증 및 타입 변환에 대한 일관된 처리를 보장합니다.
23-31: 쿼리 파라미터 추출 개선userId를 한 번만 추출하여 변수에 저장한 방식과 검색 파라미터를 명확하게 구조화한 접근 방식이 좋습니다. sanitizeQueryParams를 활용하여 모든 파라미터를 한 번에 처리하는 것은 코드 가독성과 유지보수성을 향상시킵니다.
59-67: 기존 쿼리 로직 변경 검토userId 변수를 추출하여 재사용하는 방식으로 변경한 것은 좋은 리팩토링입니다. 이는 코드 중복을 줄이고 일관성을 향상시킵니다.
src/features/resume/api/client-services.ts (4)
5-5: 타입 임포트 변경Prisma의
Resume타입 대신 DTO 모듈에서ResumeType을 사용하는 것으로 변경한 것은 좋은 접근입니다. 이는 데이터 전송 객체를 명확하게 정의하고 사용함으로써 API 계약을 더 명확하게 합니다.
17-17: 타입 참조 업데이트
Resume['id']에서ResumeType['id']로 변경된 것은 일관성 있고 적절한 변경입니다.
67-67: 반환 타입 업데이트
getResumeList함수의 반환 타입을ResumeType[]으로 변경한 것은 앞서 변경된 타입 임포트와 일관성이 있습니다.
109-109: 반환 타입 업데이트
getResume함수의 반환 타입을ResumeType으로 변경한 것은 적절하고 일관성 있는 변경입니다.
- 다른 곳도 infiniteQuery를 적용하려다가 엮여 있는 것이 많아서 시간을 가지고 리팩토링 필요할 듯
hye410
force-pushed
the
Bugfix/#256-resume-list-bug
branch
from
97f374d to
46a9370
Compare
ImJaeOne
left a comment
ImJaeOne
left a comment
There was a problem hiding this comment.
ㅜㅜ후반에 고생이 너무 많으십니다 감사합니다~!!!
4 participants
💡 관련이슈
🍀 작업 요약
💬 리뷰 요구 사항
💛 미리보기
✔️ 이슈 닫기
Closes #256
Ref #이슈번호 // 해당 이슈에 대한 작업이 완전히 끝나지 않은 경우
Summary by CodeRabbit
신규 기능
버그 수정
리팩터
기타