feat: implement Table component

app/ui/view/molecule/table/index.tsx

@@ -0,0 +1,8 @@
+import { TableHeader } from './table-header';
+import { TableRoot } from './table-root';
+
+const Table = Object.assign(TableRoot, {
+  Header: TableHeader,
+});
+
+export default Table;

app/ui/view/molecule/table/table-header.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+type TableHeaderProps = {
+  children: ReactNode;
+};
+export function TableHeader({ children }: TableHeaderProps) {
+  return (
+    <div className="text-light-blue-6 leading-4 text-lg font-bold bg-light-blue-1 py-5 rounded-[100px]">{children}</div>
+  );
+}

app/ui/view/molecule/table/table-root.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type TableRootProps = {
+  children: ReactNode;
+};
+
+export function TableRoot({ children }: TableRootProps) {
+  return <div className="flex flex-col gap-2.5 w-[800px]">{children}</div>;
+}

app/ui/view/molecule/table/table.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Table from '.';
+import Grid from '../grid';
+import List from '../list';
+import { GridColumn } from '../grid/grid-column';
+import Button from '../../atom/button/button';
+
+const meta = {
+  title: 'ui/view/molecule/Table',
+  component: Table,
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+export const TakenLectureTable: StoryObj = {
+  render: () => {
+    const headerInfo = ['과목코드', '과목명', '학점'];
+    const lectures = [
+      ['HEC01208', '데이터구조와알고리즘1', '3'],
+      ['HEC01208', '데이터구조와알고리즘1', '3'],
+      ['HEC01208', '데이터구조와알고리즘1', '3'],
+    ];
+    return (
+      <main>
+        <Table>
+          <Table.Header>
+            <Grid cols={3}>
+              {headerInfo.map((info) => (
+                <Grid.Column key={info}>{info}</Grid.Column>
+              ))}
+            </Grid>
+          </Table.Header>
+          <List>
+            {lectures.map((lecture, index) => (
+              <List.Row key={index}>
+                <Grid cols={3}>
+                  {lecture.map((info) => (
+                    <Grid.Column key={info}>{info}</Grid.Column>
+                  ))}
+                </Grid>
+              </List.Row>
+            ))}
+          </List>
+        </Table>
+      </main>
+    );
+  },
+};
+
+export const ButtonLectureTable: StoryObj = {
+  render: () => {
+    const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+    const lectures = [
+      ['2022', '2학기', 'HEC01208', '데이터구조와알고리즘1', '3'],
+      ['2022', '2학기', 'HEC01208', '데이터구조와알고리즘1', '3'],
+      ['2022', '2학기', 'HEC01208', '데이터구조와알고리즘1', '3'],
+    ];
+    return (
+      <main>
+        <Table>
+          <Table.Header>
+            <Grid cols={6}>
+              {headerInfo.map((info) => (
+                <Grid.Column key={info}>{info}</Grid.Column>
+              ))}
+            </Grid>
+          </Table.Header>
+          <List>
+            {lectures.map((lecture, index) => (
+              <List.Row key={index}>
+                <Grid cols={6}>
+                  {lecture.map((info) => (
+                    <Grid.Column key={info}>{info}</Grid.Column>
+                  ))}
+                  <GridColumn>
+                    <Button variant="delete" label="삭제" />
+                  </GridColumn>
+                </Grid>
+              </List.Row>
+            ))}
+          </List>
+        </Table>
+      </main>
+    );
+  },
+};