refactor(frontend): centralize configurations and deduplicate dependencies in common workspace

- Centralized biome.json, tailwind.config.ts, and vite.config.ts into common/config. - Updated sub-apps to inherit from shared base configurations. - Deduplicated dependencies across apps using common workspace. - Fixed TypeScript resolution issues by restoring necessary build dependencies. - Removed obsolete package-lock.json files. - Applied minor import fixes via Biome. - Fixed react-router-dom v7 type errors.
2026-05-15 10:28:07 +09:00
parent 4ca562ce0e
commit 8951de510e
30 changed files with 4565 additions and 16002 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -52,3 +52,4 @@ orgfront/playwright-report/
 orgfront/node_modules/
 orgfront/dist/
 orgfront/.vite/
+.pnpm-store
--- a/adminfront/biome.json
+++ b/adminfront/biome.json
@@ -1,32 +1,3 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space"
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "style": {
-        "useEnumInitializers": "off"
-      },
-      "a11y": {
-        "noLabelWithoutControl": "off"
-      }
-    }
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "files": {
-    "ignore": [
-      "dist",
-      ".vite",
-      "node_modules",
-      "tsconfig*.json",
-      "test-results",
-      "test-results.nobody-backup",
-      "playwright-report"
-    ]
-  }
+  "extends": ["../common/config/biome.base.json"]
 }
--- a/adminfront/package-lock.json
+++ b/adminfront/package-lock.json
--- a/adminfront/package.json
+++ b/adminfront/package.json
@@ -19,47 +19,44 @@
    "i18n-scan": "cd .. && node tools/i18n-scanner/index.js && node tools/i18n-scanner/report.js"
  },
  "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.11",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-scroll-area": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@tanstack/react-query": "^5.66.8",
-    "@tanstack/react-query-devtools": "^5.66.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-query-devtools": "^5.100.10",
    "@tanstack/react-virtual": "^3.13.24",
-    "axios": "^1.7.9",
+    "axios": "^1.16.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "oidc-client-ts": "^3.4.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.1",
-    "react-oidc-context": "^3.3.0",
-    "react-router-dom": "^6.28.2",
-    "tailwind-merge": "^3.4.0",
-    "zod": "^3.24.1"
+    "lucide-react": "^1.14.0",
+    "oidc-client-ts": "^3.5.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
+    "react-oidc-context": "^3.3.1",
+    "react-router-dom": "^7.15.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
  },
  "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.58.0",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@types/react-router-dom": "^5.3.3",
    "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.23",
-    "jsdom": "^28.1.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.14",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.0.18"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6"
  }
 }
--- a/adminfront/src/features/audit/AuditLogsPage.tsx
+++ b/adminfront/src/features/audit/AuditLogsPage.tsx
@@ -10,6 +10,10 @@ import {
  Terminal,
 } from "lucide-react";
 import * as React from "react";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
@@ -27,10 +31,6 @@ import {
  TableHeader,
  TableRow,
 } from "../../components/ui/table";
-import {
-  commonTableShellClass,
-  commonTableViewportClass,
-} from "../../../../common/ui/table";
 import type { AuditLog } from "../../lib/adminApi";
 import { fetchAuditLogs } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
--- a/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantListPage.tsx
@@ -1,10 +1,9 @@
 import {
+  type UseMutationResult,
  useInfiniteQuery,
  useMutation,
  useQuery,
-  type UseMutationResult,
 } from "@tanstack/react-query";
