From bac0228d21b7195065e9cddcc327ae33659c7bcc Mon Sep 17 00:00:00 2001 From: dujinkim Date: Sun, 1 Jun 2025 13:52:21 +0000 Subject: (대표님) 20250601까지 작업사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/form-list/service.ts | 19 ++++---- lib/form-list/table/formLists-table.tsx | 86 ++++++++++++++++----------------- 2 files changed, 51 insertions(+), 54 deletions(-) (limited to 'lib/form-list') diff --git a/lib/form-list/service.ts b/lib/form-list/service.ts index d49dc5fc..10dfd640 100644 --- a/lib/form-list/service.ts +++ b/lib/form-list/service.ts @@ -11,8 +11,8 @@ import { countFormLists, selectFormLists } from "./repository"; import { projects } from "@/db/schema"; export async function getFormLists(input: GetFormListsSchema) { - return unstable_cache( - async () => { + // return unstable_cache( + // async () => { try { const offset = (input.page - 1) * input.perPage; const advancedTable = true; @@ -33,6 +33,7 @@ export async function getFormLists(input: GetFormListsSchema) { ilike(formListsView.formName, s), ilike(formListsView.tagTypeLabel, s), ilike(formListsView.classLabel, s), + ilike(formListsView.remark, s), ilike(formListsView.projectName, s), // 뷰 테이블의 projectName 사용 ilike(formListsView.projectCode, s), // 뷰 테이블의 projectCode 사용 ); @@ -81,11 +82,11 @@ export async function getFormLists(input: GetFormListsSchema) { // 에러 발생 시 디폴트 return { data: [], pageCount: 0 }; } - }, - [JSON.stringify(input)], // 캐싱 키 - { - revalidate: 3600, - tags: ["form-lists"], - } - )(); + // }, + // [JSON.stringify(input)], // 캐싱 키 + // { + // revalidate: 3600, + // tags: ["form-lists"], + // } + // )(); } \ No newline at end of file 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 | 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[] = [ + const filterFields: DataTableFilterField[] = [] - - ] - - /** - * 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[] = [ { 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 ( +
+
+ Loading... +
+ ) + } + return ( <> - - + - setRowAction(null)} form={rowAction?.row.original ?? null} /> - ) -} +} \ No newline at end of file -- cgit v1.2.3