From b057271538c011f55ab4e1e313ded448cacebc0d Mon Sep 17 00:00:00 2001
From: KIM HYUNJUN <93kimhyunjun@gmail.com>
Date: Wed, 10 Mar 2021 23:50:56 +0900
Subject: [PATCH] Feat/table re (#56)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* chore: 컴포넌트, 스타일 import
* feat(ui-kit): 테이블 컴포넌트 추가
* chore: 린트 픽스
---
ui-kit/src/components/Table/TableBody.tsx | 13 +++++++++
ui-kit/src/components/Table/TableCell.tsx | 22 +++++++++++++++
ui-kit/src/components/Table/TableHead.tsx | 21 ++++++++++++++
ui-kit/src/components/Table/TableRow.tsx | 13 +++++++++
ui-kit/src/components/Table/index.tsx | 16 +++++++++++
ui-kit/src/index.ts | 1 +
ui-kit/src/sass/components/_Table.scss | 30 ++++++++++++++++++++
ui-kit/src/sass/components/_index.scss | 1 +
ui-kit/src/stories/Table.stories.tsx | 34 +++++++++++++++++++++++
9 files changed, 151 insertions(+)
create mode 100644 ui-kit/src/components/Table/TableBody.tsx
create mode 100644 ui-kit/src/components/Table/TableCell.tsx
create mode 100644 ui-kit/src/components/Table/TableHead.tsx
create mode 100644 ui-kit/src/components/Table/TableRow.tsx
create mode 100644 ui-kit/src/components/Table/index.tsx
create mode 100644 ui-kit/src/sass/components/_Table.scss
create mode 100644 ui-kit/src/stories/Table.stories.tsx
diff --git a/ui-kit/src/components/Table/TableBody.tsx b/ui-kit/src/components/Table/TableBody.tsx
new file mode 100644
index 00000000..e1c521c2
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+export default TableBody;
diff --git a/ui-kit/src/components/Table/TableCell.tsx b/ui-kit/src/components/Table/TableCell.tsx
new file mode 100644
index 00000000..3c78d9f1
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+export default TableCell;
diff --git a/ui-kit/src/components/Table/TableHead.tsx b/ui-kit/src/components/Table/TableHead.tsx
new file mode 100644
index 00000000..9aea8007
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+};
+
+export function useTableHeadContext() {
+ return useContext(TableHeadContext);
+}
+
+export default TableHead;
diff --git a/ui-kit/src/components/Table/TableRow.tsx b/ui-kit/src/components/Table/TableRow.tsx
new file mode 100644
index 00000000..2906dfef
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+export default TableRow;
diff --git a/ui-kit/src/components/Table/index.tsx b/ui-kit/src/components/Table/index.tsx
new file mode 100644
index 00000000..5779ba2a
--- /dev/null
+++ b/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, 'align' | 'bgcolor'> {
+ align?: 'left' | 'center' | 'right';
+}
+
+const Table = ({ children }: TableProps) => {
+ return ;
+};
+
+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';
diff --git a/ui-kit/src/index.ts b/ui-kit/src/index.ts
index 4acd8b92..a14ea2b8 100644
--- a/ui-kit/src/index.ts
+++ b/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';
diff --git a/ui-kit/src/sass/components/_Table.scss b/ui-kit/src/sass/components/_Table.scss
new file mode 100644
index 00000000..67177956
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss
index dedba876..446b9147 100644
--- a/ui-kit/src/sass/components/_index.scss
+++ b/ui-kit/src/sass/components/_index.scss
@@ -20,3 +20,4 @@
@import './ProgressBar';
@import './Tag';
@import './Modal';
+@import './Table';
diff --git a/ui-kit/src/stories/Table.stories.tsx b/ui-kit/src/stories/Table.stories.tsx
new file mode 100644
index 00000000..03578312
--- /dev/null
+++ b/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 (
+
+
+
+ {header.map((name, i) => (
+ {name}
+ ))}
+
+
+
+ {iterator.map((v, rowIdx) => (
+
+ {contents.map((content, contentIdx) => (
+ {content}
+ ))}
+
+ ))}
+
+
+ );
+};