From ee8cfb4ba851a6dd335b2ee3c816d012d64531e2 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Wed, 13 May 2026 16:51:51 +0900
Subject: [PATCH] =?UTF-8?q?common/ui/table=20=EA=B8=B0=EC=A4=80=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminfront/src/components/ui/table.tsx | 35 +++++++++++++++-----------
 common/ui/table.ts                     | 15 +++++++++++
 devfront/src/components/ui/table.tsx   | 35 +++++++++++++++-----------
 orgfront/src/components/ui/table.tsx   | 35 +++++++++++++++-----------
 orgfront/tsconfig.app.json             |  8 +++++-
 5 files changed, 82 insertions(+), 46 deletions(-)
 create mode 100644 common/ui/table.ts

diff --git a/adminfront/src/components/ui/table.tsx b/adminfront/src/components/ui/table.tsx
index 62c33432..46370544 100644
--- a/adminfront/src/components/ui/table.tsx
+++ b/adminfront/src/components/ui/table.tsx
@@ -1,14 +1,25 @@
 import * as React from "react";
+import {
+  commonTableBodyClass,
+  commonTableCaptionClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableFooterClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
 import { cn } from "../../lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full">
+  <div className={commonTableWrapperClass}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn(commonTableClass, className)}
       {...props}
     />
   </div>
@@ -19,7 +30,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn(commonTableHeaderClass, className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -29,7 +40,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn(commonTableBodyClass, className)}
     {...props}
   />
 ));
@@ -41,7 +52,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-muted/50 font-medium text-foreground", className)}
+    className={cn(commonTableFooterClass, className)}
     {...props}
   />
 ));
@@ -53,10 +64,7 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
-      className,
-    )}
+    className={cn(commonTableRowClass, className)}
     {...props}
   />
 ));
@@ -68,10 +76,7 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
-    className={cn(
-      "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-foreground align-middle sticky top-0 bg-inherit",
-      className,
-    )}
+    className={cn(commonTableHeadClass, className)}
     {...props}
   />
 ));
@@ -83,7 +88,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-6 align-middle text-sm", className)}
+    className={cn(commonTableCellClass, className)}
     {...props}
   />
 ));
@@ -95,7 +100,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn(commonTableCaptionClass, className)}
     {...props}
   />
 ));
diff --git a/common/ui/table.ts b/common/ui/table.ts
new file mode 100644
index 00000000..459d5699
--- /dev/null
+++ b/common/ui/table.ts
@@ -0,0 +1,15 @@
+export const commonTableWrapperClass = "relative w-full overflow-auto";
+export const commonTableClass = "w-full caption-bottom text-sm";
+export const commonTableHeaderClass = "[&_tr]:border-b";
+export const commonTableBodyClass = "[&_tr:last-child]:border-0";
+export const commonTableFooterClass = "bg-muted/50 font-medium text-foreground";
+export const commonTableRowClass =
+  "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted";
+export const commonTableHeadClass =
+  "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle";
+export const commonTableCellClass = "p-6 align-middle text-sm";
+export const commonTableCaptionClass = "mt-4 text-sm text-muted-foreground";
+export const commonTableShellClass =
+  "flex-1 rounded-md border overflow-hidden flex flex-col";
+export const commonTableViewportClass =
+  "flex-1 overflow-auto relative custom-scrollbar";
diff --git a/devfront/src/components/ui/table.tsx b/devfront/src/components/ui/table.tsx
index b20952d6..46370544 100644
--- a/devfront/src/components/ui/table.tsx
+++ b/devfront/src/components/ui/table.tsx
@@ -1,14 +1,25 @@
 import * as React from "react";
+import {
+  commonTableBodyClass,
+  commonTableCaptionClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableFooterClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
 import { cn } from "../../lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className={commonTableWrapperClass}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn(commonTableClass, className)}
       {...props}
     />
   </div>
@@ -19,7 +30,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn(commonTableHeaderClass, className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -29,7 +40,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn(commonTableBodyClass, className)}
     {...props}
   />
 ));
@@ -41,7 +52,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-muted/50 font-medium text-foreground", className)}
+    className={cn(commonTableFooterClass, className)}
     {...props}
   />
 ));
@@ -53,10 +64,7 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
-      className,
-    )}
+    className={cn(commonTableRowClass, className)}
     {...props}
   />
 ));
@@ -68,10 +76,7 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
-    className={cn(
-      "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle",
-      className,
-    )}
+    className={cn(commonTableHeadClass, className)}
     {...props}
   />
 ));
@@ -83,7 +88,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-6 align-middle text-sm", className)}
+    className={cn(commonTableCellClass, className)}
     {...props}
   />
 ));
@@ -95,7 +100,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn(commonTableCaptionClass, className)}
     {...props}
   />
 ));
diff --git a/orgfront/src/components/ui/table.tsx b/orgfront/src/components/ui/table.tsx
index b20952d6..46370544 100644
--- a/orgfront/src/components/ui/table.tsx
+++ b/orgfront/src/components/ui/table.tsx
@@ -1,14 +1,25 @@
 import * as React from "react";
+import {
+  commonTableBodyClass,
+  commonTableCaptionClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableFooterClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
 import { cn } from "../../lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className={commonTableWrapperClass}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn(commonTableClass, className)}
       {...props}
     />
   </div>
@@ -19,7 +30,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn(commonTableHeaderClass, className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -29,7 +40,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn(commonTableBodyClass, className)}
     {...props}
   />
 ));
@@ -41,7 +52,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-muted/50 font-medium text-foreground", className)}
+    className={cn(commonTableFooterClass, className)}
     {...props}
   />
 ));
@@ -53,10 +64,7 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
-      className,
-    )}
+    className={cn(commonTableRowClass, className)}
     {...props}
   />
 ));
@@ -68,10 +76,7 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
-    className={cn(
-      "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle",
-      className,
-    )}
+    className={cn(commonTableHeadClass, className)}
     {...props}
   />
 ));
@@ -83,7 +88,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-6 align-middle text-sm", className)}
+    className={cn(commonTableCellClass, className)}
     {...props}
   />
 ));
@@ -95,7 +100,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn(commonTableCaptionClass, className)}
     {...props}
   />
 ));
diff --git a/orgfront/tsconfig.app.json b/orgfront/tsconfig.app.json
index 68025a7f..2fc57d3f 100644
--- a/orgfront/tsconfig.app.json
+++ b/orgfront/tsconfig.app.json
@@ -15,6 +15,12 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
+    "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"]
+    },
 
     /* Linting */
     "strict": true,
@@ -24,6 +30,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"],
+  "include": ["src", "../common/**/*.ts"],
   "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
 }