Feat: #134 일정 수행자 조회 기능 추가

[Seok93]

PR Type

What kind of change does this PR introduce?

• [Feat] 새로운 기능을 추가했어요.
• [Chore] 빌드 프로세스 변경, 의존성 패키지 업데이트 했어요.

Related Issues

• close 일정 수행자 목록 조회 API를 이용하여 일정 수행자 상세 표시 기능 구현 #134

What does this PR do?

• Task 타입 수정
• 일정 Mock 데이터 수정
• 일정 생성 API MSW 처리 수정
• 일정 수행자 목록 API React Quert 처리 추가
• 일정 수행자 목록 API MSW 처리 추가
• 일정 상세 정보 모달에서 수행자 목록 조회 기능 구현

View

[coderabbitai]

Walkthrough

이 변경 사항은 DetailModalTask 컴포넌트를 새롭게 추가하고, 사용자 할당 처리 방식을 개선하며, 태스크와 사용자 간의 관계를 명확히 하기 위해 데이터 구조를 수정하는 내용을 포함합니다. 또한, 태스크 수행자 목록을 조회하는 API와 관련된 새로운 기능이 도입되어 태스크 관리의 효율성을 높입니다.

Changes

파일 경로	변경 요약
src/components/modal/task/DetailModalTask.tsx	DetailModalTask 컴포넌트를 추가하여 태스크의 세부 정보를 모달로 표시.
src/components/modal/task/ModalTaskForm.tsx	userId를 assignees로 변경하여 사용자 할당 처리 방식을 개선.
src/hooks/query/useTaskQuery.ts	useReadAssignees 함수를 추가하여 특정 태스크의 수행자 목록을 조회.
src/mocks/mockData.ts	TaskUser 타입 정의 및 TASK_USER_DUMMY 추가, TASK_DUMMY에서 userId 속성 제거.
src/mocks/services/taskServiceHandler.ts	태스크 생성 시 assignees 배열을 처리하도록 로직 수정 및 수행자 목록 조회 API 추가.
src/services/taskService.ts	findAssignees 비동기 함수 추가하여 특정 태스크의 수행자 목록을 조회.
src/types/AssigneeType.tsx	Assignee 타입 정의 추가.
src/types/TaskType.tsx	Task 타입에서 userId 속성 제거 및 TaskForm에 assignees 속성 추가.

Assessment against linked issues

