Feat/table re

ui-kit/src/components/Table/TableBody.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TableProps } from './index';
+
+const TableBody = ({ children }: TableProps) => {
+  return (
+    <tbody className={classnames('lubycon-table__body', 'lubycon-font-weight--regular')}>
+      {children}
+    </tbody>
+  );
+};
+
+export default TableBody;

ui-kit/src/components/Table/TableCell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TableProps } from './index';
+import { useTableHeadContext } from './TableHead';
+
+interface TableCellProps extends TableProps {
+  as?: 'th' | 'td';
+}
+
+const TableCell = ({ children, align = 'left', as }: TableCellProps) => {
+  const { variant } = useTableHeadContext();
+  const isHeadCell = variant === 'head' ? 'th' : 'td';
+  const Component = as ?? isHeadCell;
+
+  return (
+    <Component className={classnames("lubycon-table__cell", `lubycon-table--align-${align}`)}>
+      {children}
+    </Component>
+  );
+};
+
+export default TableCell;

ui-kit/src/components/Table/TableHead.tsx

@@ -0,0 +1,21 @@
+import React, { createContext } from 'react';
+import { useContext } from 'react';
+import { TableProps } from './index';
+
+const TableHeadContext = createContext({ variant: '' });
+
+const TableHead = ({ children }: TableProps) => {
+  return (
+    <TableHeadContext.Provider value={{ variant: 'head' }}>
+      <thead className="lubycon-table__head">
+        {children}
+      </thead>
+    </TableHeadContext.Provider>
+  );
+};
+
+export function useTableHeadContext() {
+  return useContext(TableHeadContext);
+}
+
+export default TableHead;

ui-kit/src/components/Table/TableRow.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TableProps } from './index';
+
+const TableRow = ({ children }: TableProps) => {
+  return (
+    <tr className={classnames('lubycon-table__row')}>
+      {children}
+    </tr>
+  );
+};
+
+export default TableRow;

ui-kit/src/components/Table/index.tsx

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+
+export interface TableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'align' | 'bgcolor'> {
+  align?: 'left' | 'center' | 'right';
+}
+
+const Table = ({ children }: TableProps) => {
+  return <table className={classnames('lubycon-table', 'lubycon-shadow--2')}>{children}</table>;
+};
+
+export default Table;
+export { default as TableHead } from './TableHead';
+export { default as TableBody } from './TableBody';
+export { default as TableRow } from './TableRow';
+export { default as TableCell } from './TableCell';

ui-kit/src/index.ts

@@ -25,6 +25,7 @@ export { default as ProgressBar } from './components/ProgressBar';
 export { default as Accordion } from './components/Accordion';
 export { default as Tag } from './components/Tag';
 export { default as Modal, ModalHeader, ModalContent, ModalFooter } from './components/Modal';
+export { default as Table, TableHead, TableBody, TableRow, TableCell } from './components/Table';
 export { Portal } from './contexts/Portal';
 export { useToast } from './contexts/Toast';
 export { useSnackbar } from './contexts/Snackbar';

ui-kit/src/sass/components/_Table.scss

@@ -0,0 +1,30 @@
+.lubycon-table {
+  word-break: break-all;
+	border-collapse: collapse;
+  color: get-color('gray100');
+
+  &__head {
+    background-color: get-color('gray20');
+  }
+  &__body {
+    background-color: get-color('gray10');
+    .lubycon-table__row:not(:last-child) {
+      border-bottom: 1px solid get-color('gray20');
+    }
+  }
+  &__cell {
+    padding: 8px 20px;
+  }
+
+  &--align {
+    &-left {
+      text-align: left;
+    }
+    &-center {
+      text-align: center;
+    }
+    &-right {
+      text-align: right;
+    }
+  }
+}

ui-kit/src/sass/components/_index.scss

@@ -20,3 +20,4 @@
 @import './ProgressBar';
 @import './Tag';
 @import './Modal';
+@import './Table';

ui-kit/src/stories/Table.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import { Table, TableHead, TableBody, TableRow, TableCell } from 'src';
+
+export default {
+  title: 'Lubycon UI Kit/Table',
+} as Meta;
+
+const header = ['제목', '제목', '제목', '제목', '제목'];
+const contents = ['내용', '내용을 입력하세요', '내용', '내용을 입력하세요', '내용'];
+const iterator = [undefined, undefined, undefined, undefined, undefined, undefined];
+
+export const Default = () => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {header.map((name, i) => (
+            <TableCell key={`th-${i}`}>{name}</TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {iterator.map((v, rowIdx) => (
+          <TableRow key={`tbody-row-${rowIdx}`}>
+            {contents.map((content, contentIdx) => (
+              <TableCell key={`td-${contentIdx}`}>{content}</TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};