정렬 헤더 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>

devfront/tsconfig.app.json

@@ -15,6 +15,13 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "lucide-react": ["./node_modules/lucide-react"],
+      "react": ["./node_modules/@types/react/index.d.ts"],
+      "react/jsx-dev-runtime": ["./node_modules/@types/react/jsx-dev-runtime.d.ts"],
+      "react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime.d.ts"]
+    },
 
     /* Linting */
     "strict": true,
@@ -24,6 +31,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"],
+  "include": ["src", "../common/**/*.ts", "../common/**/*.tsx"],
   "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
 }

devfront/vite.config.ts

@@ -1,4 +1,5 @@
 import react from "@vitejs/plugin-react";
+import path from "node:path";
 import { defineConfig } from "vite";
 
 const buildOutDir =
@@ -35,6 +36,20 @@ const allowedHosts = Array.from(
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "lucide-react": path.resolve(__dirname, "node_modules/lucide-react"),
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react/jsx-dev-runtime": path.resolve(
+        __dirname,
+        "node_modules/react/jsx-dev-runtime.js",
+      ),
+      "react/jsx-runtime": path.resolve(
+        __dirname,
+        "node_modules/react/jsx-runtime.js",
+      ),
+    },
+  },
   cacheDir:
     process.env.DEVFRONT_VITE_CACHE_DIR ?? "/tmp/baron-sso-devfront-vite-cache",
   build: {