From 095101ad2f6b60d865d62e7939572d1f3d515778 Mon Sep 17 00:00:00 2001
From: jcchoi <jcchoi@onasys.co.kr>
Date: Thu, 1 Oct 2026 22:14:28 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=84=EC=88=98=ED=95=AD=EB=AA=A9=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/src/ui/table/index.tsx  | 31 +++++++++++++++----
 .../common/components/src/ui/table/table.css  |  5 ++-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/common/components/src/ui/table/index.tsx b/packages/common/components/src/ui/table/index.tsx
index 83be366fd..45bc9949b 100644
--- a/packages/common/components/src/ui/table/index.tsx
+++ b/packages/common/components/src/ui/table/index.tsx
@@ -79,12 +79,31 @@ const TableRow = React.forwardRef<
 ));
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th ref={ref} className={cn("align-middle", className)} {...props} />
-));
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  "data-required"?: boolean | string;
+};
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ children, className, ...props }, ref) => {
+  const isRequired = props["data-required"] !== undefined;
+
+  return (
+    <th
+      ref={ref}
+      scope="col"
+      className={cn("align-middle", className)}
+      {...props}
+    >
+      {children}
+      {isRequired && (
+        <span className="table-required-marker" title="필수 항목">
+          (*)
+        </span>
+      )}
+    </th>
+  );
+  },
+);
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css
index 2a0897d39..e54b73869 100644
--- a/packages/common/components/src/ui/table/table.css
+++ b/packages/common/components/src/ui/table/table.css
@@ -7,9 +7,8 @@
   .table-ui th {
     @apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2];
   }
-  .table-ui th[data-required]::before {
-    content: "*";
-    color: red;
+  .table-ui th[data-required] .table-required-marker {
+    @apply ml-1 text-red-600;
   }
   .table-ui td {
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];