File name
Commit message
Commit date
File name
Commit message
Commit date
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>;
}