From cdb939a70b8bd2c98c3c2523f9e1182090f24fc7 Mon Sep 17 00:00:00 2001
From: Eugene Kim <eugene02876@gmail.com>
Date: Sat, 9 Nov 2024 17:26:41 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20context=EA=B0=80=20=EC=A1=B4=EC=9E=AC?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=84=EB=8F=84=20useContext?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=EA=B0=80=20=EB=B0=9C=EC=83=9D=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=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 = {
         <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
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<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
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<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