-import type { UserProfileResponse } from "../../../lib/adminApi";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { AxiosError } from "axios";
 import {
@@ -33,16 +32,16 @@ import {
  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
 } from "../../../../../common/core/components/sort";
+import {
+  type SortConfig,
+  type SortResolverMap,
+  sortItems,
+  toggleSort,
+} from "../../../../../common/core/utils";
 import {
  commonTableShellClass,
  commonTableViewportClass,
 } from "../../../../../common/ui/table";
-import {
-  sortItems,
-  toggleSort,
-  type SortConfig,
-  type SortResolverMap,
-} from "../../../../../common/core/utils";
 import { RoleGuard } from "../../../components/auth/RoleGuard";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -71,7 +70,15 @@ import {
 } from "../../../components/ui/dropdown-menu";
 import { Input } from "../../../components/ui/input";
 import { ScrollArea } from "../../../components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/ui/select";
 import { Separator } from "../../../components/ui/separator";
+import { Switch } from "../../../components/ui/switch";
 import {
  Table,
  TableBody,
@@ -80,15 +87,8 @@ import {
  TableHeader,
  TableRow,
 } from "../../../components/ui/table";
-import { Switch } from "../../../components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../../components/ui/select";
 import { toast } from "../../../components/ui/use-toast";
+import type { UserProfileResponse } from "../../../lib/adminApi";
 import {
  type TenantSummary,
  deleteTenant,
--- a/adminfront/src/features/users/UserListPage.tsx
+++ b/adminfront/src/features/users/UserListPage.tsx
@@ -18,17 +18,17 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
+import {
+  SortableTableHead,
+  sortableTableHeadBaseClassName,
+  sortableTableHeaderClassName,
+} from "../../../../common/core/components/sort";
 import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
 } from "../../../../common/core/utils";
-import {
-  SortableTableHead,
-  sortableTableHeadBaseClassName,
-  sortableTableHeaderClassName,
-} from "../../../../common/core/components/sort";
 import {
  commonTableShellClass,
  commonTableViewportClass,
--- a/adminfront/src/main.tsx
+++ b/adminfront/src/main.tsx
@@ -21,9 +21,6 @@ createRoot(rootElement).render(
      <QueryClientProvider client={queryClient}>
        <RouterProvider
          router={router}
-          future={{
-            v7_startTransition: true,
-          }}
        />
        <Toaster />
      </QueryClientProvider>
--- a/adminfront/tailwind.config.ts
+++ b/adminfront/tailwind.config.ts
@@ -1,71 +1,13 @@
 import type { Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
+import commonPreset from "../common/theme/tailwind.preset";

 const config: Config = {
-  darkMode: ["class"],
+  presets: [commonPreset],
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}",
    "../common/**/*.{ts,tsx,css}",
  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "1.5rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["Space Grotesk", "Pretendard Variable", ...fontFamily.sans],
-      },
-      boxShadow: {
-        card: "0 12px 40px rgba(7, 15, 26, 0.25)",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
 };

 export default config;
--- a/adminfront/tsconfig.app.json
+++ b/adminfront/tsconfig.app.json
@@ -16,11 +16,12 @@
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
    "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"]
+      "lucide-react": ["../common/node_modules/lucide-react"],
+      "react": ["../common/node_modules/@types/react/index.d.ts"],
+      "react/jsx-dev-runtime": ["../common/node_modules/@types/react/jsx-dev-runtime.d.ts"],
+      "react/jsx-runtime": ["../common/node_modules/@types/react/jsx-runtime.d.ts"]
    },

    /* Linting */
--- a/adminfront/vite.config.ts
+++ b/adminfront/vite.config.ts
@@ -1,53 +1,44 @@
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-import { defineConfig } from "vite";
+import { defineConfig, mergeConfig } from "vite";
+import { commonViteConfig, getAllowedHosts } from "../common/config/vite.base";

 const buildOutDir =
  process.env.ADMINFRONT_BUILD_OUT_DIR ?? "/tmp/baron-sso-adminfront-dist";

-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",
-      ),
+const allowedHosts = getAllowedHosts(
+  ["sadmin.hmac.kr", "localhost", "172.16.10.176", "127.0.0.1"],
+  undefined,
+  undefined
+);
+
+export default defineConfig(
+  mergeConfig(commonViteConfig, {
+    envPrefix: ["VITE_", "USERFRONT_", "ORGFRONT_"],
+    cacheDir:
+      process.env.ADMINFRONT_VITE_CACHE_DIR ??
+      "/tmp/baron-sso-adminfront-vite-cache",
+    build: {
+      outDir: buildOutDir,
    },
-  },
-  envPrefix: ["VITE_", "USERFRONT_", "ORGFRONT_"],
-  cacheDir:
-    process.env.ADMINFRONT_VITE_CACHE_DIR ??
-    "/tmp/baron-sso-adminfront-vite-cache",
-  build: {
-    outDir: buildOutDir,
-    emptyOutDir: true,
-  },
-  server: {
-    host: "127.0.0.1",
-    allowedHosts: ["sadmin.hmac.kr", "localhost", "172.16.10.176", "127.0.0.1"],
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
-        changeOrigin: true,
+    server: {
+      host: "127.0.0.1",
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:3000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-  preview: {
-    host: "127.0.0.1",
-    port: 5173,
-    allowedHosts: ["sadmin.hmac.kr", "localhost", "172.16.10.176", "127.0.0.1"],
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
-        changeOrigin: true,
+    preview: {
+      host: "127.0.0.1",
+      port: 5173,
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:3000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-});
+  })
+);
--- a/common/config/biome.base.json
+++ b/common/config/biome.base.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "style": {
+        "useEnumInitializers": "off"
+      },
+      "a11y": {
+        "noLabelWithoutControl": "off"
+      }
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "dist",
+      ".vite",
+      "node_modules",
+      "tsconfig*.json",
+      "test-results",
+      "test-results.nobody-backup",
+      "playwright-report"
+    ]
+  }
+}
--- a/common/config/vite.base.ts
+++ b/common/config/vite.base.ts
@@ -0,0 +1,42 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig, type UserConfig } from "vite";
+
+export const commonViteConfig: UserConfig = {
+  plugins: [react()],
+  // Since we are using pnpm and common is our root, we might not need the strict aliases 
+  // for react and lucide-react anymore, as pnpm will resolve them correctly from the root node_modules.
+  // If we do need them, we can add them back per-app or dynamically resolve from common's __dirname.
+  build: {
+    emptyOutDir: true,
+  },
+};
+
+export function hostFromUrl(value: string | undefined) {
+  if (!value) return undefined;
+  try {
+    return new URL(value).hostname;
+  } catch {
+    return value;
+  }
+}
+
+export function getAllowedHosts(
+  defaultHosts: string[],
+  envUrl?: string,
+  envAllowedHosts?: string
+) {
+  return Array.from(
+    new Set(
+      [
+        ...defaultHosts,
+        hostFromUrl(envUrl),
+        ...(envAllowedHosts ?? "")
+          .split(",")
+          .map((host) => host.trim())
+          .filter(Boolean),
+      ].filter((host): host is string => Boolean(host))
+    )
+  );
+}
+
+export default defineConfig(commonViteConfig);
--- a/common/pnpm-lock.yaml
+++ b/common/pnpm-lock.yaml
--- a/common/theme/tailwind.preset.ts
+++ b/common/theme/tailwind.preset.ts
@@ -0,0 +1,68 @@
+import type { Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";
+import animatePlugin from "tailwindcss-animate";
+
+const commonPreset: Config = {
+  darkMode: ["class"],
+  content: [], // Content should be defined by the consuming app
+  theme: {
+    container: {
+      center: true,
+      padding: "1.5rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["Space Grotesk", "Pretendard Variable", ...fontFamily.sans],
+      },
+      boxShadow: {
+        card: "0 12px 40px rgba(7, 15, 26, 0.25)",
+      },
+    },
+  },
+  plugins: [animatePlugin],
+};
+
+export default commonPreset;
--- a/devfront/biome.json
+++ b/devfront/biome.json
@@ -1,30 +1,3 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "formatter": {
-    "indentStyle": "space"
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "style": {
-        "useEnumInitializers": "off"
-      },
-      "a11y": {
-        "noLabelWithoutControl": "off"
-      }
-    }
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "files": {
-    "ignore": [
-      "dist",
-      ".vite",
-      "node_modules",
-      "tsconfig*.json",
-      "test-results",
-      "playwright-report"
-    ]
-  }
+  "extends": ["../common/config/biome.base.json"]
 }
