refactor: Refactor table component and add new props

Myongji-Graduate · Feb 21, 2024 · 14cf989 · 14cf989
1 parent b0be474
commit 14cf989
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 56 deletions.
diff --git a/app/ui/view/molecule/grid/grid-root.tsx b/app/ui/view/molecule/grid/grid-root.tsx
@@ -1,10 +1,13 @@
 import { cva } from 'class-variance-authority';
 import { ReactNode } from 'react';
 
+export type ColType = 3 | 4 | 5 | 6;
+
 type GridRootProps = {
   children: ReactNode;
-  cols: 3 | 4 | 5 | 6;
+  cols: ColType;
 };
+
 export const GridVariants = cva('grid', {
   variants: {
     cols: {

diff --git a/app/ui/view/molecule/list/list-root.tsx b/app/ui/view/molecule/list/list-root.tsx
@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-type ListRootProps = {
-  children: ReactNode;
+type ListRootProps<T> = {
+  data: T[];
+  render: (item: T) => ReactNode;
 };
 
-export function ListRoot({ children }: ListRootProps) {
-  return <div className="rounded-2xl border-[1px] border-black-2 w-full">{children}</div>;
+export function ListRoot<T>({ data, render }: ListRootProps<T>) {
+  return <div className="rounded-2xl border-[1px] border-black-2 w-full">{data.map((item) => render(item))}</div>;
 }
diff --git a/app/ui/view/molecule/table/table-header.tsx b/app/ui/view/molecule/table/table-header.tsx
@@ -1,10 +1,19 @@
-import { ReactNode } from 'react';
+import Grid from '../grid';
+import { ColType } from '../grid/grid-root';
 
 type TableHeaderProps = {
-  children: ReactNode;
+  headerinfo: string[];
+  cols: ColType;
 };
-export function TableHeader({ children }: TableHeaderProps) {
+
+export function TableHeader({ cols, headerinfo }: TableHeaderProps) {
   return (
-    <div className="text-light-blue-6 leading-4 text-lg font-bold bg-light-blue-1 py-5 rounded-[100px]">{children}</div>
+    <div className="text-light-blue-6 leading-4 text-lg font-bold bg-light-blue-1 py-5 rounded-[100px]">
+      <Grid cols={cols}>
+        {headerinfo.map((info) => (
+          <Grid.Column key={info}>{info}</Grid.Column>
+        ))}
+      </Grid>
+    </div>
   );
 }
diff --git a/app/ui/view/molecule/table/table-root.tsx b/app/ui/view/molecule/table/table-root.tsx
@@ -1,9 +1,42 @@
-import { ReactNode } from 'react';
+import { TableHeader } from './table-header';
+import { ColType } from '../grid/grid-root';
+import List from '../list';
+import Grid from '../grid';
 
 type TableRootProps = {
-  children: ReactNode;
+  headerinfo: string[];
+  // cols: ColType;
+  data: string[][];
+  actionButton?: JSX.Element;
 };
 
-export function TableRoot({ children }: TableRootProps) {
-  return <div className="flex flex-col gap-2.5 w-[800px]">{children}</div>;
+function isCol(cols: number): cols is ColType {
+  if (cols === 3 || cols === 4 || cols === 5 || cols === 6) {
+    return true;
+  }
+  return false;
+}
+
+export function TableRoot({ data, headerinfo, actionButton }: TableRootProps) {
+  const cols = actionButton ? headerinfo.length + 1 : headerinfo.length;
+
+  const render = (item: string[]) => {
+    return (
+      <List.Row>
+        <Grid cols={isCol(cols) ? cols : 6}>
+          {item.map((info) => (
+            <Grid.Column key={info}>{info}</Grid.Column>
+          ))}
+          {actionButton ? <Grid.Column>{actionButton}</Grid.Column> : null}
+        </Grid>
+      </List.Row>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-2.5 w-[800px]">
+      <TableHeader headerinfo={headerinfo} cols={isCol(cols) ? cols : 6} />
+      <List data={data} render={render}></List>
+    </div>
+  );
 }
diff --git a/app/ui/view/molecule/table/table.stories.tsx b/app/ui/view/molecule/table/table.stories.tsx
@@ -20,28 +20,10 @@ export const TakenLectureTable: StoryObj = {
       ['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>
+        <Table data={lectures} headerinfo={headerInfo} />
       </main>
     );
   },
@@ -55,31 +37,10 @@ export const ButtonLectureTable: StoryObj = {
       ['2022', '2학기', 'HEC01208', '데이터구조와알고리즘1', '3'],
       ['2022', '2학기', 'HEC01208', '데이터구조와알고리즘1', '3'],
     ];
+    const actionButton = <Button variant="delete" label="삭제" />;
     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>
+        <Table headerinfo={headerInfo} data={lectures} actionButton={actionButton} />
       </main>
     );
   },