Feat: #147 수행자 검색 API 변경으로 인한 수행자 검색 기능 수정 #152
Conversation
Walkthrough이번 변경 사항은 사용자 검색 및 역할 정보를 처리하는 컴포넌트와 훅을 업데이트하여, Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 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: 4
Outside diff range and nitpick comments (10)
src/hooks/useProjectContext.tsx (2)
5-5:ProjectContext타입이 올바르게 업데이트되었습니다.
ProjectContext타입에projectUserRoleList: UserWithRole[]가 추가된 것은 PR의 목표와 일치하며, 이슈 #147에서 언급된 역할 정보를 별도로 매칭해야 하는 요구사항을 충족시킵니다. 이 변경으로 인해 이 컨텍스트를 사용하는 컴포넌트들이 프로젝트 사용자 역할 목록에 접근할 수 있게 되었습니다.타입에 대한 간단한 JSDoc 주석을 추가하여 문서화를 개선하는 것이 좋겠습니다. 다음과 같이 변경해 보세요:
+/** + * 프로젝트 컨텍스트 타입 + * @property {Project} project - 프로젝트 정보 + * @property {UserWithRole[]} projectUserRoleList - 프로젝트 사용자 역할 목록 + */ export type ProjectContext = { project: Project; projectUserRoleList: UserWithRole[] };
useProjectContext를 사용하는 파일들에projectUserRoleList가 적용되지 않았습니다.아래 파일들은
useProjectContext를 사용하지만projectUserRoleList를 사용하고 있지 않습니다. 이로 인해 해당 파일들이 새로운 컨텍스트 변경 사항을 반영하지 못할 수 있습니다. 따라서 이들 파일을 검토하고 필요한 경우projectUserRoleList를 반영하도록 업데이트해야 합니다.
- src/layouts/page/ProjectLayout.tsx
- src/pages/project/KanbanPage.tsx
- src/pages/project/CalendarPage.tsx
- src/hooks/useProjectContext.tsx
- src/components/task/kanban/TaskItem.tsx
- src/components/task/kanban/ProjectStatusContainer.tsx
- src/components/task/calendar/CustomDateHeader.tsx
Analysis chain
Line range hint
1-10: 전반적으로 변경 사항이 PR 목표와 일치합니다.이 파일의 변경 사항은 PR의 목표와 연결된 이슈 #147의 요구사항을 잘 반영하고 있습니다.
ProjectContext타입에projectUserRoleList를 추가함으로써 프로젝트 팀 멤버 정보를 포함할 수 있게 되었습니다. 이는 수행자 검색 기능 수정에 필요한 중요한 단계입니다.변경 사항에 대한 주요 이슈는 발견되지 않았으며, 단지 문서화 개선을 위한 작은 제안만 있었습니다. 이 변경으로 인해 프로젝트 컨텍스트를 사용하는 다른 컴포넌트들이 영향을 받을 수 있으므로, 관련 컴포넌트들을 검토하고 필요한 경우 업데이트하는 것이 좋겠습니다.
다음 스크립트를 실행하여
useProjectContext를 사용하는 다른 파일들을 확인해보세요:
이전 스크립트에서
rg명령어가typescript파일 형식을 인식하지 못했습니다. 올바른 파일 형식인ts와tsx를 사용하여 스크립트를 수정하겠습니다.
이전 스크립트에서도
rg명령어가ts와tsx파일 형식을 인식하지 못했습니다. 파일 확장자를 직접 패턴에 포함하여 검색하도록 스크립트를 수정하겠습니다.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find files using useProjectContext and check if they need updates # Search for files using useProjectContext echo "Files using useProjectContext:" rg --type typescript --type tsx "useProjectContext" -l # Check if these files are using projectUserRoleList echo "\nChecking usage of projectUserRoleList:" rg --type typescript --type tsx "useProjectContext.*projectUserRoleList" -l echo "\nFiles using useProjectContext but not projectUserRoleList might need updates."Length of output: 533
Script:
#!/bin/bash # Description: Find files using useProjectContext and check if they need updates # Search for files using useProjectContext echo "Files using useProjectContext:" rg --type ts --type tsx "useProjectContext" -l # Check if these files are using projectUserRoleList echo "\nChecking usage of projectUserRoleList:" rg --type ts --type tsx "useProjectContext.*projectUserRoleList" -l echo "\nFiles using useProjectContext but not projectUserRoleList might need updates."Length of output: 503
Script:
#!/bin/bash # Description: Find .ts and .tsx files using useProjectContext and check if they need updates # Search for files using useProjectContext in .ts and .tsx files echo "Files using useProjectContext:" rg "useProjectContext" --glob "*.ts" --glob "*.tsx" -l # Check if these files are using projectUserRoleList echo "\nChecking usage of projectUserRoleList:" rg "useProjectContext.*projectUserRoleList" --glob "*.ts" --glob "*.tsx" -l echo "\nFiles using useProjectContext but not projectUserRoleList might need updates."Length of output: 742
src/hooks/query/useProjectQuery.ts (2)
8-9: 좋습니다: 함수 내보내기 방식 변경 및 주석 추가함수를 기본 내보내기에서 명명된 내보내기로 변경한 것은 좋은 실천입니다. 모듈 구성을 개선하고 가져오기를 더 쉽게 만듭니다. 또한, 함수의 목적을 설명하는 주석을 추가한 것도 좋습니다.
주석의 가독성을 더욱 높이기 위해 다음과 같이 수정하는 것은 어떨까요?
-// 팀에 속한 프로젝트 목록 조회 +/** + * 팀에 속한 프로젝트 목록을 조회합니다. + * @param teamId 팀 ID + * @returns 프로젝트 목록 및 관련 상태 + */
26-42: 잘 작성되었습니다: 새로운 useReadProjectUserRoleList 함수새로 추가된
useReadProjectUserRoleList함수가 잘 구현되었습니다. 기존의useReadProjects함수와 일관된 패턴을 따르고 있어 코드의 일관성이 유지되었습니다. 쿼리 키 구조화, 에러 처리 등이 적절히 이루어졌습니다.일관성을 더욱 높이기 위해,
useReadProjects함수와 마찬가지로 반환값에 대한 주석을 추가하는 것이 어떨까요? 예를 들면:/** * 프로젝트 팀원 목록을 조회합니다. * @param projectId 프로젝트 ID * @returns {Object} 프로젝트 사용자 역할 목록 및 관련 상태 * @returns {Array} projectUserRoleList - 프로젝트 사용자 역할 목록 * @returns {boolean} isProjectUserRoleLoading - 로딩 상태 * @returns {boolean} isErrorProjectUserRole - 에러 발생 여부 * @returns {Error|null} projectUserRoleError - 에러 객체 */src/services/projectService.ts (2)
16-23: findUserByProject 함수 변경 승인 및 문서화 제안
findUserByProject함수의 반환 타입 변경은 API 응답 구조의 변경을 정확히 반영하고 있어 적절합니다.함수 설명 주석을 다음과 같이 업데이트하는 것이 좋겠습니다:
/** * 프로젝트에 속한 유저 목록을 검색하는 API * * @export * @async * @param {Project['projectId']} projectId - 프로젝트 ID * @param {User['nickname']} nickname - 유저 닉네임 * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체 - * @returns {Promise<AxiosResponse<SearchUser[]>>} + * @returns {Promise<AxiosResponse<SearchUser[]>>} - 사용자 ID와 닉네임만 포함된 검색 결과 */이렇게 하면 함수의 반환 값에 대한 이해가 더 명확해질 것입니다.
39-50: getProjectUserRoleList 함수 추가 승인 및 개선 제안새로 추가된
getProjectUserRoleList함수는 프로젝트 팀원 목록 조회 API를 구현하여 PR의 목표를 잘 달성하고 있습니다. 함수의 구조와 문서화도 파일의 다른 함수들과 일관성 있게 작성되었습니다.다음과 같이 함수 설명을 조금 더 구체화하면 좋겠습니다:
/** - * 프로젝트 팀원 목록 조회 API + * 프로젝트 팀원 목록과 각 팀원의 역할을 조회하는 API * * @export * @async * @param {Project['projectId']} projectId - 프로젝트 ID * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체 - * @returns {Promise<AxiosResponse<UserWithRole[]>>} + * @returns {Promise<AxiosResponse<UserWithRole[]>>} - 사용자 정보와 역할이 포함된 프로젝트 팀원 목록 */이렇게 하면 함수의 목적과 반환 값에 대한 이해가 더 명확해질 것입니다.
src/components/common/SearchUserInput.tsx (1)
9-9: props 타입 변경 승인 및 개선 제안
userListprops의 타입을SearchUser[]로 변경한 것은 적절합니다. 이는 새로운 API 응답 구조와 일치합니다.가독성을 위해
SearchUser타입에 대한 간단한 주석을 추가하는 것이 좋을 것 같습니다. 예를 들어:userList: SearchUser[]; // SearchUser: { userId: string; nickname: string }src/layouts/page/ProjectLayout.tsx (1)
16-16: 새로운 훅 사용 승인 및 개선 제안
useReadProjectUserRoleList훅의 사용이 적절합니다. 프로젝트 ID를 올바르게 전달하고 있으며, 필요한 데이터와 로딩 상태를 구조 분해 할당으로 가져오고 있습니다.작은 개선사항으로, 일관성을 위해
isProjectLoading과 유사하게isLoading으로 이름을 변경하는 것을 고려해보세요:-const { projectUserRoleList, isProjectUserRoleLoading } = useReadProjectUserRoleList(Number(projectId)); +const { projectUserRoleList, isLoading: isProjectUserRoleLoading } = useReadProjectUserRoleList(Number(projectId));src/components/modal/task/ModalTaskForm.tsx (2)
Line range hint
32-32: React Query 오류 처리 추가를 도와드릴까요?'React Query Error시 처리 추가할 것'이라는 TODO 주석이 있습니다. React Query 사용 시 발생할 수 있는 에러 처리를 구현하여 사용자에게 적절한 피드백을 제공하면 좋을 것 같습니다.
이 부분에 대한 구현을 도와드릴까요? 새로운 GitHub 이슈를 생성하여 작업을 추적할 수 있습니다.
51-51: 상태 수정 모달의 기본값 설정 방식을 개선해보세요'상태 수정 모달 작성시 기본값 설정 방식 변경할 것'이라는 TODO 주석이 있습니다. 모달의 기본값 설정 방식을 변경하여 사용자 경험을 향상시킬 수 있습니다.
이 작업에 대한 아이디어가 있으시면 공유해 주시고, 필요하시면 도움을 제공해드릴 수 있습니다.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (9)
- src/components/common/AssigneeList.tsx (1 hunks)
- src/components/common/SearchUserInput.tsx (1 hunks)
- src/components/modal/task/ModalTaskForm.tsx (5 hunks)
- src/hooks/query/useProjectQuery.ts (2 hunks)
- src/hooks/useProjectContext.tsx (1 hunks)
- src/layouts/page/ProjectLayout.tsx (4 hunks)
- src/mocks/services/projectServiceHandler.ts (3 hunks)
- src/services/projectService.ts (2 hunks)
- src/types/UserType.tsx (1 hunks)
Additional comments not posted (16)
src/hooks/useProjectContext.tsx (1)
3-3: 새로운 import 문이 올바르게 추가되었습니다.
UserWithRole타입의 import가 정확하게 추가되었으며, 이는 업데이트된ProjectContext타입에 필요합니다. import 문법과 명명 규칙이 올바르게 사용되었습니다.src/components/common/AssigneeList.tsx (2)
3-3: LGTM: SearchUser 타입 가져오기 추가
SearchUser타입을 가져오는 것은 PR 목표와 일치하며 수행자 검색 기능의 변경을 반영합니다.
7-7: onAssigneeDeleteClick의 매개변수 타입 변경 확인 필요
onAssigneeDeleteClick의 매개변수 타입을UserWithRole에서SearchUser로 변경한 것은 API 변경을 반영하는 것으로 보입니다. 그러나 다음 사항들을 확인해 주시기 바랍니다:
assigneeListprop은 여전히UserWithRole[]타입을 사용하고 있습니다. 이로 인해 타입 불일치가 발생할 수 있습니다.- 컴포넌트는 여전히
user.roleName을 사용하여 렌더링하고 있습니다.SearchUser타입에roleName이 포함되어 있는지 확인해 주세요.다음 스크립트를 실행하여
SearchUser타입 정의를 확인해 주세요:또한,
UserWithRole과SearchUser타입의 차이점을 명확히 하고, 필요한 경우 컴포넌트 로직을 조정해 주시기 바랍니다.src/types/UserType.tsx (2)
14-14: 새로운 SearchUser 타입이 적절히 정의되었습니다.이 타입 정의는 API 변경 사항을 정확히 반영하고 있습니다.
User타입에서userId와nickname만을 선택함으로써, 수정된 API 응답 구조와 일치하게 되었습니다.Pick유틸리티 타입의 사용은 TypeScript의 모범 사례를 따르고 있어 좋습니다.
15-15: UserWithRole 타입이 PR 목표에 맞게 잘 수정되었습니다.이 타입 정의는
SearchUser와Role의roleName을 결합하여 PR의 목표를 정확히 반영하고 있습니다. 인터섹션 타입(&)과Pick의 사용은 이 시나리오에 적합합니다. 이 변경으로 인해 사용자 정보와 역할 정보를 별도로 매칭할 수 있게 되어, 링크된 이슈에서 언급된 요구사항을 충족시킵니다.src/hooks/query/useProjectQuery.ts (2)
2-2: LGTM: 새로운 import가 올바르게 추가되었습니다.
getProjectUserRoleList함수의 import가 적절하게 추가되었습니다. 이는 새로 추가된useReadProjectUserRoleList함수에 필요한 것으로 보입니다.
Line range hint
1-42: 전반적인 변경 사항이 PR 목표와 잘 부합합니다.이 파일의 변경 사항들은 PR의 목표인 "수행자 검색 기능 수정"에 잘 부합합니다. 특히:
- 새로운
useReadProjectUserRoleList함수를 통해 프로젝트 팀원 목록을 조회하는 기능이 추가되었습니다.- 기존
useReadProjects함수의 내보내기 방식이 개선되었습니다.- 코드 구조와 패턴이 일관성 있게 유지되었습니다.
이러한 변경 사항들은 #147 이슈에서 언급된 "프로젝트 멤버 목록 API 추가" 요구사항을 잘 충족시키고 있습니다.
src/services/projectService.ts (3)
6-6: 타입 임포트 추가 승인새로운
SearchUser와UserWithRole타입의 추가는 수정된 API 응답 구조와 일치하며, PR의 목표를 잘 반영하고 있습니다.
31-32: getProjectList 함수 문서화 개선 승인
getProjectList함수의 문서화 개선은 함수 파라미터에 대한 설명을 더 명확하게 만들어 가독성을 향상시켰습니다.
Line range hint
1-50: 전체 변경사항 요약 및 PR 목표 달성 평가이 파일의 변경사항들은 PR의 목표인 "수행자 검색 API 변경으로 인한 수행자 검색 기능 수정"을 잘 반영하고 있습니다:
findUserByProject함수의 반환 타입이SearchUser[]로 변경되어 API 응답 구조의 변화를 반영했습니다.- 새로운
getProjectUserRoleList함수가 추가되어 프로젝트 팀원의 역할 정보를 별도로 조회할 수 있게 되었습니다.이러한 변경사항들은 API 변경에 따른 기능 수정을 적절히 구현하고 있으며, 코드의 일관성과 가독성도 유지하고 있습니다. 제안된 문서화 개선사항들을 반영하면 코드의 품질이 더욱 향상될 것입니다.
src/components/common/SearchUserInput.tsx (3)
2-2: 타입 가져오기 추가 승인
SearchUser타입을 가져오는 것은 수행자 검색 기능 변경에 필요한 적절한 수정입니다.
Line range hint
1-70: 전체 변경 사항 요약 및 추가 확인 사항
SearchUserInput컴포넌트의 변경 사항이 PR 목표와 일치하며 적절하게 구현되었습니다. 주요 변경 사항은 다음과 같습니다:
SearchUser타입 도입userList및onUserClickprops 타입 업데이트다음 사항들을 추가로 확인해 주세요:
- 관련된 다른 컴포넌트들이 이 변경 사항과 일관성 있게 업데이트되었는지 확인
- 단위 테스트 및 통합 테스트가 새로운 타입과 동작을 반영하여 업데이트되었는지 확인
- 프로젝트의 타입 정의 파일(
@/types/UserType.ts)이SearchUser타입을 올바르게 정의하고 있는지 확인다음 스크립트를 실행하여 관련 파일들을 확인할 수 있습니다:
#!/bin/bash # 관련 파일 확인 echo "SearchUser 타입 정의 확인:" rg --type typescript "type SearchUser" -A 5 echo "\n테스트 파일 확인:" rg --type typescript "SearchUserInput" -g "*test*" -A 10 -B 2 echo "\n타입 사용 확인:" rg --type typescript "SearchUser" -g '!src/components/common/SearchUserInput.tsx' -A 5 -B 2
13-13: 콜백 함수 타입 변경 승인 및 확인 요청
onUserClickprops의 타입을(user: SearchUser) => void로 변경한 것은 적절합니다. 이는 새로운 사용자 데이터 구조와 일치합니다.부모 컴포넌트에서 이 콜백 함수의 사용을 확인해 주세요. 필요한 경우 부모 컴포넌트도 업데이트해야 합니다.
다음 스크립트를 실행하여
SearchUserInput컴포넌트의 사용을 확인할 수 있습니다:Verification successful
rg가 'typescript' 파일 유형을 인식하지 못했습니다. 파일 확장자를 사용하여 다시 시도해 주세요.
다음 스크립트를 실행하여
SearchUserInput컴포넌트의 사용을 확인할 수 있습니다:
rg가 'ts'와 'tsx' 파일 유형을 인식하지 못했습니다. 대신 파일 확장자를 직접 지정하여 검색을 시도해 주세요.
다음 스크립트를 실행하여
SearchUserInput컴포넌트의 사용을 확인할 수 있습니다:
rg명령어가 여전히 'ts'와 'tsx' 파일 유형을 인식하지 못하고 있습니다. 대신grep을 사용하여 검색을 시도해 주세요.다음 스크립트를 실행하여
SearchUserInput컴포넌트의 사용을 확인할 수 있습니다:
onUserClick 콜백 타입 변경 확인 완료
onUserClickprops의 타입 변경이 올바르게 반영되었습니다. 부모 컴포넌트인ModalTaskForm.tsx에서도 정상적으로 사용되고 있습니다.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # SearchUserInput 컴포넌트의 사용을 확인합니다. echo "SearchUserInput 컴포넌트 사용 확인:" rg --type typescript -g '!src/components/common/SearchUserInput.tsx' "SearchUserInput" -A 10 -B 2Length of output: 423
Script:
#!/bin/bash # SearchUserInput 컴포넌트의 사용을 확인합니다. echo "SearchUserInput 컴포넌트 사용 확인:" rg --type ts --type tsx "SearchUserInput" -A 10 -B 2Length of output: 145
Script:
#!/bin/bash # SearchUserInput 컴포넌트의 사용을 확인합니다. echo "SearchUserInput 컴포넌트 사용 확인:" rg "SearchUserInput" -g "*.ts" -g "*.tsx" -g '!src/components/common/SearchUserInput.tsx' -A 10 -B 2Length of output: 2480
Script:
#!/bin/bash # SearchUserInput 컴포넌트의 사용을 확인합니다. echo "SearchUserInput 컴포넌트 사용 확인:" grep -r "SearchUserInput" --include="*.ts" --include="*.tsx" . -A 10 -B 2Length of output: 3342
src/layouts/page/ProjectLayout.tsx (3)
5-6: 새로운 훅 import 추가 승인새로운
useReadProjectUserRoleList훅의 import가 적절히 추가되었습니다. 이는 PR의 목표인 프로젝트 팀 멤버 목록 처리를 위한 것으로 보입니다.
25-25: 로딩 조건 업데이트 승인
isProjectUserRoleLoading을 로딩 조건에 추가한 것은 적절합니다. 이를 통해 프로젝트 사용자 역할 정보가 로딩되는 동안에도 스피너가 표시되어 사용자 경험이 향상됩니다.
Line range hint
1-78: 전체 변경사항 요약 및 PR 목표 달성 확인이 PR의 변경사항들은 수행자 검색 API 변경에 따른 요구사항을 잘 반영하고 있습니다:
- 새로운
useReadProjectUserRoleList훅을 통해 프로젝트 팀 멤버 목록을 가져오는 기능이 추가되었습니다.- 로딩 상태 처리가 개선되어 사용자 경험이 향상되었습니다.
- 프로젝트 사용자 역할 정보가 자식 컴포넌트에서 사용할 수 있도록 컨텍스트에 추가되었습니다.
이러한 변경사항들은 코드의 타입 안정성을 유지하면서 PR의 목표를 성공적으로 달성하고 있습니다. 제안된 작은 개선사항들을 고려해보시면 좋겠습니다.
…GU-99/grow-up-fe into feature/#147-modify-search-user
|
@Yoonyesol @ice-bear98 리뷰 감사합니다😆 |
PR Type
What kind of change does this PR introduce?
Related Issues
What does this PR do?