feat(ai-character): 관리자 인증 셸 구현

src/shared/ui/resource-pagination.tsx

@@ -0,0 +1,32 @@
+import type { PageData } from "@/shared/api/pagination";
+
+export type ResourcePaginationProps = {
+  readonly data: PageData<unknown>;
+  readonly onPageChange: (page: number) => void;
+  readonly onSizeChange: (size: number) => void;
+  readonly sizeOptions?: readonly number[];
+};
+
+export function ResourcePagination({ data, onPageChange, onSizeChange, sizeOptions = [20, 50] }: ResourcePaginationProps) {
+  return (
+    <nav aria-label="페이지" className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4 sm:flex-row sm:items-center sm:justify-between">
+      <p className="text-sm font-semibold text-muted-foreground">총 {data.totalCount.toLocaleString("ko-KR")}개 · {data.page + 1}페이지</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <label className="text-sm font-semibold" htmlFor="resource-page-size">
+          페이지 크기
+        </label>
+        <select className="rounded-md border border-input bg-card px-3 py-2 text-base" id="resource-page-size" onChange={(event) => onSizeChange(Number(event.currentTarget.value))} value={data.size}>
+          {sizeOptions.map((size) => (
+            <option key={size} value={size}>{size}개</option>
+          ))}
+        </select>
+        <button className="rounded-md border border-input bg-card px-3 py-2 font-semibold hover:bg-accent disabled:opacity-60" disabled={data.page <= 0} onClick={() => onPageChange(data.page - 1)} type="button">
+          이전 페이지
+        </button>
+        <button className="rounded-md border border-input bg-card px-3 py-2 font-semibold hover:bg-accent disabled:opacity-60" disabled={!data.hasNext} onClick={() => onPageChange(data.page + 1)} type="button">
+          다음 페이지
+        </button>
+      </div>
+    </nav>
+  );
+}