필수항목 tooltip

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<

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];