연동 앱 페이지 레이아웃 개선

devfront/tests/clients.spec.ts

@@ -100,6 +100,59 @@ test("clients page shows recent RP changes", async ({ page }) => {
   ).toBeVisible();
 });
 
+test("clients page shows only five apps by default and expands with more button", async ({
+  page,
+}) => {
+  await seedAuth(page, "super_admin");
+  const clients = Array.from({ length: 6 }, (_, index) =>
+    makeClient(`client-${index + 1}`, {
+      name: `Preview App ${index + 1}`,
+      createdAt: new Date(
+        Date.UTC(2026, 2, 3, 9, 10 - index, 0),
+      ).toISOString(),
+    }),
+  );
+
+  await installDevApiMock(page, {
+    clients,
+    consents: [] as Consent[],
+    auditLogs: [] as AuditLog[],
+    auditLogsByCursor: undefined,
+  });
+
+  await page.goto("/clients");
+  await expect(
+    page.getByRole("heading", { name: "연동 앱 목록" }),
+  ).toBeVisible();
+  await expect(
+    page.locator("table").first().locator("tbody tr").filter({
+      hasText: /Preview App \d/,
+    }),
+  ).toHaveCount(5);
+  await expect(
+    page.getByText("Preview App 6", { exact: true }),
+  ).not.toBeVisible();
+
+  const moreButton = page.getByRole("button", {
+    name: "연동 앱 목록 더보기",
+  });
+  await expect(moreButton).toBeVisible();
+  await expect(moreButton).toHaveCount(1);
+  await moreButton.click();
+
+  await expect(
+    page.locator("table").first().locator("tbody tr").filter({
+      hasText: /Preview App \d/,
+    }),
+  ).toHaveCount(6);
+  await expect(
+    page.getByText("Preview App 6", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "연동 앱 목록 더보기" }),
+  ).toHaveCount(0);
+});
+
 test("clients page shows user-delete relation cleanup in recent changes", async ({
   page,
 }) => {