common 정렬 헬퍼 공통화 및 devfront 목록 정렬 추가

devfront/src/features/clients/ClientsPage.tsx

@@ -1,9 +1,24 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { BookOpenText, Filter, Plus, Search, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  BookOpenText,
+  Filter,
+  Plus,
+  Search,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { Link, useNavigate } from "react-router-dom";
+import {
+  sortItems,
+  toggleSort,
+  type SortConfig,
+  type SortResolverMap,
+} from "../../../../common/core/utils";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import {
   Avatar,
@@ -37,6 +52,7 @@ import {
   fetchDeveloperRequestStatus,
   fetchMyTenants,
   requestDeveloperAccess,
+  type ClientSummary,
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { resolveProfileRole } from "../../lib/role";
@@ -44,6 +60,8 @@ import { cn } from "../../lib/utils";
 import { fetchMe } from "../auth/authApi";
 import { ClientLogo } from "./components/ClientLogo";
 
+type ClientSortKey = "application" | "id" | "type" | "status" | "createdAt";
+
 function ClientsPage() {
   const navigate = useNavigate();
   const auth = useAuth();
@@ -104,19 +122,48 @@ function ClientsPage() {
   const [statusFilter, setStatusFilter] = useState("all");
   const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
   const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
+  const [sortConfig, setSortConfig] =
+    useState<SortConfig<ClientSortKey> | null>(null);
 
   const clients = data?.items || [];
+  const clientSortResolvers = useMemo<
+    SortResolverMap<ClientSummary, ClientSortKey>
+  >(
+    () => ({
+      application: (client) => client.name || client.id,
+      id: (client) => client.id,
+      type: (client) =>
+        client.metadata?.headless_login_enabled
+          ? "private-headless"
+          : client.type,
+      status: (client) => client.status,
+      createdAt: (client) =>
+        client.createdAt ? new Date(client.createdAt) : null,
+    }),
+    [],
+  );
 
-  const filteredClients = clients.filter((client) => {
-    const matchesSearch =
-      !searchQuery ||
-      client.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      client.id.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesType = typeFilter === "all" || client.type === typeFilter;
-    const matchesStatus =
-      statusFilter === "all" || client.status === statusFilter;
-    return matchesSearch && matchesType && matchesStatus;
-  });
+  const filteredClients = useMemo(() => {
+    const nextClients = clients.filter((client) => {
+      const matchesSearch =
+        !searchQuery ||
+        client.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        client.id.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesType = typeFilter === "all" || client.type === typeFilter;
+      const matchesStatus =
+        statusFilter === "all" || client.status === statusFilter;
+      return matchesSearch && matchesType && matchesStatus;
+    });
+
+    return sortItems(nextClients, sortConfig, clientSortResolvers);
+  }, [
+    clientSortResolvers,
+    clients,
+    searchQuery,
+    sortConfig,
+    statusFilter,
+    typeFilter,
+  ]);
 
   const totalClients = statsData?.total_clients ?? clients.length;
   const activeSessions = statsData?.active_sessions ?? 0;
@@ -179,6 +226,22 @@ function ClientsPage() {
 
   const isLoading = isLoadingClients || isLoadingStats || isLoadingRequest;
 
+  const requestSort = (key: ClientSortKey) => {
+    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">
@@ -389,18 +452,50 @@ function ClientsPage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>
-                  {t("ui.dev.clients.table.application", "애플리케이션")}
+                <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>
-                  {t("ui.dev.clients.table.client_id", "Client ID")}
+                <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>{t("ui.dev.clients.table.type", "유형")}</TableHead>
-                <TableHead>
-                  {t("ui.dev.clients.table.status", "상태")}
+                <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>
-                  {t("ui.dev.clients.table.created_at", "생성일")}
+                <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>
                 <TableHead className="text-right">
                   {t("ui.dev.clients.table.actions", "액션")}