Merge pull request #72 from COW-dev/feat/#68-table

[FEAT] Table 컴포넌트 제작

Author: ujinsim

src/shared/index.ts

@@ -27,6 +27,7 @@ export { TextArea } from './ui/TextArea';
 export { Tooltip } from './ui/Tooltip';
 export { Title1, Title2, Title3, Caption1, Body1, Body2, Body3 } from './ui/Typography';
 export { Header, NavigationItem, MenuContainer, Menu, MenuTrigger, MenuItem } from './ui/Header';
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/Table';
 
 export { Icons, iconNames } from './ui/assets';
 export type { IconName } from './ui/assets';

src/shared/ui/Table/Table.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './index';
+
+const PrimitiveMeta = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '기본적인 Table 레이아웃 구성 요소 세트입니다.  ',
+      },
+    },
+  },
+} satisfies Meta<typeof Table>;
+export default PrimitiveMeta;
+
+const data = [
+  {
+    scoreCategory: '동아리 활동 보고서',
+    reason: '2회차 활동보고서',
+    amount: 4.615,
+    createdAt: '2025-03-31 15:42:26',
+  },
+  {
+    scoreCategory: '동아리 활동 보고서',
+    reason: '2회차 활동보고서',
+    amount: 0.001,
+    createdAt: '2025-03-31 16:02:31',
+  },
+  {
+    scoreCategory: '전동대회',
+    reason: '3월 전동대회 참여',
+    amount: 1.0,
+    createdAt: '2025-04-01 11:40:36',
+  },
+  {
+    scoreCategory: '전동대회',
+    reason: '4월 전동대회 참여',
+    amount: 1.0,
+    createdAt: '2025-04-28 19:44:04',
+  },
+  {
+    scoreCategory: '동아리 활동 보고서',
+    reason: '3회차 활동보고서',
+    amount: 4.615,
+    createdAt: '2025-04-30 14:56:26',
+  },
+];
+
+export const Basic: StoryObj<typeof PrimitiveMeta> = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>날짜</TableHead>
+          <TableHead>카테고리</TableHead>
+          <TableHead>점수</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((row, i) => (
+          <TableRow key={i}>
+            <TableCell>{row.createdAt}</TableCell>
+            <TableCell>{row.scoreCategory}</TableCell>
+            <TableCell>{row.amount.toFixed(3)}점</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};

src/shared/ui/Table/Table.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+export type Props = React.HTMLAttributes<HTMLTableElement> & {
+  /**
+   * Optional custom className for additional styling.
+   */
+  className?: string;
+
+  /**
+   * Table content, usually composed of `<TableHeader>`, `<TableBody>`, etc.
+   */
+  children?: React.ReactNode;
+};
+export function Table({ className, children, ...props }: Props) {
+  return (
+    <div
+      className={cn('no-scrollbar relative w-full overflow-auto rounded-md border border-gray-100')}
+    >
+      <table className={cn('w-full table-fixed border-collapse text-sm', className)} {...props}>
+        {children}
+      </table>
+    </div>
+  );
+}

src/shared/ui/Table/TableBody.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+export type Props = React.HTMLAttributes<HTMLTableSectionElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function TableBody({ className, children, ...props }: Props) {
+  return (
+    <tbody className={cn('bg-white', className)} {...props}>
+      {children}
+    </tbody>
+  );
+}

src/shared/ui/Table/TableCell.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+import { Body2 } from '../Typography';
+
+export type Props = React.TdHTMLAttributes<HTMLTableCellElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function TableCell({ className, children, ...props }: Props) {
+  return (
+    <td className={cn('px-4 py-2 align-middle md:px-4', className)} {...props}>
+      <Body2 className="whitespace-pre-wrap text-gray-400" weight="normal">
+        {children}
+      </Body2>
+    </td>
+  );
+}

src/shared/ui/Table/TableHead.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+import { Body2 } from '../Typography';
+
+export type Props = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function TableHead({ className, children, ...props }: Props) {
+  return (
+    <th
+      className={cn('h-10 px-4 py-2 text-left align-middle whitespace-nowrap', className)}
+      {...props}
+    >
+      <Body2 className="text-gray-700">{children}</Body2>
+    </th>
+  );
+}

src/shared/ui/Table/TableHeader.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+export type Props = React.HTMLAttributes<HTMLTableSectionElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function TableHeader({ className, children, ...props }: Props) {
+  return (
+    <thead className={cn('bg-gray-50', className)} {...props}>
+      {children}
+    </thead>
+  );
+}

src/shared/ui/Table/TableRow.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/core';
+
+export type Props = React.HTMLAttributes<HTMLTableRowElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function TableRow({ className, children, ...props }: Props) {
+  return (
+    <tr className={cn('border-b border-gray-200 last:border-0', className)} {...props}>
+      {children}
+    </tr>
+  );
+}

src/shared/ui/Table/index.ts

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