Refactor: 멤버 관리 부분 준완성

frontend/src/components/AdminMemberManage/ProjectMemberManageForm.tsx

@@ -1,9 +1,11 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 import useUpdateProjectMemberPrivilegeQuery from '@/queries/projects/useUpdateProjectMemberPrivilegeQuery';
 import useRemoveProjectMemberQuery from '@/queries/projects/useRemoveProjectMemberQuery';
 import useProjectMembersQuery from '@/queries/projects/useProjectMembersQuery';
+import useWorkspaceMembersQuery from '@/queries/workspaces/useWorkspaceMembersQuery';
 import useAuthStore from '@/stores/useAuthStore';
+import useAddProjectMemberQuery from '@/queries/projects/useAddProjectMemberQuery';
 
 type Role = 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER' | 'NONE';
 
@@ -17,55 +19,78 @@ const roleToStr: { [key in Role]: string } = {
   NONE: '역할 없음',
 };
 
-interface ProjectMemberManageFormProps {
-  workspaceMembers: Array<{ memberId: number; nickname: string }>;
-}
-
-export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMemberManageFormProps) {
+export default function ProjectMemberManageForm() {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const projectId = searchParams.get('projectId');
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
+  const { data: workspaceMembers = [] } = useWorkspaceMembersQuery(Number(workspaceId));
   const { data: projectMembers = [] } = useProjectMembersQuery(Number(projectId), memberId);
   const { mutate: updatePrivilege } = useUpdateProjectMemberPrivilegeQuery();
   const { mutate: removeMember } = useRemoveProjectMemberQuery();
+  const { mutate: addProjectMember } = useAddProjectMemberQuery();
 
-  const noRoleMembers = workspaceMembers.filter((wm) => !projectMembers.some((pm) => pm.memberId === wm.memberId));
+  const noRoleMembers = workspaceMembers
+    .filter((workspaceMember) => !projectMembers.some((projectMember) => projectMember.memberId === workspaceMember.id))
+    .map((member) => ({
+      memberId: member.id,
+      nickname: member.nickname,
+      profileImage: member.profileImage,
+      privilegeType: 'NONE',
+    }));
+
+  const sortedMembers = [...projectMembers, ...noRoleMembers].sort((a, b) => {
+    const aPrivilege = a.privilegeType || 'NONE';
+    const bPrivilege = b.privilegeType || 'NONE';
+    return roles.indexOf(aPrivilege as Role) - roles.indexOf(bPrivilege as Role);
+  });
 
   const handleRoleChange = (memberId: number, role: Role) => {
     if (role === 'NONE') {
       removeMember({
         projectId: Number(projectId),
-        memberId: memberId,
         targetMemberId: memberId,
       });
     } else {
-      updatePrivilege({
-        projectId: Number(projectId),
-        memberId,
-        privilegeData: {
+      if (projectMembers.some((m) => m.memberId === memberId)) {
+        updatePrivilege({
+          projectId: Number(projectId),
           memberId,
-          privilegeType: role,
-        },
-      });
+          privilegeData: {
+            memberId,
+            privilegeType: role,
+          },
+        });
+      } else {
+        addProjectMember({
+          projectId: Number(projectId),
+          memberId,
+          newMember: {
+            memberId,
+            privilegeType: role,
+          },
+        });
+      }
     }
   };
 
   return (
     <div className="flex w-full flex-col gap-4">
-      {[...projectMembers, ...noRoleMembers].map((member) => (
+      {sortedMembers.map((member) => (
         <div
-          key={member.memberId}
+          key={`${member.memberId}-${member.nickname}`}
           className="flex items-center gap-4"
         >
           <span className="flex-1">{member.nickname}</span>
           <div className="flex-1">
             <Select
               onValueChange={(value) => handleRoleChange(member.memberId, value as Role)}
-              defaultValue={projectMembers.find((m) => m.memberId === member.memberId)?.privilegeType || 'NONE'}
-              disabled={projectMembers.some((m) => m.memberId === member.memberId && m.privilegeType === 'ADMIN')}
+              defaultValue={member.privilegeType || 'NONE'}
+              disabled={member.privilegeType === 'ADMIN'}
             >
               <SelectTrigger>
                 <SelectValue placeholder="역할을 선택해주세요." />
@@ -75,6 +100,7 @@ export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMem
                   <SelectItem
                     key={role}
                     value={role}
+                    disabled={role === 'ADMIN'}
                   >
                     {roleToStr[role]}
                   </SelectItem>

frontend/src/components/AdminMemberManage/WorkspaceMemberManageForm.tsx

@@ -1,14 +1,10 @@
-interface WorkspaceMember {
-  memberId: number;
-  nickname: string;
-  profileImage: string;
-}
+import useWorkspaceMembersQuery from '@/queries/workspaces/useWorkspaceMembersQuery';
+import { useParams } from 'react-router-dom';
 
-interface WorkspaceMemberManageFormProps {
-  members: WorkspaceMember[];
-}
+export default function WorkspaceMemberManageForm() {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { data: members = [] } = useWorkspaceMembersQuery(Number(workspaceId));
 
-export default function WorkspaceMemberManageForm({ members }: WorkspaceMemberManageFormProps) {
   return (
     <div className="flex w-full flex-col gap-4">
       {members.length === 0 ? (
@@ -16,7 +12,7 @@ export default function WorkspaceMemberManageForm({ members }: WorkspaceMemberMa
       ) : (
         members.map((member) => (
           <div
-            key={member.memberId}
+            key={member.id}
             className="flex items-center gap-4 border-b pb-2"
           >
             <img

frontend/src/components/AdminMemberManage/index.tsx

@@ -3,11 +3,11 @@ import { useParams, useLocation } from 'react-router-dom';
 import useAuthStore from '@/stores/useAuthStore';
 import useAddWorkspaceMemberQuery from '@/queries/workspaces/useAddWorkspaceMemberQuery';
 import useAddProjectMemberQuery from '@/queries/projects/useAddProjectMemberQuery';
-import useWorkspaceMembersQuery from '@/queries/workspaces/useWorkspaceMembersQuery';
 import MemberAddModal from '../MemberAddModal';
 import { MemberAddFormValues } from '../MemberAddModal/MemberAddForm';
 import WorkspaceMemberManageForm from './WorkspaceMemberManageForm';
 import ProjectMemberManageForm from './ProjectMemberManageForm';
+import WorkspaceMemberAddModal from '../WorkspaceMemberAddModal';
 
 export default function AdminMemberManage() {
   const { workspaceId } = useParams<{ workspaceId: string }>();
@@ -18,15 +18,13 @@ export default function AdminMemberManage() {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
-  const { data: workspaceMembers = [] } = useWorkspaceMembersQuery(Number(workspaceId));
-
   const addWorkspaceMember = useAddWorkspaceMemberQuery();
   const addProjectMember = useAddProjectMemberQuery();
 
   const [, setInviteModalOpen] = useState(false);
 
   const handleMemberInvite = (data: MemberAddFormValues) => {
-    if (workspaceId) {
+    if (workspaceId && !projectId) {
       addWorkspaceMember.mutate({
         workspaceId: Number(workspaceId),
         memberId: memberId,
@@ -37,7 +35,7 @@ export default function AdminMemberManage() {
         projectId: Number(projectId),
         memberId: memberId,
         newMember: {
-          memberId: 0,
+          memberId: data.memberId,
           privilegeType: data.role,
         },
       });
@@ -49,11 +47,19 @@ export default function AdminMemberManage() {
     <div className="flex w-full flex-col gap-6 border-b-[0.67px] border-[#dcdcde] bg-[#fbfafd] p-6">
       <header className="flex w-full items-center gap-4">
         <h1 className="flex-1 text-lg font-semibold text-[#333238]">멤버 관리</h1>
-        <MemberAddModal onSubmit={handleMemberInvite} />
+
+        {projectId ? (
+          <MemberAddModal onSubmit={handleMemberInvite} />
+        ) : (
+          <WorkspaceMemberAddModal
+            workspaceId={Number(workspaceId)}
+            memberId={memberId}
+          />
+        )}
       </header>
 
-      {workspaceId && !projectId && <WorkspaceMemberManageForm members={workspaceMembers} />}
-      {projectId && <ProjectMemberManageForm workspaceMembers={workspaceMembers} />}
+      {workspaceId && !projectId && <WorkspaceMemberManageForm />}
+      {projectId && <ProjectMemberManageForm />}
     </div>
   );
 }