Member Directory

멤버가 많아질 때 필요한 검색, 필터, 페이지 나누기를 한 덩어리로 묶은 관리자 목록입니다.MemberTable(표) 위에 MemberFilters(검색·필터)와 Pagination(페이지 이동)을 더했고, /admin/members가 이것을 씁니다.

Preview

27명의 목 데이터로 직접 시험해 보세요. 검색어를 입력하고, 역할·상태를 고르고, 페이지를 넘겨 보세요.

<MemberDirectory
  query={query}
  onQueryChange={(patch) => setQuery((q) => ({ ...q, ...patch }))}
  data={data}            // { items, total, page, size }
  loading={isFetching}
  onRoleChange={(id, roles) => updateRoles.mutate({ id, roles })}
  onRemove={(id) => removeMember.mutate(id)}
/>

What users can do

• 검색어나 필터를 바꾸면 자동으로 1페이지로 돌아갑니다. 3페이지를 보다가 검색했는데 빈 화면이 나오는 일을 막습니다.
• 새 결과가 오는 동안 이전 목록을 흐리게 유지해서 화면이 깜빡이지 않습니다.
• 결과가 없으면 안내 문구와 필터 초기화 버튼을 보여 줍니다.
• 아래에는 "전체 27명 중 1–10"처럼 현재 범위를 표시합니다.

How data flows

MemberFilters (입력)  ──►  query { q, roleId, status, page, size }
                               │
                               ▼
            GET /users?q=&role_id=&status=&page=&size=
                               │
                               ▼
        { items: User[], total, page, size }  ──►  MemberTable + Pagination

조건(query)은 부모가 들고 있고, MemberDirectory는 값을 받아 보여 주고 바뀐 부분만 onQueryChange로 알려 줍니다. 서버 조회든 목 데이터든 상관없이 쓸 수 있습니다.

const [query, setQuery] = useState(defaultMemberQuery);
const onQueryChange = useCallback(
  (patch) => setQuery((q) => ({ ...q, ...patch })),
  [],
);
const { data, isFetching } = useMembers(query);

<MemberDirectory query={query} onQueryChange={onQueryChange} data={data} loading={isFetching} ... />

API

GET /users?q=kim&role_id=3&status=active&page=2&size=10

// response 200
{
  "items": [ { "id": 11, "user_id": "user11", ... } ],
  "total": 27,
  "page": 2,
  "size": 10
}

Pagination

페이지 이동 버튼만 따로 쓸 수도 있는 shadcn 스타일 컴포넌트입니다. 현재 페이지 주변만 보여 주고 나머지는 …로 줄입니다.

<Pagination page={page} pageCount={12} onPageChange={setPage} />

• 7쪽 이하는 전부, 그보다 많으면 1 … 4 5 [6] 7 8 … 12 형태로 보여 줍니다.
• 첫/마지막 페이지에서는 이전/다음 버튼이 잠깁니다. 페이지가 1개뿐이면 아무것도 그리지 않습니다.
• 현재 페이지는 aria-current="page"로 표시되어 스크린리더가 알립니다.

Props

MemberDirectory props

Pagination props

Customization

• 검색 지연 시간은 <MemberFilters debounceMs={500} />처럼 바꿉니다 (기본 300ms).
• 페이지당 개수 선택지는 admin/members-filter.ts의 SIZE_OPTIONS입니다.
• 상태 필터의 항목은 같은 파일의 STATUS_OPTIONS에서 고칩니다.
• 컬럼을 더하려면 MemberTable에 TableHead·TableCell 한 쌍을 추가하세요.