테이블 구현

src/frontend/packages/ui/src/components/Table/index.ts

@@ -0,0 +1,8 @@
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from './table';

src/frontend/packages/ui/src/components/Table/table.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from './table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Widget/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex w-[600px] flex-wrap">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="text-left">종목</TableHead>
+            <TableHead>현재가</TableHead>
+            <TableHead>등락률</TableHead>
+            <TableHead>거래량</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <TableRow key={index}>
+              <TableCell className="text-left">삼성전자</TableCell>
+              <TableCell>10,000</TableCell>
+              <TableCell>+00.0%</TableCell>
+              <TableCell>1,000</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};

src/frontend/packages/ui/src/components/Table/table.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@workspace/ui/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className={'relative w-full overflow-auto rounded-sm border'}>
+    <table ref={ref} className={cn('w-full text-sm', className)} {...props} />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn('bg-muted/50 [&_tr]:border-b', className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'h-20 border-b transition-colors text-right hover:bg-muted/50',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-4 text-right align-middle font-medium text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('px-4 py-2 align-middle', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };

src/frontend/packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Button';
 export * from './Badge';
 export * from './Textarea';
+export * from './Table';