1 files changed, 41 insertions, 45 deletions

diff --git a/lib/form-list/table/formLists-table.tsx b/lib/form-list/table/formLists-table.tsx
index a9a56338..ebe59063 100644
--- a/lib/form-list/table/formLists-table.tsx
+++ b/lib/form-list/table/formLists-table.tsx
@@ -28,9 +28,26 @@ interface ItemsTableProps {
 
 export function FormListsTable({ promises }: ItemsTableProps) {
   const { featureFlags } = useFeatureFlags()
-
-  const [{ data, pageCount }] =
-    React.use(promises)
+  
+  // 1. 데이터 로딩 상태 관리 추가
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [tableData, setTableData] = React.useState<{
+    data: FormListsView[]
+    pageCount: number
+  }>({ data: [], pageCount: 0 })
+
+  // 2. Promise 해결을 useEffect로 처리
+  React.useEffect(() => {
+    promises
+      .then(([result]) => {
+        setTableData(result)
+        setIsLoading(false)
+      })
+      // .catch((error) => {
+      //   console.error('Failed to load table data:', error)
+      //   setIsLoading(false)
+      // })
+  }, [promises])
 
   const [rowAction, setRowAction] =
     React.useState<DataTableRowAction<FormListsView> | null>(null)
@@ -40,32 +57,8 @@ export function FormListsTable({ promises }: ItemsTableProps) {
     [setRowAction]
   )
 
-  /**
-   * This component can render either a faceted filter or a search filter based on the `options` prop.
-   *
-   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
-   *
-   * Each `option` object has the following properties:
-   * @prop {string} label - The label for the filter option.
-   * @prop {string} value - The value for the filter option.
-   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
-   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
-   */
-  const filterFields: DataTableFilterField<FormListsView>[] = [
+  const filterFields: DataTableFilterField<FormListsView>[] = []
 
-   
-  ]
-
-  /**
-   * Advanced filter fields for the data table.
-   * These fields provide more complex filtering options compared to the regular filterFields.
-   *
-   * Key differences from regular filterFields:
-   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
-   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
-   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
-   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
-   */
   const advancedFilterFields: DataTableAdvancedFilterField<FormListsView>[] = [
     {
       id: "projectCode",
@@ -91,40 +84,39 @@ export function FormListsTable({ promises }: ItemsTableProps) {
       id: "tagTypeLabel",
       label: "TAG TYPE ID",
       type: "text",
-  
     },
     {
       id: "classLabel",
       label: "Class Description",
       type: "text",
- 
+    },
+    {
+      id: "ep",
+      label: "EP",
+      type: "text",
     },
     {
       id: "remark",
       label: "remark",
       type: "text",
- 
     },
-  
     {
       id: "createdAt",
       label: "Created At",
       type: "date",
-
     },
     {
       id: "updatedAt",
       label: "Updated At",
       type: "date",
-
     },
   ]
 
-
+  // 3. 로딩 중이거나 데이터가 없을 때 처리
   const { table } = useDataTable({
-    data,
+    data: tableData.data,
     columns,
-    pageCount,
+    pageCount: tableData.pageCount,
     filterFields,
     enablePinning: true,
     enableAdvancedFilter: true,
@@ -137,13 +129,19 @@ export function FormListsTable({ promises }: ItemsTableProps) {
     clearOnDefault: true,
   })
 
+  // 4. 로딩 상태 표시
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-32">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        <span className="ml-2">Loading...</span>
+      </div>
+    )
+  }
+
   return (
     <>
-      <DataTable
-        table={table}
-
-      >
-
+      <DataTable table={table}>
         <DataTableAdvancedToolbar
           table={table}
           filterFields={advancedFilterFields}
@@ -151,14 +149,12 @@ export function FormListsTable({ promises }: ItemsTableProps) {
         >
           <FormListsTableToolbarActions table={table} />
         </DataTableAdvancedToolbar>
-
       </DataTable>
       <ViewMetas
         open={rowAction?.type === "items"}
         onOpenChange={() => setRowAction(null)}
         form={rowAction?.row.original ?? null}
       />
-
     </>
   )
-}
+}
\ No newline at end of file