feat: Table 기본 CSS 적용

GDSC-Hongik · Aug 11, 2024 · 14977fe · 14977fe
1 parent de68ea5
commit 14977fe
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 27 deletions.
diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -35,11 +35,31 @@
       "require": "./dist/Table.cjs",
       "import": "./dist/Table.js"
     },
+    "./TableBody": {
+      "types": "./dist/components/Table/TableBody.d.ts",
+      "require": "./dist/TableBody.cjs",
+      "import": "./dist/TableBody.js"
+    },
+    "./TableCell": {
+      "types": "./dist/components/Table/TableCell.d.ts",
+      "require": "./dist/TableCell.cjs",
+      "import": "./dist/TableCell.js"
+    },
     "./TableContainer": {
       "types": "./dist/components/Table/TableContainer.d.ts",
       "require": "./dist/TableContainer.cjs",
       "import": "./dist/TableContainer.js"
     },
+    "./TableHeader": {
+      "types": "./dist/components/Table/TableHeader.d.ts",
+      "require": "./dist/TableHeader.cjs",
+      "import": "./dist/TableHeader.js"
+    },
+    "./TableRow": {
+      "types": "./dist/components/Table/TableRow.d.ts",
+      "require": "./dist/TableRow.cjs",
+      "import": "./dist/TableRow.js"
+    },
     "./Switch": {
       "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",

diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js
@@ -23,7 +23,11 @@ export default {
     TextField: "./src/components/TextField",
     TextButton: "./src/components/TextButton",
     Table: "./src/components/Table",
+    TableBody: "./src/components/Table/TableBody",
+    TableCell: "./src/components/Table/TableCell",
     TableContainer: "./src/components/Table/TableContainer",
+    TableHeader: "./src/components/Table/TableHeader",
+    TableRow: "./src/components/Table/TableRow",
     Switch: "./src/components/Switch",
     Stepper: "./src/components/Stepper",
     BlueSpinner: "./src/components/Spinner/BlueSpinner",

diff --git a/packages/wow-ui/src/components/Table/Table.stories.tsx b/packages/wow-ui/src/components/Table/Table.stories.tsx
@@ -127,28 +127,21 @@ export const Primary: Story = {
     return (
       <TableContainer>
         <Table>
-          <TableHeader>
-            <TableRow>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-            </TableRow>
-          </TableHeader>
+          <TableRow>
+            <TableHeader>학번</TableHeader>
+            <TableHeader>이름</TableHeader>
+            <TableHeader>전화번호</TableHeader>
+          </TableRow>
           <TableBody>
             <TableRow>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
+              <TableCell>C000000</TableCell>
+              <TableCell>가나다</TableCell>
+              <TableCell>0100000000</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
-              <TableCell>하이루</TableCell>
+              <TableCell>C000000</TableCell>
+              <TableCell>가나다</TableCell>
+              <TableCell>0100000000</TableCell>
             </TableRow>
           </TableBody>
         </Table>

diff --git a/packages/wow-ui/src/components/Table/Table.tsx b/packages/wow-ui/src/components/Table/Table.tsx
@@ -1,17 +1,21 @@
 import { styled } from "@styled-system/jsx";
-import type { PropsWithChildren } from "react";
+import type { StyleProps } from "@styled-system/types";
+import type { CSSProperties, PropsWithChildren } from "react";
 import { forwardRef } from "react";
 
-interface TableProps extends PropsWithChildren {}
+interface TableProps extends PropsWithChildren {
+  style?: CSSProperties;
+}
 
 const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
-  const { children } = props;
+  const { children, ...rest } = props;
   return (
     <styled.table
       aria-labelledby="table"
       borderCollapse="collapse"
       ref={ref}
       width="100%"
+      {...rest}
     >
       {children}
     </styled.table>

diff --git a/packages/wow-ui/src/components/Table/TableBody.tsx b/packages/wow-ui/src/components/Table/TableBody.tsx
@@ -7,7 +7,7 @@ const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   (props, ref) => {
     const { children } = props;
     return (
-      <styled.tbody ref={ref} {...props}>
+      <styled.tbody ref={ref} {...props} textAlign="start">
         {children}
       </styled.tbody>
     );

diff --git a/packages/wow-ui/src/components/Table/TableCell.tsx b/packages/wow-ui/src/components/Table/TableCell.tsx
@@ -7,7 +7,7 @@ const TableCell = forwardRef<HTMLTableDataCellElement, TableCellProps>(
   (props, ref) => {
     const { children } = props;
     return (
-      <styled.td ref={ref} {...props}>
+      <styled.td maxWidth="100%" paddingX="sm" ref={ref} {...props}>
         {children}
       </styled.td>
     );

diff --git a/packages/wow-ui/src/components/Table/TableContainer.tsx b/packages/wow-ui/src/components/Table/TableContainer.tsx
@@ -1,8 +1,10 @@
 import { styled } from "@styled-system/jsx";
-import type { PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
 import { forwardRef } from "react";
 
-interface TableContainerProps extends PropsWithChildren {}
+interface TableContainerProps extends PropsWithChildren {
+  style?: CSSProperties;
+}
 
 const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
   (props, ref) => {

diff --git a/packages/wow-ui/src/components/Table/TableHeader.tsx b/packages/wow-ui/src/components/Table/TableHeader.tsx
@@ -6,7 +6,18 @@ const TableHeader = forwardRef<HTMLTableHeaderCellElement, TableHeaderProps>(
   (props, ref) => {
     const { children } = props;
     return (
-      <styled.th ref={ref} {...props}>
+      <styled.th
+        alignItems="center"
+        backgroundColor="backgroundAlternative"
+        color="sub"
+        height="44px"
+        letterSpacing="wider"
+        paddingX="sm"
+        ref={ref}
+        textAlign="start"
+        textStyle="label2"
+        {...props}
+      >
         {children}
       </styled.th>
     );

diff --git a/packages/wow-ui/src/components/Table/TableRow.tsx b/packages/wow-ui/src/components/Table/TableRow.tsx
@@ -7,7 +7,14 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   (props, ref) => {
     const { children } = props;
     return (
-      <styled.tr ref={ref} {...props}>
+      <styled.tr
+        color="textBlack"
+        height="44px"
+        minWidth="100%"
+        ref={ref}
+        textStyle="body2"
+        {...props}
+      >
         {children}
       </styled.tr>
     );