[Fix] : Table 컴포넌트의 상위 context가 존재하지 않아도 useContext 에러가 발생하지 않도록 수정해요. (

#174)

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

* feat: chagneset 작성

* fix: rowValue 기본 값 사용하지 않기 때문에 제거

* fix: 코드리뷰 반영

.changeset/eighty-cheetahs-kiss.md

@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Table 컴포넌트의 context 문제를 해결해요

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>

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,7 +14,16 @@ export const TableContext = createContext<
 >(null);
 
 export const useTableContext = () => {
-  const context = useSafeContext(TableContext);
+  const context = useContext(TableContext);
+  if (!context)
+    return {
+      selectedRows: new Set<number>(),
+      showCheckbox: false,
+      rowValues: new Set<number>(),
+      handleRowCheckboxChange: () => {},
+      handleHeaderCheckboxChange: () => {},
+      setRowValues: () => {},
+    };
   return context;
 };
 

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