정렬 헤더 UI 공통화 및 devfront secret 표시 수정

devfront/src/features/clients/ClientsPage.tsx

@@ -1,9 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import {
-  ArrowDown,
-  ArrowUp,
-  ArrowUpDown,
   BookOpenText,
   Filter,
   Plus,
@@ -13,6 +10,7 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { Link, useNavigate } from "react-router-dom";
+import { SortableTableHead } from "../../../../common/core/components/sort";
 import {
   type SortConfig,
   type SortResolverMap,
@@ -230,18 +228,6 @@ function ClientsPage() {
     setSortConfig((current) => toggleSort(current, key));
   };
 
-  const getSortIcon = (key: ClientSortKey) => {
-    if (!sortConfig || sortConfig.key !== key) {
-      return <ArrowUpDown className="ml-1 h-4 w-4 opacity-50" />;
-    }
-
-    return sortConfig.direction === "asc" ? (
-      <ArrowUp className="ml-1 h-4 w-4" />
-    ) : (
-      <ArrowDown className="ml-1 h-4 w-4" />
-    );
-  };
-
   if (auth.isLoading || !hasAccessToken || isLoading) {
     return (
       <div className="p-8 text-center">
@@ -452,51 +438,41 @@ function ClientsPage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead
-                  className="cursor-pointer hover:bg-muted/50 transition-colors"
-                  onClick={() => requestSort("application")}
-                >
-                  <div className="flex items-center">
-                    {t("ui.dev.clients.table.application", "애플리케이션")}
-                    {getSortIcon("application")}
-                  </div>
-                </TableHead>
-                <TableHead
-                  className="cursor-pointer hover:bg-muted/50 transition-colors"
-                  onClick={() => requestSort("id")}
-                >
-                  <div className="flex items-center">
-                    {t("ui.dev.clients.table.client_id", "Client ID")}
-                    {getSortIcon("id")}
-                  </div>
-                </TableHead>
-                <TableHead
-                  className="cursor-pointer hover:bg-muted/50 transition-colors"
-                  onClick={() => requestSort("type")}
-                >
-                  <div className="flex items-center">
-                    {t("ui.dev.clients.table.type", "유형")}
-                    {getSortIcon("type")}
-                  </div>
-                </TableHead>
-                <TableHead
-                  className="cursor-pointer hover:bg-muted/50 transition-colors"
-                  onClick={() => requestSort("status")}
-                >
-                  <div className="flex items-center">
-                    {t("ui.dev.clients.table.status", "상태")}
-                    {getSortIcon("status")}
-                  </div>
-                </TableHead>
-                <TableHead
-                  className="cursor-pointer hover:bg-muted/50 transition-colors"
-                  onClick={() => requestSort("createdAt")}
-                >
-                  <div className="flex items-center">
-                    {t("ui.dev.clients.table.created_at", "생성일")}
-                    {getSortIcon("createdAt")}
-                  </div>
-                </TableHead>
+                <SortableTableHead
+                  className="text-muted-foreground"
+                  label={t("ui.dev.clients.table.application", "애플리케이션")}
+                  onSort={requestSort}
+                  sortConfig={sortConfig}
+                  sortKey="application"
+                />
+                <SortableTableHead
+                  className="text-muted-foreground"
+                  label={t("ui.dev.clients.table.client_id", "Client ID")}
+                  onSort={requestSort}
+                  sortConfig={sortConfig}
+                  sortKey="id"
+                />
+                <SortableTableHead
+                  className="text-muted-foreground"
+                  label={t("ui.dev.clients.table.type", "유형")}
+                  onSort={requestSort}
+                  sortConfig={sortConfig}
+                  sortKey="type"
+                />
+                <SortableTableHead
+                  className="text-muted-foreground"
+                  label={t("ui.dev.clients.table.status", "상태")}
+                  onSort={requestSort}
+                  sortConfig={sortConfig}
+                  sortKey="status"
+                />
+                <SortableTableHead
+                  className="text-muted-foreground"
+                  label={t("ui.dev.clients.table.created_at", "생성일")}
+                  onSort={requestSort}
+                  sortConfig={sortConfig}
+                  sortKey="createdAt"
+                />
                 <TableHead className="text-right">
                   {t("ui.dev.clients.table.actions", "액션")}
                 </TableHead>