Member Table

관리자용 컴포넌트관리자(MASTER)만 쓰는 화면에 쓰입니다.

관리자용 유저 목록 테이블입니다.

관리자 화면에서 쓰는 유저 목록 테이블입니다. 역할 변경과 탈퇴 처리를 한 줄에서 할 수 있습니다.

When to use

관리자가 가입한 사용자 목록을 보고 역할을 바꾸거나 탈퇴 처리를 해야 할 때
같은 모양의 목록을 내 서비스(예: 팀원 목록)에서 재사용하고 싶을 때. 데이터와 동작은 props로 주입합니다.

Preview

ID	아이디	이름	이메일	역할	상태	가입일
1	master01	김관리	master@example.com	MASTER	활성	2026-10-01
2	writer01	이작성	writer@example.com	VIEWERWRITER	활성	2026-10-05
3	viewer01	박조회	viewer@example.com	VIEWER	비활성	2026-10-12

tsx

<MemberTable
  members={data}
  onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
  onRemove={(id) => removeMember.mutate(id)}
/>

역할 옆의 변경 버튼은 Role Manager 확인 창을 엽니다 (roleEditor="inline"이면 표 안의 선택 상자). 자세한 내용은 Role Manager 페이지를 보세요.

멤버가 많아 검색·필터·페이지 나누기가 필요하다면 이 표를 감싼 Member Directory를 쓰세요. /admin/members가 그것을 사용합니다.

Columns

컬럼	내용
ID	users.id
아이디	user_id
이름 · 이메일	name, email
역할	RoleSelect로 변경 (삭제된 유저는 잠김)
상태	활성 · 비활성 · 삭제됨 배지
가입일	created_at의 날짜 부분
	탈퇴 처리 버튼

Empty state

멤버가 없습니다.

Props

Prop	Type	설명
`members`필수	`User[]`	표시할 사용자 목록. 비어 있으면 안내 문구를 보여 줍니다.
`onRoleChange`필수	`(id: number, roleId: number) => void`	역할 선택이 바뀌면 호출합니다.
`onRemove`필수	`(id: number) => void`	탈퇴 처리 버튼을 누르면 호출합니다.
`onActiveChange`	`(id: number, isActive: boolean) => void`	주면 상태에 맞는 버튼 하나가 생깁니다: 활성 → 비활성화, 비활성 → 활성화, 잠김 → 잠금 해제, 탈퇴 → 복구 (PATCH /users/{id}/active).
`roleEditor`	`"dialog" \| "inline"`	역할 변경 방식. 기본 dialog(확인 창), inline은 표 안의 선택 상자.
`currentUserId`	`number`	로그인한 관리자의 id. 본인 행은 역할 변경·탈퇴 처리를 잠급니다 (서버도 막음).

Usage

데이터 조회와 변경은 훅이 맡고, 테이블은 표시만 합니다. 실제 관리자 페이지는 아래처럼 구성되어 있습니다.

AdminMembersPage.tsx

function Members() {
  const { data, isLoading, isError } = useMembers(query); // query: 검색·필터·페이지 조건
  const updateRoles = useUpdateRoles();
  const removeMember = useRemoveMember();

  if (isLoading) return <p>불러오는 중…</p>;
  if (isError) return <p>목록을 불러오지 못했습니다.</p>;
  return (
    <MemberTable
      members={data.items}
      currentUserId={me.id}
      onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
      onRemove={(id) => removeMember.mutate(id)}
    />
  );
}

<RequireRole role={ADMIN_ROLE}><Members /></RequireRole>

Status badge

조건	배지
`deactivated_at`	삭제됨 (빨강). 탈퇴한 계정이라 역할 변경과 탈퇴 처리가 잠깁니다
`is_active = true`	활성 (파랑)
`is_active = false`	비활성 (회색)

Customization

컬럼을 추가하려면 TableHead와 TableCell을 한 쌍으로 추가합니다.
페이지네이션이나 검색이 필요하면 shadcn Data Table 패턴으로 바꿀 수 있습니다.
폭이 좁으면 가로 스크롤이 생기며, 셀은 줄바꿈하지 않습니다.

역할 변경과 탈퇴 처리는 서버가 관리자 권한을 다시 확인해야 합니다. 이 테이블은 요청을 보낼 뿐 권한을 판단하지 않습니다.

이 컴포넌트가 호출하는 API입니다. 누르면 요청·응답 명세로 이동합니다.

GET/api/users멤버 검색 (아이디·이름·이메일·닉네임, 역할·상태 필터, 페이지)PUT/api/users/{user_id}/roles역할 변경 PATCH/api/users/{user_id}/active활성/비활성 DELETE/api/users/{user_id}멤버 삭제 (탈퇴 처리, 보관 기간 뒤 개인정보 삭제)

