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 (