devfront 연동 앱 목록 테이블 간격 및 문구 정리

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,11 +431,19 @@ 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>
+            <CardDescription>
+              {t(
+                "msg.dev.clients.showing",
+                "총 {{shown}}개의 애플리케이션이 등록되어 있습니다.",
+                { shown: totalClients },
+              )}
+            </CardDescription>
+          </div>
           {canCreateClient && (
             <div className="flex items-center gap-2 md:hidden">
               <Button size="sm" onClick={() => navigate("/clients/new")}>
@@ -440,10 +452,11 @@ function ClientsPage() {
               </Button>
             </div>
           )}
-          </div>
         </CardHeader>
-        <CardContent>
-          <Table>
+        <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
@@ -561,7 +574,7 @@ function ClientsPage() {
                     </TableRow>
                   )}
                   {filteredClients.map((client) => (
-                <TableRow key={client.id} className="bg-card/40">
+                    <TableRow key={client.id}>
                       <TableCell>
                         <Link
                           to={`/clients/${client.id}`}
@@ -638,21 +651,6 @@ function ClientsPage() {
                   ))}
                 </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>
-              {t(
-                "msg.dev.clients.showing",
-                "Showing {{shown}} of {{total}} clients",
-                { shown: filteredClients.length, total: 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")}
-              </Button>
             </div>
           </div>
         </CardContent>

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."

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 = "조회된 동의 내역이 없습니다."