feat(ai-character): 리소스 관리 기반 정비

src/shared/ui/resource-pagination.tsx

@@ -1,4 +1,5 @@
 import type { PageData } from "@/shared/api/pagination";
+import { useId } from "react";
 
 export type ResourcePaginationProps = {
   readonly data: PageData<unknown>;
@@ -8,14 +9,16 @@ export type ResourcePaginationProps = {
 };
 
 export function ResourcePagination({ data, onPageChange, onSizeChange, sizeOptions = [20, 50] }: ResourcePaginationProps) {
+  const pageSizeId = useId();
+
   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 className="text-sm font-semibold" htmlFor={pageSizeId}>
           페이지 크기
         </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}>
+        <select className="rounded-md border border-input bg-card px-3 py-2 text-base" id={pageSizeId} onChange={(event) => onSizeChange(Number(event.currentTarget.value))} value={data.size}>
           {sizeOptions.map((size) => (
             <option key={size} value={size}>{size}개</option>
           ))}