--- a/devfront/package-lock.json
+++ b/devfront/package-lock.json
--- a/devfront/package.json
+++ b/devfront/package.json
@@ -16,40 +16,40 @@
    "test:roles": "playwright test tests/devfront-role-switch-report.spec.ts",
    "test:ui": "playwright test --ui"
  },
-  "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.4",
-    "@radix-ui/react-scroll-area": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@tanstack/react-query": "^5.66.8",
-    "@tanstack/react-query-devtools": "^5.66.8",
-    "axios": "^1.7.9",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "oidc-client-ts": "^3.4.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.1",
-    "react-oidc-context": "^3.3.0",
-    "react-router-dom": "^6.28.2",
-    "tailwind-merge": "^3.4.0",
-    "zod": "^3.24.1"
-  },
  "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.58.0",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.23",
-    "jsdom": "^28.1.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.14",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.5"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-query-devtools": "^5.100.10",
+    "axios": "^1.16.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "oidc-client-ts": "^3.5.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
+    "react-oidc-context": "^3.3.1",
+    "react-router-dom": "^7.15.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
  }
 }
--- a/devfront/src/features/audit/AuditLogsPage.tsx
+++ b/devfront/src/features/audit/AuditLogsPage.tsx
@@ -9,6 +9,10 @@ import {
  Search,
 } from "lucide-react";
 import * as React from "react";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -28,10 +32,6 @@ import {
  TableHeader,
  TableRow,
 } from "../../components/ui/table";