Member Table

관리자용 컴포넌트관리자(MASTER)만 쓰는 화면에 쓰입니다.

관리자용 유저 목록 테이블입니다.

shadcn/ui · Table shadcn/ui · Badge

관리자 화면에서 쓰는 유저 목록 테이블입니다. 역할 변경과 탈퇴 처리를 한 줄에서 할 수 있습니다.

When to use

관리자가 가입한 사용자 목록을 보고 역할을 바꾸거나 탈퇴 처리를 해야 할 때
같은 모양의 목록을 내 서비스(예: 팀원 목록)에서 재사용하고 싶을 때. 데이터와 동작은 props로 주입합니다.

Preview

ID	아이디	이름	이메일	역할	상태	가입일
1	master01	김관리	master@example.com	MASTER	활성	2026-10-01
2	writer01	이작성	writer@example.com	VIEWERWRITER	활성	2026-10-05
3	viewer01	박조회	viewer@example.com	VIEWER	비활성	2026-10-12

tsx

<MemberTable
  members={data}
  onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
  onRemove={(id) => removeMember.mutate(id)}
/>

역할 옆의 변경 버튼은 Role Manager 확인 창을 엽니다 (roleEditor="inline"이면 표 안의 선택 상자). 자세한 내용은 Role Manager 페이지를 보세요.

멤버가 많아 검색·필터·페이지 나누기가 필요하다면 이 표를 감싼 Member Directory를 쓰세요. /admin/members가 그것을 사용합니다.

Columns

컬럼	내용
ID	users.id
아이디	user_id
이름 · 이메일	name, email
역할	RoleSelect로 변경 (삭제된 유저는 잠김)
상태	활성 · 비활성 · 삭제됨 배지
가입일	created_at의 날짜 부분
	탈퇴 처리 버튼

Empty state

멤버가 없습니다.

Props

Prop	Type	설명
`members`필수	`User[]`	표시할 사용자 목록. 비어 있으면 안내 문구를 보여 줍니다.
`onRoleChange`필수	`(id: number, roleId: number) => void`	역할 선택이 바뀌면 호출합니다.
`onRemove`필수	`(id: number) => void`	탈퇴 처리 버튼을 누르면 호출합니다.
`onActiveChange`	`(id: number, isActive: boolean) => void`	주면 상태에 맞는 버튼 하나가 생깁니다: 활성 → 비활성화, 비활성 → 활성화, 잠김 → 잠금 해제, 탈퇴 → 복구 (PATCH /users/{id}/active).
`roleEditor`	`"dialog" \| "inline"`	역할 변경 방식. 기본 dialog(확인 창), inline은 표 안의 선택 상자.
`currentUserId`	`number`	로그인한 관리자의 id. 본인 행은 역할 변경·탈퇴 처리를 잠급니다 (서버도 막음).

Usage

데이터 조회와 변경은 훅이 맡고, 테이블은 표시만 합니다. 실제 관리자 페이지는 아래처럼 구성되어 있습니다.

AdminMembersPage.tsx

function Members() {
  const { data, isLoading, isError } = useMembers(query); // query: 검색·필터·페이지 조건
  const updateRoles = useUpdateRoles();
  const removeMember = useRemoveMember();

  if (isLoading) return <p>불러오는 중…</p>;
  if (isError) return <p>목록을 불러오지 못했습니다.</p>;
  return (
    <MemberTable
      members={data.items}
      currentUserId={me.id}
      onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
      onRemove={(id) => removeMember.mutate(id)}
    />
  );
}

<RequireRole role={ADMIN_ROLE}><Members /></RequireRole>

Status badge

조건	배지
`deactivated_at`	삭제됨 (빨강). 탈퇴한 계정이라 역할 변경과 탈퇴 처리가 잠깁니다
`is_active = true`	활성 (파랑)
`is_active = false`	비활성 (회색)

Customization

컬럼을 추가하려면 TableHead와 TableCell을 한 쌍으로 추가합니다.
페이지네이션이나 검색이 필요하면 shadcn Data Table 패턴으로 바꿀 수 있습니다.
폭이 좁으면 가로 스크롤이 생기며, 셀은 줄바꿈하지 않습니다.

역할 변경과 탈퇴 처리는 서버가 관리자 권한을 다시 확인해야 합니다. 이 테이블은 요청을 보낼 뿐 권한을 판단하지 않습니다.

이 컴포넌트가 호출하는 API입니다. 누르면 요청·응답 명세로 이동합니다.

Member Table

When to use

Preview

Columns

Empty state

Props

Usage

Status badge

Customization

Related API

Member Table

When to use

Preview

Columns

Empty state

Props

Usage

Status badge

Customization

Related API