Role Manager

관리자가 한 사용자에게 권한(역할)을 부여하거나 바꾸는 확인 창입니다. 단순한 선택 상자와 달리, 역할마다 무엇을 할 수 있는지(C·R·U·D)를 보여 주고, 한 사람에게 역할을 여러 개 줄 수 있습니다. 위험한 변경(MASTER 부여·해제)은 확인 전에 경고하고, 본인의 역할은 바꿀 수 없게 잠급니다(서버도 막습니다).

Preview

표에서 사용자 옆의 변경을 눌러 보세요. 첫 번째 사용자(MASTER)는 "현재 로그인한 관리자 본인"으로 가정했습니다 — 이 사용자의 창을 열면 역할을 바꿀 수 없다는 안내가 나옵니다.

<MemberTable
  members={members}
  roleEditor="dialog"        // 기본값
  currentUserId={me.id}      // 본인 행 잠금용
  onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
  onRemove={(id) => removeMember.mutate(id)}
/>

What admins can do

• 현재 역할과 같으면 [역할 변경] 버튼이 잠겨 있어 의미 없는 요청을 막습니다.
• 삭제된 사용자는 [변경] 버튼이 비활성화됩니다.
• 창을 닫았다가 다른 사용자를 열면 선택 상태가 새로 시작됩니다.

Warnings

Inline select vs dialog

같은 MemberTable이 두 방식을 모두 지원합니다. 기본은 확인 창이고, 목록에서 빠르게 바꾸고 싶다면 인라인으로 바꿀 수 있습니다.

Use the dialog on its own

표 밖(사용자 상세 화면 등)에서도 단독으로 쓸 수 있습니다.

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>역할 변경</Button>
<RoleAssignDialog
  user={user}
  open={open}
  onOpenChange={setOpen}
  currentUserId={me.id}
  pending={updateRoles.isPending}
  onSubmit={(roles) => updateRoles.mutate({ id: user.id, roles })}  // 예: ["VIEWER", "WRITER"]
/>

Where the roles come from

선택지, 설명, C·R·U·D 칩은 모두 src/meerkit/roles.ts의 ROLES에서 만들어집니다. 역할을 추가하거나 설명을 바꾸면 이 창에 그대로 반영됩니다 (Add a role 가이드 참고).

Server rules

PUT /users/{id}/roles  { "roles": ["VIEWER", "WRITER"] }
   │
   ├─ 요청자가 MASTER가 아님 ─────────────► 403
   ├─ 대상이 없음 ────────────────────────► 404
   ├─ 없는 역할이 섞여 있음 ──────────────► 422
   ├─ 자기 자신의 역할을 바꾸려 함 ────────► 400 (관리자가 사라지는 것 방지)
   └─ 통과 ──────────────────────────────► 200 + 갱신된 User

• 역할 변경 기록(누가, 누구를, 언제, 무엇에서 무엇으로)을 남기는 것을 권장합니다.
• 역할이 바뀐 사용자의 기존 토큰은 새 역할이 즉시 반영되도록 갱신하거나 다음 요청에서 다시 확인하세요.

Accessibility

• Radix Dialog 기반: 포커스가 창 안에 갇히고 Esc로 닫을 수 있으며, 닫으면 포커스가 [변경] 버튼으로 돌아옵니다.
• 역할 선택은 라디오 그룹이라 방향키로 이동하고, 각 카드는 라벨로 묶여 있어 어디를 눌러도 선택됩니다.
• C·R·U·D 칩은 title과 aria-label로 의미(Create 등)를 전달합니다.

Props

RoleAssignDialog

MemberTable (추가된 props)