-import {
-  commonTableShellClass,
-  commonTableViewportClass,
-} from "../../../../common/ui/table";
 import type { DevAuditLog } from "../../lib/devApi";
 import { fetchDevAuditLogs } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
--- a/devfront/src/features/clients/ClientConsentsPage.tsx
+++ b/devfront/src/features/clients/ClientConsentsPage.tsx
@@ -10,6 +10,10 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -28,10 +32,6 @@ import {
  TableHeader,
  TableRow,
 } from "../../components/ui/table";
-import {
-  commonTableShellClass,
-  commonTableViewportClass,
-} from "../../../../common/ui/table";
 import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
--- a/devfront/src/features/clients/ClientsPage.tsx
+++ b/devfront/src/features/clients/ClientsPage.tsx
@@ -9,16 +9,16 @@ import {
  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
 } from "../../../../common/core/components/sort";
-import {
-  commonTableShellClass,
-  commonTableViewportClass,
-} from "../../../../common/ui/table";
 import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
 } from "../../../../common/core/utils";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import {
  Avatar,
--- a/devfront/tailwind.config.ts
+++ b/devfront/tailwind.config.ts
@@ -1,71 +1,13 @@
 import type { Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
+import commonPreset from "../common/theme/tailwind.preset";

 const config: Config = {
-  darkMode: ["class"],
+  presets: [commonPreset],
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}",
    "../common/**/*.{ts,tsx,css}",
  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "1.5rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["Space Grotesk", "Pretendard Variable", ...fontFamily.sans],
-      },
-      boxShadow: {
-        card: "0 12px 40px rgba(7, 15, 26, 0.25)",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
 };

 export default config;
--- a/devfront/tsconfig.app.json
+++ b/devfront/tsconfig.app.json
@@ -16,11 +16,12 @@
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
    "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"]
+      "lucide-react": ["../common/node_modules/lucide-react"],
+      "react": ["../common/node_modules/@types/react/index.d.ts"],
+      "react/jsx-dev-runtime": ["../common/node_modules/@types/react/jsx-dev-runtime.d.ts"],
+      "react/jsx-runtime": ["../common/node_modules/@types/react/jsx-runtime.d.ts"]
    },

    /* Linting */
--- a/devfront/vite.config.ts
+++ b/devfront/vite.config.ts
@@ -1,80 +1,43 @@
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-import { defineConfig } from "vite";
+import { defineConfig, mergeConfig } from "vite";
+import { commonViteConfig, getAllowedHosts } from "../common/config/vite.base";

 const buildOutDir =
  process.env.DEVFRONT_BUILD_OUT_DIR ?? "/tmp/baron-sso-devfront-dist";

