diff --git a/.changeset/eighty-cheetahs-kiss.md b/.changeset/eighty-cheetahs-kiss.md
new file mode 100644
index 00000000..571d77f1
--- /dev/null
+++ b/.changeset/eighty-cheetahs-kiss.md
@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Table 컴포넌트의 context 문제를 해결해요
diff --git a/packages/wow-ui/src/components/Table/Table.stories.tsx b/packages/wow-ui/src/components/Table/Table.stories.tsx
index f50d6f12..cadcc443 100644
--- 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 = {
{data.map(({ name, studyId, id }) => {
return (
-
+
{name}
{studyId}
diff --git a/packages/wow-ui/src/components/Table/TableContext.ts b/packages/wow-ui/src/components/Table/TableContext.ts
index c9a9733b..1a55a1dd 100644
--- 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,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(),
+ showCheckbox: false,
+ rowValues: new Set(),
+ handleRowCheckboxChange: () => {},
+ handleHeaderCheckboxChange: () => {},
+ setRowValues: () => {},
+ };
return context;
};
diff --git a/packages/wow-ui/src/components/Table/Td.tsx b/packages/wow-ui/src/components/Table/Td.tsx
index 9779cc9e..3f0ac81b 100644
--- 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) => {
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 (