style: refine platform management table layouts

src/pages/RestoredPages.tsx

@@ -800,6 +800,10 @@ export function RuntimeDevicesPage() {
   );
 }
 
+type NumberedPlatformDevice = PlatformDevice & { no: number };
+type NumberedDeviceAuthorization = DeviceAuthorization & { no: number };
+type NumberedPlatformSshKey = PlatformSshKey & { no: number };
+
 function AgentTable({ title, description }: { title: string; description: string }) {
   const [devices, setDevices] = useState<PlatformDevice[]>([]);
   const [loading, setLoading] = useState(true);
@@ -816,8 +820,14 @@ function AgentTable({ title, description }: { title: string; description: string
     void refresh();
   }, [refresh]);
 
-  const columns = useMemo<Array<DataTableColumn<PlatformDevice>>>(
+  const rows = useMemo<NumberedPlatformDevice[]>(
+    () => devices.map((device, index) => ({ ...device, no: devices.length - index })),
+    [devices]
+  );
+
+  const columns = useMemo<Array<DataTableColumn<NumberedPlatformDevice>>>(
     () => [
+      { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
       {
         key: 'platform',
         header: '플랫폼',
@@ -842,7 +852,7 @@ function AgentTable({ title, description }: { title: string; description: string
     <DataTableCard
       title={title}
       description={description}
-      rows={devices}
+      rows={rows}
       columns={columns}
       searchPlaceholder="플랫폼명, 계정, 워크스페이스 검색"
       getSearchText={(row) => `${row.hostname} ${row.tailscaleHostname ?? ''} ${row.accountEmail} ${row.workspaceRoot ?? ''} ${row.sshUser ?? ''}`}
@@ -916,8 +926,14 @@ export function AgentRegistrationPage() {
     }
   };
 
-  const columns = useMemo<Array<DataTableColumn<DeviceAuthorization>>>(
+  const rows = useMemo<NumberedDeviceAuthorization[]>(
+    () => authorizations.map((authorization, index) => ({ ...authorization, no: authorizations.length - index })),
+    [authorizations]
+  );
+
+  const columns = useMemo<Array<DataTableColumn<NumberedDeviceAuthorization>>>(
     () => [
+      { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
       {
         key: 'user',
         header: '대상 사용자',
@@ -987,7 +1003,7 @@ export function AgentRegistrationPage() {
       <DataTableCard
         title="등록 키 목록"
         description="활성 키와 최근 24시간 내 발급된 키를 확인합니다."
-        rows={authorizations}
+        rows={rows}
         columns={columns}
         searchPlaceholder="사용자명, 이메일, 등록 키 검색"
         getSearchText={(row) => `${row.authUserName ?? ''} ${row.accountEmail ?? ''} ${row.userCode} ${row.status}`}
@@ -1036,14 +1052,20 @@ export function AgentSshKeysPage() {
       .finally(() => setLoading(false));
   }, []);
 
+  const rows = useMemo<NumberedPlatformSshKey[]>(
+    () => keys.map((key, index) => ({ ...key, no: keys.length - index })),
+    [keys]
+  );
+
   return (
     <>
       <PageTitle eyebrow="플랫폼 관리" title="SSH 키" description="저장소와 원격 실행에 사용할 SSH 키 배포 상태를 관리합니다." />
       <DataTableCard
         title="SSH 키 목록"
         description="등록 플랫폼 계정에 연결된 SSH 키입니다."
-        rows={keys}
+        rows={rows}
         columns={[
+          { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
           { key: 'account', header: '계정', flexible: true, cell: (row) => row.accountEmail },
           { key: 'label', header: '이름', width: 180, cell: (row) => row.label || '-' },
           { key: 'type', header: '유형', width: 140, cell: (row) => row.keyType || '-' },