-const defaultAllowedHosts = [
-  "sdev.hmac.kr",
-  "localhost",
-  "172.16.10.176",
-  "127.0.0.1",
-];
-
-function hostFromUrl(value: string | undefined) {
-  if (!value) return undefined;
-  try {
-    return new URL(value).hostname;
-  } catch {
-    return value;
-  }
-}
-
-const allowedHosts = Array.from(
-  new Set(
-    [
-      ...defaultAllowedHosts,
-      hostFromUrl(process.env.DEVFRONT_URL),
-      ...(process.env.DEVFRONT_ALLOWED_HOSTS ?? "")
-        .split(",")
-        .map((host) => host.trim())
-        .filter(Boolean),
-    ].filter((host): host is string => Boolean(host)),
-  ),
+const allowedHosts = getAllowedHosts(
+  ["sdev.hmac.kr", "localhost", "172.16.10.176", "127.0.0.1"],
+  process.env.DEVFRONT_URL,
+  process.env.DEVFRONT_ALLOWED_HOSTS
 );

-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",
-      ),
+export default defineConfig(
+  mergeConfig(commonViteConfig, {
+    cacheDir:
+      process.env.DEVFRONT_VITE_CACHE_DIR ??
+      "/tmp/baron-sso-devfront-vite-cache",
+    build: {
+      outDir: buildOutDir,
    },
-  },
-  cacheDir:
-    process.env.DEVFRONT_VITE_CACHE_DIR ?? "/tmp/baron-sso-devfront-vite-cache",
-  build: {
-    outDir: buildOutDir,
-    emptyOutDir: true,
-  },
-  server: {
-    host: "127.0.0.1",
-    allowedHosts,
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
-        changeOrigin: true,
+    server: {
+      host: "127.0.0.1",
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:3000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-  preview: {
-    host: "127.0.0.1",
-    port: 5173,
-    allowedHosts,
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
-        changeOrigin: true,
+    preview: {
+      host: "127.0.0.1",
+      port: 5173,
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:3000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-});
+  })
+);
--- a/orgfront/biome.json
+++ b/orgfront/biome.json
@@ -1,30 +1,3 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "formatter": {
-    "indentStyle": "space"
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "style": {
-        "useEnumInitializers": "off"
-      },
-      "a11y": {
-        "noLabelWithoutControl": "off"
-      }
-    }
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "files": {
-    "ignore": [
-      "dist",
-      ".vite",
-      "node_modules",
-      "tsconfig*.json",
-      "test-results",
-      "playwright-report"
-    ]
-  }
+  "extends": ["../common/config/biome.base.json"]
 }
--- a/orgfront/package-lock.json
+++ b/orgfront/package-lock.json
--- a/orgfront/package.json
+++ b/orgfront/package.json
@@ -17,40 +17,40 @@
    "test:ui": "playwright test --ui"
  },
  "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.4",
-    "@radix-ui/react-scroll-area": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@tanstack/react-query": "^5.66.8",
-    "@tanstack/react-query-devtools": "^5.66.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-query-devtools": "^5.100.10",
    "@xyflow/react": "^12.10.2",
-    "axios": "^1.7.9",
+    "axios": "^1.16.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "oidc-client-ts": "^3.4.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.1",
-    "react-oidc-context": "^3.3.0",
-    "react-router-dom": "^6.28.2",
-    "tailwind-merge": "^3.4.0",
-    "zod": "^3.24.1"
+    "lucide-react": "^1.14.0",
+    "oidc-client-ts": "^3.5.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
+    "react-oidc-context": "^3.3.1",
+    "react-router-dom": "^7.15.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
  },
  "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.58.0",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.23",
-    "jsdom": "^28.1.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.14",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.5"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6"
  }
 }
