+import type { ReactNode } from "react";

+

+interface TableProps {

+  children: ReactNode;

+  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */

+  className?: string;

+}

+

+/** 테이블 컨테이너 — 가로 스크롤 래퍼(`overflow-x-auto`) + `<table>`. */

+export function Table({ children, className }: TableProps) {

+  return (

+    <div className={`w-full overflow-x-auto ${className ?? ""}`}>

+      <table className="w-full border-collapse text-body-sm text-foreground">{children}</table>

+    </div>

+  );

+}

+

+interface TableSectionProps {

+  children: ReactNode;

+}

+

+/** 테이블 헤더 영역(`<thead>`). */

+export function TableHead({ children }: TableSectionProps) {

+  return <thead className="bg-surface-muted">{children}</thead>;

+}

+

+/** 테이블 본문 영역(`<tbody>`). */

+export function TableBody({ children }: TableSectionProps) {

+  return <tbody>{children}</tbody>;

+}

+

+interface TableRowProps {

+  children: ReactNode;

+  className?: string;

+}

+

+/** 테이블 행(`<tr>`) — 아래쪽 구분선을 기본으로 갖는다. */

+export function TableRow({ children, className }: TableRowProps) {

+  return <tr className={`border-b border-border ${className ?? ""}`}>{children}</tr>;

+}

+

+interface TableCellProps {

+  children: ReactNode;

+  className?: string;

+}

+

+/** 헤더 셀(`<th>`). */

+export function TableHeaderCell({ children, className }: TableCellProps) {

+  return (

+    <th

+      className={`px-3 py-2 text-left text-label-md text-foreground-muted ${className ?? ""}`}

+    >

+      {children}

+    </th>

+  );

+}

+

+/** 본문 셀(`<td>`). */

+export function TableCell({ children, className }: TableCellProps) {

+  return <td className={`px-3 py-2 text-body-sm ${className ?? ""}`}>{children}</td>;

+}