fix: context가 존재하지 않아도 useContext 에러가 발생하지 않도록 수정

GDSC-Hongik · Nov 9, 2024 · cdb939a · cdb939a
1 parent b3bd675
commit cdb939a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/packages/wow-ui/src/components/Table/Table.stories.tsx b/packages/wow-ui/src/components/Table/Table.stories.tsx
@@ -94,7 +94,7 @@ export const Primary: Story = {
         <Table.Tbody>
           {data.map(({ name, studyId, id }) => {
             return (
-              <Table.Tr key={id} value={id}>
+              <Table.Tr key={id}>
                 <Table.Td>{name}</Table.Td>
                 <Table.Td>{studyId}</Table.Td>
               </Table.Tr>

diff --git a/packages/wow-ui/src/components/Table/TableContext.ts b/packages/wow-ui/src/components/Table/TableContext.ts
@@ -1,8 +1,7 @@
 import type { Dispatch } from "react";
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 import type { TableProps } from "@/components/Table/Table";
-import useSafeContext from "@/hooks/useSafeContext";
 import type useTableCheckState from "@/hooks/useTableCheckState";
 
 export const TableContext = createContext<
@@ -15,8 +14,20 @@ export const TableContext = createContext<
 >(null);
 
 export const useTableContext = () => {
-  const context = useSafeContext(TableContext);
-  return context;
+  const context = useContext(TableContext);
+  if (!context)
+    return {
+      selectedRows: new Set<number>(),
+      showCheckbox: false,
+      rowValues: new Set<number>(),
+      handleRowCheckboxChange: () => {},
+      handleHeaderCheckboxChange: () => {},
+      setRowValues: () => {},
+      rowValue: 0,
+    };
+  else {
+    return context;
+  }
 };
 
 export const TableCheckedContext = createContext<number | undefined>(0);
diff --git a/packages/wow-ui/src/components/Table/Td.tsx b/packages/wow-ui/src/components/Table/Td.tsx
@@ -1,13 +1,12 @@
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { CSSProperties, PropsWithChildren, Ref } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useContext, useEffect, useState } from "react";
 
 import {
   TableCheckedContext,
   useTableContext,
 } from "@/components/Table/TableContext";
-import useSafeContext from "@/hooks/useSafeContext";
 
 interface TableCellProps extends PropsWithChildren {
   style?: CSSProperties;
@@ -18,8 +17,15 @@ const Td = forwardRef(
   (props: TableCellProps, ref: Ref<HTMLTableCellElement>) => {
     const { children, ...rest } = props;
     const { selectedRows } = useTableContext();
-    const rowValue = useSafeContext(TableCheckedContext);
-    const isSelected = selectedRows.has(rowValue);
+    const [isSelected, setIsSelected] = useState(false);
+
+    const rowValue = useContext(TableCheckedContext);
+    useEffect(() => {
+      if (rowValue) {
+        const value = selectedRows.has(rowValue);
+        setIsSelected(value);
+      }
+    }, [rowValue, selectedRows]);
 
     return (
       <styled.td