--- a/orgfront/tailwind.config.ts
+++ b/orgfront/tailwind.config.ts
@@ -1,71 +1,13 @@
 import type { Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
+import commonPreset from "../common/theme/tailwind.preset";

 const config: Config = {
-  darkMode: ["class"],
+  presets: [commonPreset],
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}",
    "../common/**/*.{ts,tsx,css}",
  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "1.5rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["Space Grotesk", "Pretendard Variable", ...fontFamily.sans],
-      },
-      boxShadow: {
-        card: "0 12px 40px rgba(7, 15, 26, 0.25)",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
 };

 export default config;
--- a/orgfront/tsconfig.app.json
+++ b/orgfront/tsconfig.app.json
@@ -16,10 +16,11 @@
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
    "paths": {
-      "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"]
+      "react": ["../common/node_modules/@types/react/index.d.ts"],
+      "react/jsx-dev-runtime": ["../common/node_modules/@types/react/jsx-dev-runtime.d.ts"],
+      "react/jsx-runtime": ["../common/node_modules/@types/react/jsx-runtime.d.ts"]
    },

    /* Linting */
--- a/orgfront/vite.config.ts
+++ b/orgfront/vite.config.ts
@@ -1,68 +1,51 @@
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, mergeConfig } from "vite";
+import { commonViteConfig, getAllowedHosts } from "../common/config/vite.base";

 const buildOutDir =
  process.env.ORGFRONT_BUILD_OUT_DIR ?? "/tmp/baron-sso-orgfront-dist";

-const defaultAllowedHosts = [
-  "baron-orgchart.hmac.kr",
-  "sorg.hmac.kr",
-  "sdev.hmac.kr",
-  "localhost",
-  "172.16.10.176",
-  "127.0.0.1",
-];
-
-function hostFromUrl(value: string | undefined) {
-  if (!value) return undefined;
-  try {
-    return new URL(value).hostname;
-  } catch {
-    return value;
-  }
-}
-
-const allowedHosts = Array.from(
-  new Set(
-    [
-      ...defaultAllowedHosts,
-      hostFromUrl(process.env.ORGFRONT_URL),
-      ...(process.env.ORGFRONT_ALLOWED_HOSTS ?? "")
-        .split(",")
-        .map((host) => host.trim())
-        .filter(Boolean),
-    ].filter((host): host is string => Boolean(host)),
-  ),
+const allowedHosts = getAllowedHosts(
+  [
+    "baron-orgchart.hmac.kr",
+    "sorg.hmac.kr",
+    "sdev.hmac.kr",
+    "localhost",
+    "172.16.10.176",
+    "127.0.0.1",
+  ],
+  process.env.ORGFRONT_URL,
+  process.env.ORGFRONT_ALLOWED_HOSTS
 );

-export default defineConfig({
-  plugins: [react()],
-  cacheDir:
-    process.env.ORGFRONT_VITE_CACHE_DIR ?? "/tmp/baron-sso-orgfront-vite-cache",
-  build: {
-    outDir: buildOutDir,
-    emptyOutDir: true,
-  },
-  server: {
-    host: "0.0.0.0",
-    port: 5175,
-    allowedHosts,
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:5000",
-        changeOrigin: true,
+export default defineConfig(
+  mergeConfig(commonViteConfig, {
+    cacheDir:
+      process.env.ORGFRONT_VITE_CACHE_DIR ??
+      "/tmp/baron-sso-orgfront-vite-cache",
+    build: {
+      outDir: buildOutDir,
+    },
+    server: {
+      host: "0.0.0.0",
+      port: 5175,
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:5000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-  preview: {
-    host: "0.0.0.0",
-    port: 5175,
-    allowedHosts,
-    proxy: {
-      "/api": {
-        target: process.env.API_PROXY_TARGET || "http://localhost:5000",
-        changeOrigin: true,
+    preview: {
+      host: "0.0.0.0",
+      port: 5175,
+      allowedHosts,
+      proxy: {
+        "/api": {
+          target: process.env.API_PROXY_TARGET || "http://localhost:5000",
+          changeOrigin: true,
+        },
      },
    },
-  },
-});
+  })
+);