Objective	Addressed	Explanation
일정 수행자 목록 조회 API를 이용하여 수행자 상세 표시 ( #134 )	✅

Possibly related PRs

• UI: #127 일정 등록 입력 양식들을 컴포넌트로 분리 #131: ModalTaskForm.tsx의 사용자 할당 처리 방식 개선이 DetailModalTask 컴포넌트의 업데이트와 관련이 있습니다.
• UI: #127 일정 등록 입력 양식중 수행자 검색, 선택 목록 컴포넌트 분리 #132: 이 PR에서 도입된 AssigneeList 컴포넌트는 DetailModalTask 컴포넌트의 기능과 관련이 있습니다.

Suggested labels

🎨 UI

Suggested reviewers

• Yoonyesol
• ice-bear98
• Seok93

🐇 변화의 순간, 모달이 열려
태스크의 세부 정보, 이제는 더 명확해!
수행자 목록도 손쉽게 조회,
모두 함께 즐겨요, 이 멋진 변화!
🥕✨

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between fae8a00 and 93a5623.

Files selected for processing (8)

• src/components/modal/task/DetailModalTask.tsx (1 hunks)
• src/components/modal/task/ModalTaskForm.tsx (3 hunks)
• src/hooks/query/useTaskQuery.ts (5 hunks)
• src/mocks/mockData.ts (2 hunks)
• src/mocks/services/taskServiceHandler.ts (3 hunks)
• src/services/taskService.ts (2 hunks)
• src/types/AssigneeType.tsx (1 hunks)
• src/types/TaskType.tsx (2 hunks)

Files skipped from review due to trivial changes (1)

• src/components/modal/task/ModalTaskForm.tsx

Additional comments not posted (16)

src/types/AssigneeType.tsx (1)

1-8: 변경 사항이 좋아 보입니다!

Assignee 타입 정의가 명확하고 간결합니다. User와 Role 타입에서 속성을 가져오는 것은 타입 안전성을 향상시키고 코드베이스에서 assignee 관련 데이터를 다룰 때 일관성을 유지하는 데 도움이 됩니다.

이 타입의 도입은 애플리케이션의 전반적인 타입 정의를 향상시키고, 사용자 할당 및 역할을 처리할 때 잠재적인 오류를 줄이는 데 기여할 것입니다.

src/types/TaskType.tsx (2)

1-1: 새로운 Assignee 타입 import가 적절해 보입니다.

Assignee 타입을 @/types/AssigneeType 모듈에서 가져오는 것은 이 파일에서 해당 타입을 사용할 것임을 시사합니다. 이는 적절한 변경사항으로 보입니다.

---

26-26: TaskForm 타입에 assignees 속성을 추가하는 것은 좋은 변경사항입니다.

TaskForm 타입에 Assignee 타입의 userId 값 배열인 assignees 속성을 포함하도록 수정하는 것은 다음과 같은 이점이 있습니다:

• 작업 할당을 처리하는 데 더 구조화된 접근 방식을 제공합니다.
• Assignee 타입과의 통합을 향상시킵니다.
• 작업 소유권의 명확성을 높입니다.

이는 전반적으로 코드의 가독성과 유지 관리성을 향상시키는 좋은 변경사항으로 보입니다.

src/services/taskService.ts (1)

51-68: 잘 구현되었습니다!

findAssignees 함수는 프로젝트 내의 특정 작업에 대한 담당자 목록을 검색하는 기능을 잘 구현하고 있습니다. 함수 시그니처와 매개변수는 TypeScript 규칙을 잘 따르고 있으며, authAxios 인스턴스를 사용하여 인증 및 권한 부여를 처리하고 있습니다. API 엔드포인트는 RESTful 패턴을 따르며, projectId와 taskId를 사용하여 특정 리소스를 식별합니다. 또한 프로미스를 반환하여 비동기적으로 API 응답을 처리할 수 있도록 하였습니다. 반환 타입이 명시적으로 정의되어 있어 타입 안전성과 코드의 명확성을 높여줍니다.

이 함수는 태스크 서비스의 기능을 확장하여 태스크 담당자 정보를 검색할 수 있도록 해주며, 프로젝트 내에서 태스크 관리 기능을 향상시켜 줍니다. TypeScript 타입의 사용으로 코드 가독성과 유지보수성이 향상됩니다.

src/hooks/query/useTaskQuery.ts (4)

Line range hint 19-35: 변경사항 없음

이 함수에는 변경사항이 없으므로 리뷰를 건너뜁니다.

---

Line range hint 36-55: 변경사항 없음

이 함수에는 변경사항이 없으므로 리뷰를 건너뜁니다.

---

Line range hint 56-87: 변경사항 없음

이 함수에는 변경사항이 없으므로 리뷰를 건너뜁니다.

---

89-105: 새로운 함수 추가 승인

useReadAssignees 함수는 특정 일정의 수행자 목록을 조회하는 기능을 제공합니다. React Query를 사용하여 데이터를 비동기적으로 가져오고, 로딩 및 에러 상태도 함께 반환합니다. 이 함수의 추가로 일정 관리 기능이 향상되었습니다.

코드 로직과 구문에 문제가 없으며, 함수의 추가를 승인합니다.

src/mocks/services/taskServiceHandler.ts (4)

33-33: 잘 작성된 코드입니다!

assignees 필드를 분리하여 TaskForm에서 추출하는 것은 작업에 여러 담당자를 연결하는 새로운 기능과 관련이 있는 것 같습니다. 구조 분해 할당 문법도 올바르게 사용되었습니다.

---

43-45: 잘 작성된 코드입니다!

새로운 taskId를 생성하고, assignees 배열을 순회하면서 각 userId를 TASK_USER_DUMMY 배열에 추가하는 로직이 올바르게 구현되었습니다. 이를 통해 작업과 할당된 사용자 간의 관계가 설정됩니다. 루프 문법과 push 연산에도 문제가 없어 보입니다.

---

72-103: 잘 작성된 코드입니다!

특정 작업과 연결된 담당자 목록을 조회하는 새로운 API 엔드포인트가 잘 구현되었습니다. 엔드포인트는 다음과 같은 단계를 따르고 있습니다:

1. accessToken을 사용하여 인증 확인
2. taskId를 기반으로 TASK_USER_DUMMY에서 관련 작업 사용자 데이터 조회
3. 작업 사용자가 없는 경우 404 응답 반환
4. 작업 사용자를 순회하면서 assigneeList 구성
5. 각 작업 사용자에 대해 userHash에서 사용자 상세 정보, PROJECT_USER_DUMMY에서 프로젝트 사용자 상세 정보 조회
6. 프로젝트 사용자가 없는 경우 403 응답 반환
7. roleHash에서 역할 상세 정보 조회 및 assignee 객체 구성
8. assigneeList를 JSON 응답으로 반환

전반적으로 엔드포인트 로직이 잘 구조화되어 있으며, 필요한 단계를 따르고 있습니다. accessToken을 사용한 인증 확인은 좋은 보안 관행이며, 누락된 작업 사용자(404)와 무단 프로젝트 사용자(403)에 대한 오류 처리도 적절합니다. getUserHash와 getRoleHash와 같은 헬퍼 함수를 사용하여 코드 가독성을 향상시켰습니다. 사용자 및 역할 상세 정보가 포함된 assignee 객체를 구성하여 포괄적인 정보를 제공합니다.

---

2-5: 잘 작성된 코드입니다!

작업 담당자와 관련된 새로운 기능을 지원하기 위해 필요한 더미 데이터와 해시 함수를 추가로 가져왔습니다. TASK_USER_DUMMY는 작업과 사용자 간의 관계를 저장하는 데 사용되는 것 같습니다. getRoleHash와 getUserHash는 역할과 사용자 상세 정보를 조회하는 헬퍼 함수입니다. Assignee 타입은 담당자 객체의 구조를 정의하는 데 사용됩니다. import 문에는 문제가 없어 보입니다.

src/components/modal/task/DetailModalTask.tsx (1)

1-109: 잘 구현되었습니다!

이 컴포넌트는 모달에서 작업의 상세 보기를 렌더링하는 데 필요한 모든 요소를 잘 갖추고 있습니다. React Query와 MSW를 활용하여 작업 상태와 담당자 데이터를 효과적으로 가져오고 관리합니다. 컴포넌트의 레이아웃은 잘 구조화되어 있어 작업 세부 정보를 명확하게 표시합니다. TypeScript를 사용하여 적절하게 타입이 지정되었으며 코드는 읽기 쉽고 모범 사례를 따릅니다.

전반적으로 이 컴포넌트는 작업 세부 정보를 표시하는 데 필요한 모든 기능을 제공하며 코드 품질이 우수합니다. 잘 작성된 코드입니다!

src/mocks/mockData.ts (3)

23-26: 좋아 보입니다!

TaskUser 타입은 task와 user 간의 관계를 명확하고 간결하게 모델링하는 좋은 방법입니다.

---

564-597: 잘 되었네요!

TASK_USER_DUMMY 상수는 TaskUser 타입의 구조를 따르는 다양한 task-user 관계에 대한 샘플 데이터를 제공합니다. 개발 및 테스트 목적으로 좋은 테스트 데이터 세트가 될 것 같아요.

---

598-598: 좋은 습관이에요!

파일 끝에 빈 줄을 추가하는 것은 좋은 습관입니다. 가독성을 향상시키고 일부 도구에서 발생할 수 있는 잠재적인 문제를 방지해줍니다.

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai generate interesting stats about this repository and render them as a table.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[Yoonyesol]

수행자 조회 작업 고생 많으셨습니다! DetailModalTask의 로딩 시 스피너 추가되는 부분 참고해서 저도 다음 작업하는 데 사용해야겠어요!😆

[Seok93]

@Yoonyesol 리뷰 감사합니다😆

[ice-bear98]

조회 기능작업 고생하셨습니다! DetailModalTask.tsx파일이 필요했는데 이번 pr에 올라왔군요 ㅎㅎ

[Seok93]

@ice-bear98 리뷰 감사합니다👍