[Feature/#118] 멤버 권한 변경 및 삭제 API 연동 - #138
Merged
Merged
Conversation
📝 WalkthroughWalkthroughAPI 계층에 멤버 권한 변경 및 삭제 엔드포인트 함수를 추가하고, MemberManagement 페이지에서 React Query 뮤테이션으로 이를 연동하여 서버 상태 업데이트와 캐시 무효화를 처리합니다. Changes
Sequence DiagramsequenceDiagram
actor User as 관리자 사용자
participant UI as MemberManagement
participant Mutation as React Query<br/>Mutation
participant API as API Client
participant Server as 서버
participant Cache as Query Cache
User->>UI: 권한 변경/삭제 요청
UI->>Mutation: mutateAsync 호출
Mutation->>API: updateWorkspaceMemberPermission<br/>또는 deleteWorkspaceMember
API->>Server: PATCH/DELETE 요청
Server->>Server: 멤버 권한 변경/삭제 처리
Server-->>API: 성공 응답
API-->>Mutation: 응답 데이터 반환
Mutation->>Cache: invalidateQueries<br/>['workspaceMembers', orgId]
Cache-->>UI: 쿼리 자동 재실행
Mutation->>UI: onSuccess 콜백<br/>(토스트 표시)
UI-->>User: UI 업데이트 완료
Note over Mutation: 에러 발생 시<br/>onError → 토스트 표시
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 분 Possibly related PRs
Suggested reviewers
추가 리뷰 포인트상태 관리 및 로딩 처리
에러 처리 전략
캐시 무효화 범위
타입 안전성
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
📚 Storybook 배포 완료
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/pages/workspace/MemberManagement.tsx (2)
238-247: 동일하게useCallback적용을 권장합니다.
handleDeleteMember도DeleteMemberModal에 전달되므로,useCallback으로 감싸서 메모이제이션하는 것이 좋습니다.♻️ useCallback 적용 예시
- const handleDeleteMember = async (member: TWorkspaceMember) => { + const handleDeleteMember = useCallback(async (member: TWorkspaceMember) => { try { await deleteMemberMutation.mutateAsync(member.memberId); toast.success(`${member.name}님이 삭제되었습니다`); setIsDeleteModalOpen(false); setSelectedDeleteMember(null); } catch (error) { console.error("팀원 삭제 실패", error); } - }; + }, [deleteMemberMutation]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/workspace/MemberManagement.tsx` around lines 238 - 247, The handleDeleteMember function is passed into DeleteMemberModal but isn't memoized; wrap it with React's useCallback to avoid unnecessary re-renders and recreate only when its dependencies change. Update the function reference (handleDeleteMember) to be created via useCallback and include deleteMemberMutation.mutateAsync, toast, setIsDeleteModalOpen, setSelectedDeleteMember (and any other state/props used) in the dependency array so the callback stays stable and correct when those values change.
152-186:useCallback으로 감싸서 불필요한 리렌더링을 방지하는 것을 권장합니다.
handleRoleChange가 매 렌더마다 새로 생성되어MemberList컴포넌트에 전달됩니다. 자식 컴포넌트의 불필요한 리렌더링을 방지하려면useCallback으로 감싸는 것이 좋습니다.♻️ useCallback 적용 예시
- const handleRoleChange = async ( - targetMemberId: number, - newRole: TMemberRole, - ) => { + const handleRoleChange = useCallback(async ( + targetMemberId: number, + newRole: TMemberRole, + ) => { const targetMember = members.find( (member) => member.memberId === targetMemberId, ); // ... 기존 로직 유지 - }; + }, [members, adminCount, updateMemberRoleMutation]);
useCallbackimport도 추가해주세요:- import { useEffect, useMemo, useRef, useState } from "react"; + import { useCallback, useEffect, useMemo, useRef, useState } from "react";코딩 가이드라인에 따르면
src/**파일에서 성능과 불필요한 리렌더링을 확인해야 합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/workspace/MemberManagement.tsx` around lines 152 - 186, The handleRoleChange function is recreated on every render and causes unnecessary re-renders in child components (e.g., MemberList); wrap handleRoleChange with React.useCallback and add the correct dependency array (include members or better derive targetMember lookup from members state/props, adminCount, updateMemberRoleMutation, and toast) so it only changes when its dependencies change, and add the useCallback import to the file; ensure the function signature and behavior remain identical while using the memoized callback where MemberList receives it.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/pages/workspace/MemberManagement.tsx`:
- Around line 238-247: The handleDeleteMember function is passed into
DeleteMemberModal but isn't memoized; wrap it with React's useCallback to avoid
unnecessary re-renders and recreate only when its dependencies change. Update
the function reference (handleDeleteMember) to be created via useCallback and
include deleteMemberMutation.mutateAsync, toast, setIsDeleteModalOpen,
setSelectedDeleteMember (and any other state/props used) in the dependency array
so the callback stays stable and correct when those values change.
- Around line 152-186: The handleRoleChange function is recreated on every
render and causes unnecessary re-renders in child components (e.g., MemberList);
wrap handleRoleChange with React.useCallback and add the correct dependency
array (include members or better derive targetMember lookup from members
state/props, adminCount, updateMemberRoleMutation, and toast) so it only changes
when its dependencies change, and add the useCallback import to the file; ensure
the function signature and behavior remain identical while using the memoized
callback where MemberList receives it.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9fd0ee0f-0e6f-4fe9-b362-fe1733ca8a16
📒 Files selected for processing (2)
src/api/workspace/org.tssrc/pages/workspace/MemberManagement.tsx
Seojegyeong
approved these changes
Mar 26, 2026
Collaborator
|
P4: 저도 소유권 관련 UI는 삭제하는 게 좋을 것 같습니다! 수고하셨습니다! |
YermIm
approved these changes
Mar 26, 2026
Collaborator
Author
|
네~ 좋습니다! 그러면 소유권 UI는 제거하고 마지막 관리자 삭제할시에 메세지를 더 보강하겠습니다! |
This was referenced Mar 26, 2026
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚨 관련 이슈
Closed #118
✨ 변경사항
✏️ 작업 내용
/api/org/members/${orgId}/${memberId}연동 진행/api/org/${orgId}/members/${memberId}연동 진행😅 미완성 작업
팀원 초대 API 연동
📢 논의 사항 및 참고 사항
현재 UI상에서는 관리자 변경 (소유권 이전) 기능이 있지만, 관련 API는 따로 없어서 미연동상태입니다.
현재 멤버 권한이 ADMIN/MEMBER 구조로 진행되기 때문에, 관리자가 여러명이 존재할 수 있는 구조입니다.
그래서 지금 상태로면 소유권 이전이라는 개념이 존재할수 없기 때문에 기능 정의가 필요할 것으로 보입니다.
현재 MemberList에서 마지막 관리자 한명만 있을때, 마지막 관리자는 삭제할수없게 만들어둔 상태이기에, 현재 구조대로 여러명의 관리자가 있는 상태를 유지하고, 소유권 관련 UI와 기능을 삭제하는게 가장 적절해보입니다.
의견 부탁드립니다.
현재로써는 마지막 관리자가 삭제하고 싶을때는 다른 멤버에게 관리자 역할을 넘겨주고 멤버로 역할이 변경이 된 후 삭제되는 개념이기에 관리자는 무조건 1명이상이 있는 구조 입니다.
Summary by CodeRabbit
릴리스 노트