From cdb939a70b8bd2c98c3c2523f9e1182090f24fc7 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 9 Nov 2024 17:26:41 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20context=EA=B0=80=20=EC=A1=B4?= =?UTF-8?q?=EC=9E=AC=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=84=EB=8F=84=20use?= =?UTF-8?q?Context=20=EC=97=90=EB=9F=AC=EA=B0=80=20=EB=B0=9C=EC=83=9D?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Table/Table.stories.tsx | 2 +- .../src/components/Table/TableContext.ts | 19 +++++++++++++++---- packages/wow-ui/src/components/Table/Td.tsx | 14 ++++++++++---- 3 files changed, 26 insertions(+), 9 deletions(-) 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..4ac80247 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,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(), + showCheckbox: false, + rowValues: new Set(), + handleRowCheckboxChange: () => {}, + handleHeaderCheckboxChange: () => {}, + setRowValues: () => {}, + rowValue: 0, + }; + else { + return context; + } }; export const TableCheckedContext = createContext(0); 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 ( Date: Sat, 9 Nov 2024 17:31:41 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20chagneset=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/eighty-cheetahs-kiss.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eighty-cheetahs-kiss.md 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 문제를 해결해요 From 3f998a8c07348d5c2f32f115e0bffef78423e8a4 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 9 Nov 2024 17:38:40 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20rowValue=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EA=B0=92=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EA=B8=B0=20=EB=95=8C=EB=AC=B8=EC=97=90=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Table/TableContext.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/wow-ui/src/components/Table/TableContext.ts b/packages/wow-ui/src/components/Table/TableContext.ts index 4ac80247..e8b7900c 100644 --- a/packages/wow-ui/src/components/Table/TableContext.ts +++ b/packages/wow-ui/src/components/Table/TableContext.ts @@ -23,7 +23,6 @@ export const useTableContext = () => { handleRowCheckboxChange: () => {}, handleHeaderCheckboxChange: () => {}, setRowValues: () => {}, - rowValue: 0, }; else { return context; From b797e095ee6d790e40075de4341ed04f2cb04c02 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sun, 24 Nov 2024 22:31:22 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Table/TableContext.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Table/TableContext.ts b/packages/wow-ui/src/components/Table/TableContext.ts index e8b7900c..1a55a1dd 100644 --- a/packages/wow-ui/src/components/Table/TableContext.ts +++ b/packages/wow-ui/src/components/Table/TableContext.ts @@ -24,9 +24,7 @@ export const useTableContext = () => { handleHeaderCheckboxChange: () => {}, setRowValues: () => {}, }; - else { - return context; - } + return context; }; export const TableCheckedContext = createContext(0);