From 40d64acf15e6f01c334ad44259a6082a2e26b923 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Wed, 13 May 2026 16:50:25 +0900
Subject: [PATCH] =?UTF-8?q?devfront=20=EC=97=B0=EB=8F=99=20=EC=95=B1=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=20=EB=B0=8F=20=EB=AC=B8=EA=B5=AC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devfront/src/features/clients/ClientsPage.tsx | 436 +++++++++---------
 devfront/src/locales/en.toml                  |   2 +-
 devfront/src/locales/ko.toml                  |   2 +-
 3 files changed, 219 insertions(+), 221 deletions(-)

diff --git a/devfront/src/features/clients/ClientsPage.tsx b/devfront/src/features/clients/ClientsPage.tsx
index 73b03603..2d840605 100644
--- a/devfront/src/features/clients/ClientsPage.tsx
+++ b/devfront/src/features/clients/ClientsPage.tsx
@@ -15,6 +15,10 @@ import {
   sortableTableHeadBaseClassName,
   sortableTableHeaderClassName,
 } from "../../../../common/core/components/sort";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import {
   type SortConfig,
   type SortResolverMap,
@@ -427,233 +431,227 @@ function ClientsPage() {
       </Card>
 
       <Card className="glass-panel">
-        <CardHeader className="pb-0">
-          <div className="flex items-center justify-between">
+        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+          <div>
             <CardTitle className="text-xl font-semibold">
               {t("ui.dev.clients.list.title", "클라이언트 목록")}
             </CardTitle>
-            {canCreateClient && (
-              <div className="flex items-center gap-2 md:hidden">
-                <Button size="sm" onClick={() => navigate("/clients/new")}>
-                  <Plus className="h-4 w-4" />
-                  {t("ui.dev.clients.new", "새 클라이언트")}
-                </Button>
-              </div>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader className={sortableTableHeaderClassName}>
-              <TableRow>
-                <SortableTableHead
-                  label={t("ui.dev.clients.table.application", "애플리케이션")}
-                  onSort={requestSort}
-                  sortConfig={sortConfig}
-                  sortKey="application"
-                />
-                <SortableTableHead
-                  label={t("ui.dev.clients.table.client_id", "Client ID")}
-                  onSort={requestSort}
-                  sortConfig={sortConfig}
-                  sortKey="id"
-                />
-                <SortableTableHead
-                  label={t("ui.dev.clients.table.type", "유형")}
-                  onSort={requestSort}
-                  sortConfig={sortConfig}
-                  sortKey="type"
-                />
-                <SortableTableHead
-                  label={t("ui.dev.clients.table.status", "상태")}
-                  onSort={requestSort}
-                  sortConfig={sortConfig}
-                  sortKey="status"
-                />
-                <SortableTableHead
-                  label={t("ui.dev.clients.table.created_at", "생성일")}
-                  onSort={requestSort}
-                  sortConfig={sortConfig}
-                  sortKey="createdAt"
-                />
-                <TableHead
-                  className={`${sortableTableHeadBaseClassName} text-right`}
-                >
-                  {t("ui.dev.clients.table.actions", "액션")}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {!hasFilterResult && (
-                <TableRow>
-                  <TableCell
-                    colSpan={6}
-                    className="h-32 text-center text-muted-foreground"
-                  >
-                    <div className="space-y-1">
-                      <p className="font-medium text-foreground">
-                        {isFilteredOut
-                          ? t(
-                              "msg.dev.clients.empty_filtered",
-                              "조건에 맞는 연동 앱이 없습니다.",
-                            )
-                          : canCreateClient
-                            ? t(
-                                "msg.dev.clients.empty_can_create",
-                                "아직 등록된 연동 앱이 없습니다.",
-                              )
-                            : isDeveloperRequestPending
-                              ? t(
-                                  "msg.dev.clients.empty_pending",
-                                  "개발자 권한 신청을 검토 중입니다.",
-                                )
-                              : t(
-                                  "msg.dev.clients.empty",
-                                  "조회 가능한 RP가 없습니다.",
-                                )}
-                      </p>
-                      <div className="text-sm space-y-2">
-                        <p className="text-muted-foreground">
-                          {isFilteredOut
-                            ? t(
-                                "msg.dev.clients.empty_filtered_detail",
-                                "검색어나 필터 조건을 변경해 보세요.",
-                              )
-                            : canCreateClient
-                              ? t(
-                                  "msg.dev.clients.empty_can_create_detail",
-                                  "연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
-                                )
-                              : isDeveloperRequestPending
-                                ? t(
-                                    "msg.dev.clients.empty_pending_detail",
-                                    "super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
-                                  )
-                                : t(
-                                    "msg.dev.clients.empty_detail",
-                                    "RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
-                                  )}
-                        </p>
-                        {!isFilteredOut && canCreateClient && (
-                          <button
-                            type="button"
-                            className="text-primary font-bold hover:underline"
-                            onClick={() => navigate("/clients/new")}
-                          >
-                            {t("ui.dev.clients.new", "연동 앱 추가")}
-                          </button>
-                        )}
-                        {!isFilteredOut && canRequestDeveloperAccess && (
-                          <button
-                            type="button"
-                            className="text-primary font-bold hover:underline"
-                            onClick={() => navigate("/developer-requests")}
-                          >
-                            {t(
-                              "ui.dev.welcome.btn_request",
-                              "개발자 등록 신청하기",
-                            )}
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )}
-              {filteredClients.map((client) => (
-                <TableRow key={client.id} className="bg-card/40">
-                  <TableCell>
-                    <Link
-                      to={`/clients/${client.id}`}
-                      className="flex items-center gap-3 transition-colors hover:text-primary"
-                    >
-                      <ClientLogo client={client} />
-                      <div>
-                        <p className="font-semibold">
-                          {client.name ||
-                            t("ui.dev.clients.untitled", "Untitled")}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
-                        </p>
-                      </div>
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
-                        {client.id}
-                      </code>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Badge
-                        variant={
-                          client.type === "private" ||
-                          client.metadata?.headless_login_enabled
-                            ? "success"
-                            : "muted"
-                        }
-                      >
-                        {client.metadata?.headless_login_enabled
-                          ? t(
-                              "ui.dev.clients.type.private_headless",
-                              "Server side App (Headless Login)",
-                            )
-                          : client.type === "private"
-                            ? t(
-                                "ui.dev.clients.type.private",
-                                "Server side App",
-                              )
-                            : t("ui.dev.clients.type.pkce", "PKCE")}
-                      </Badge>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={client.status === "active" ? "info" : "muted"}
-                      className="px-3 py-1 text-xs uppercase"
-                    >
-                      {client.status === "active"
-                        ? t("ui.common.status.active", "Active")
-                        : t("ui.common.status.inactive", "Inactive")}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {client.createdAt
-                      ? new Date(client.createdAt).toLocaleDateString()
-                      : "-"}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <Button variant="ghost" size="sm" asChild>
-                        <Link to={`/clients/${client.id}`}>
-                          {t("ui.common.view", "View")}
-                        </Link>
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-          <div className="mt-4 flex items-center justify-between rounded-xl border border-border/60 bg-secondary/60 px-4 py-3 text-sm text-muted-foreground">
-            <span>
+            <CardDescription>
               {t(
                 "msg.dev.clients.showing",
-                "Showing {{shown}} of {{total}} clients",
-                { shown: filteredClients.length, total: totalClients },
+                "총 {{shown}}개의 애플리케이션이 등록되어 있습니다.",
+                { shown: totalClients },
               )}
-            </span>
-            <div className="flex gap-2">
-              <Button variant="outline" size="sm" disabled>
-                {t("ui.common.previous", "Previous")}
-              </Button>
-              <Button variant="outline" size="sm" disabled>
-                {t("ui.common.next", "Next")}
+            </CardDescription>
+          </div>
+          {canCreateClient && (
+            <div className="flex items-center gap-2 md:hidden">
+              <Button size="sm" onClick={() => navigate("/clients/new")}>
+                <Plus className="h-4 w-4" />
+                {t("ui.dev.clients.new", "새 클라이언트")}
               </Button>
             </div>
+          )}
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          <div className={commonTableShellClass}>
+            <div className={commonTableViewportClass}>
+              <Table className="min-w-[1180px]">
+                <TableHeader className={sortableTableHeaderClassName}>
+                  <TableRow>
+                    <SortableTableHead
+                      label={t("ui.dev.clients.table.application", "애플리케이션")}
+                      onSort={requestSort}
+                      sortConfig={sortConfig}
+                      sortKey="application"
+                    />
+                    <SortableTableHead
+                      label={t("ui.dev.clients.table.client_id", "Client ID")}
+                      onSort={requestSort}
+                      sortConfig={sortConfig}
+                      sortKey="id"
+                    />
+                    <SortableTableHead
+                      label={t("ui.dev.clients.table.type", "유형")}
+                      onSort={requestSort}
+                      sortConfig={sortConfig}
+                      sortKey="type"
+                    />
+                    <SortableTableHead
+                      label={t("ui.dev.clients.table.status", "상태")}
+                      onSort={requestSort}
+                      sortConfig={sortConfig}
+                      sortKey="status"
+                    />
+                    <SortableTableHead
+                      label={t("ui.dev.clients.table.created_at", "생성일")}
+                      onSort={requestSort}
+                      sortConfig={sortConfig}
+                      sortKey="createdAt"
+                    />
+                    <TableHead
+                      className={`${sortableTableHeadBaseClassName} text-right`}
+                    >
+                      {t("ui.dev.clients.table.actions", "액션")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {!hasFilterResult && (
+                    <TableRow>
+                      <TableCell
+                        colSpan={6}
+                        className="h-32 text-center text-muted-foreground"
+                      >
+                        <div className="space-y-1">
+                          <p className="font-medium text-foreground">
+                            {isFilteredOut
+                              ? t(
+                                  "msg.dev.clients.empty_filtered",
+                                  "조건에 맞는 연동 앱이 없습니다.",
+                                )
+                              : canCreateClient
+                                ? t(
+                                    "msg.dev.clients.empty_can_create",
+                                    "아직 등록된 연동 앱이 없습니다.",
+                                  )
+                                : isDeveloperRequestPending
+                                  ? t(
+                                      "msg.dev.clients.empty_pending",
+                                      "개발자 권한 신청을 검토 중입니다.",
+                                    )
+                                  : t(
+                                      "msg.dev.clients.empty",
+                                      "조회 가능한 RP가 없습니다.",
+                                    )}
+                          </p>
+                          <div className="text-sm space-y-2">
+                            <p className="text-muted-foreground">
+                              {isFilteredOut
+                                ? t(
+                                    "msg.dev.clients.empty_filtered_detail",
+                                    "검색어나 필터 조건을 변경해 보세요.",
+                                  )
+                                : canCreateClient
+                                  ? t(
+                                      "msg.dev.clients.empty_can_create_detail",
+                                      "연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
+                                    )
+                                  : isDeveloperRequestPending
+                                    ? t(
+                                        "msg.dev.clients.empty_pending_detail",
+                                        "super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
+                                      )
+                                    : t(
+                                        "msg.dev.clients.empty_detail",
+                                        "RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
+                                      )}
+                            </p>
+                            {!isFilteredOut && canCreateClient && (
+                              <button
+                                type="button"
+                                className="text-primary font-bold hover:underline"
+                                onClick={() => navigate("/clients/new")}
+                              >
+                                {t("ui.dev.clients.new", "연동 앱 추가")}
+                              </button>
+                            )}
+                            {!isFilteredOut && canRequestDeveloperAccess && (
+                              <button
+                                type="button"
+                                className="text-primary font-bold hover:underline"
+                                onClick={() => navigate("/developer-requests")}
+                              >
+                                {t(
+                                  "ui.dev.welcome.btn_request",
+                                  "개발자 등록 신청하기",
+                                )}
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {filteredClients.map((client) => (
+                    <TableRow key={client.id}>
+                      <TableCell>
+                        <Link
+                          to={`/clients/${client.id}`}
+                          className="flex items-center gap-3 transition-colors hover:text-primary"
+                        >
+                          <ClientLogo client={client} />
+                          <div>
+                            <p className="font-semibold">
+                              {client.name ||
+                                t("ui.dev.clients.untitled", "Untitled")}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
+                            </p>
+                          </div>
+                        </Link>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
+                            {client.id}
+                          </code>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge
+                            variant={
+                              client.type === "private" ||
+                              client.metadata?.headless_login_enabled
+                                ? "success"
+                                : "muted"
+                            }
+                          >
+                            {client.metadata?.headless_login_enabled
+                              ? t(
+                                  "ui.dev.clients.type.private_headless",
+                                  "Server side App (Headless Login)",
+                                )
+                              : client.type === "private"
+                                ? t(
+                                    "ui.dev.clients.type.private",
+                                    "Server side App",
+                                  )
+                                : t("ui.dev.clients.type.pkce", "PKCE")}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={client.status === "active" ? "info" : "muted"}
+                          className="px-3 py-1 text-xs uppercase"
+                        >
+                          {client.status === "active"
+                            ? t("ui.common.status.active", "Active")
+                            : t("ui.common.status.inactive", "Inactive")}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {client.createdAt
+                          ? new Date(client.createdAt).toLocaleDateString()
+                          : "-"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button variant="ghost" size="sm" asChild>
+                            <Link to={`/clients/${client.id}`}>
+                              {t("ui.common.view", "View")}
+                            </Link>
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
         </CardContent>
       </Card>
diff --git a/devfront/src/locales/en.toml b/devfront/src/locales/en.toml
index 1ca157cd..008f3bd5 100644
--- a/devfront/src/locales/en.toml
+++ b/devfront/src/locales/en.toml
@@ -331,7 +331,7 @@ desc = "Please enter the reason for your request. It will be approved after admi
 [msg.dev.clients]
 load_error = "Error loading clients: {{error}}"
 loading = "Loading apps..."
-showing = "Showing {{shown}} of {{total}} apps"
+showing = "A total of {{shown}} applications are registered."
 deleted = "App deleted."
 delete_error = "Failed to delete: {{error}}"
 delete_confirm = "Are you sure you want to delete this app? This action cannot be undone."
diff --git a/devfront/src/locales/ko.toml b/devfront/src/locales/ko.toml
index 3bb51e4e..1d5ca5d3 100644
--- a/devfront/src/locales/ko.toml
+++ b/devfront/src/locales/ko.toml
@@ -342,7 +342,7 @@ empty_pending = "개발자 권한 신청을 검토 중입니다."
 empty_pending_detail = "super admin이 승인하면 연동 앱을 추가할 수 있습니다."
 load_error = "앱 정보를 불러오지 못했습니다: {{error}}"
 loading = "앱 정보를 불러오는 중..."
-showing = "전체 {{total}}개 중 {{shown}}개를 표시하는 중입니다."
+showing = "총 {{shown}}개의 애플리케이션이 등록되어 있습니다."
 
 [msg.dev.clients.consents]
 empty = "조회된 동의 내역이 없습니다."