feat: checkbox 생성

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

Hide file tree

Showing 9 changed files with 107 additions and 20 deletions.
diff --git a/packages/wow-ui/src/components/Table/Table.stories.tsx b/packages/wow-ui/src/components/Table/Table.stories.tsx
@@ -149,3 +149,31 @@ export const Primary: Story = {
     );
   },
 };
+
+export const CheckableTable: Story = {
+  render: () => {
+    return (
+      <TableContainer>
+        <Table variant="checkable">
+          <TableRow>
+            <TableHeader>학번</TableHeader>
+            <TableHeader>이름</TableHeader>
+            <TableHeader>전화번호</TableHeader>
+          </TableRow>
+          <TableBody>
+            <TableRow>
+              <TableCell>C000000</TableCell>
+              <TableCell>가나다</TableCell>
+              <TableCell>0100000000</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>C000000</TableCell>
+              <TableCell>가나다</TableCell>
+              <TableCell>0100000000</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    );
+  },
+};
diff --git a/packages/wow-ui/src/components/Table/Table.tsx b/packages/wow-ui/src/components/Table/Table.tsx
@@ -1,24 +1,32 @@
 import { styled } from "@styled-system/jsx";
-import type { StyleProps } from "@styled-system/types";
 import type { CSSProperties, PropsWithChildren } from "react";
 import { forwardRef } from "react";
 
+import { TableVariantContext } from "@/components/Table/context/TableVariantContext";
+import useCheckTable from "@/hooks/useCheckTableContext";
+
 interface TableProps extends PropsWithChildren {
   style?: CSSProperties;
+  variant?: "default" | "checkable";
+  onChange?: () => void;
+  value?: string;
 }
 
 const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
-  const { children, ...rest } = props;
+  const { children, variant, onChange, value, ...rest } = props;
+  const context = useCheckTable({ variant, value, onChange });
   return (
-    <styled.table
-      aria-labelledby="table"
-      borderCollapse="collapse"
-      ref={ref}
-      width="100%"
-      {...rest}
-    >
-      {children}
-    </styled.table>
+    <TableVariantContext.Provider value={context}>
+      <styled.table
+        aria-labelledby="table"
+        borderCollapse="collapse"
+        ref={ref}
+        width="100%"
+        {...rest}
+      >
+        {children}
+      </styled.table>
+    </TableVariantContext.Provider>
   );
 });
 

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

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

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

diff --git a/packages/wow-ui/src/components/Table/TableRow.tsx b/packages/wow-ui/src/components/Table/TableRow.tsx
@@ -1,11 +1,19 @@
 import { styled } from "@styled-system/jsx";
-import type { PropsWithChildren } from "react";
-import { forwardRef } from "react";
-interface TableRowProps extends PropsWithChildren {}
+import type { CSSProperties, PropsWithChildren } from "react";
+import { forwardRef, useId } from "react";
+
+import Checkbox from "@/components/Checkbox";
+import { useTableVariantContext } from "@/components/Table/context/TableVariantContext";
+import TableCell from "@/components/Table/TableCell";
+interface TableRowProps extends PropsWithChildren {
+  style?: CSSProperties;
+}
 
 const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   (props, ref) => {
     const { children } = props;
+    const id = useId();
+    const { variant } = useTableVariantContext();
     return (
       <styled.tr
         color="textBlack"
@@ -15,6 +23,11 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
         textStyle="body2"
         {...props}
       >
+        {variant === "checkable" && (
+          <TableCell style={{ width: "43px" }}>
+            <Checkbox value={id} />
+          </TableCell>
+        )}
         {children}
       </styled.tr>
     );

diff --git a/packages/wow-ui/src/components/Table/context/TableVariantContext.ts b/packages/wow-ui/src/components/Table/context/TableVariantContext.ts
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+import type useCheckTable from "@/hooks/useCheckTableContext";
+import useSafeContext from "@/hooks/useSafeContext";
+
+export const TableVariantContext = createContext<ReturnType<
+  typeof useCheckTable
+> | null>(null);
+
+export const useTableVariantContext = () => {
+  const context = useSafeContext(TableVariantContext);
+  return context;
+};
diff --git a/packages/wow-ui/src/components/Table/index.tsx b/packages/wow-ui/src/components/Table/index.tsx
@@ -0,0 +1 @@
+export * from "./Table";
diff --git a/packages/wow-ui/src/hooks/useCheckTableContext.ts b/packages/wow-ui/src/hooks/useCheckTableContext.ts
@@ -0,0 +1,17 @@
+interface CheckTableContextProps {
+  variant?: "default" | "checkable";
+  value?: string;
+  onChange?: () => void;
+}
+//한가지 역할을 정해주자. check된 친구 누구인지 관리해주는 훅임
+const useCheckTable = ({
+  variant,
+  value,
+  onChange,
+}: CheckTableContextProps) => {
+  if (variant === "default") return { variant };
+
+  return { variant, value, onChange };
+};
+
+export default useCheckTable;