diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-01 02:53:18 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-01 02:53:18 +0000 |
| commit | d66d308169e559457878c02e3b0443da22693241 (patch) | |
| tree | 257b4d1d3345d2828e6ea8473938b5113d2ae733 /lib/information/table/information-table.tsx | |
| parent | 4ab3f7fd98f544244df972f3f333bbe3525d54f8 (diff) | |
(최겸) 정보시스템 인포메이션 기능 개발
Diffstat (limited to 'lib/information/table/information-table.tsx')
| -rw-r--r-- | lib/information/table/information-table.tsx | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/lib/information/table/information-table.tsx b/lib/information/table/information-table.tsx new file mode 100644 index 00000000..9fc4ec29 --- /dev/null +++ b/lib/information/table/information-table.tsx @@ -0,0 +1,148 @@ +"use client"
+
+import * as React from "react"
+import type {
+ DataTableAdvancedFilterField,
+ DataTableFilterField,
+ DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import type { PageInformation } from "@/db/schema/information"
+import { getInformationColumns } from "./information-table-columns"
+import { InformationTableToolbarActions } from "./information-table-toolbar-actions"
+import { AddInformationDialog } from "./add-information-dialog"
+import { UpdateInformationDialog } from "./update-information-dialog"
+import { DeleteInformationDialog } from "./delete-information-dialog"
+
+interface InformationTableProps {
+ promises: Promise<{
+ data: PageInformation[]
+ pageCount: number
+ total: number
+ }>
+}
+
+export function InformationTable({ promises }: InformationTableProps) {
+ const [rowAction, setRowAction] = React.useState<DataTableRowAction<PageInformation> | null>(null)
+ const [showAddDialog, setShowAddDialog] = React.useState(false)
+ const [showUpdateDialog, setShowUpdateDialog] = React.useState(false)
+ const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+
+ const { data, pageCount } = React.use(promises)
+
+ // 컬럼 설정
+ const columns = React.useMemo(
+ () => getInformationColumns({ setRowAction }),
+ [setRowAction]
+ )
+
+ const filterFields: DataTableFilterField<PageInformation>[] = []
+
+ // 고급 필터 필드 설정
+ const advancedFilterFields: DataTableAdvancedFilterField<PageInformation>[] = [
+ {
+ id: "pageCode",
+ label: "페이지 코드",
+ type: "text",
+ },
+ {
+ id: "pageName",
+ label: "페이지명",
+ type: "text",
+ },
+ {
+ id: "title",
+ label: "제목",
+ type: "text",
+ },
+ {
+ id: "isActive",
+ label: "상태",
+ type: "select",
+ options: [
+ { label: "활성", value: "true" },
+ { label: "비활성", value: "false" },
+ ],
+ },
+ {
+ id: "createdAt",
+ label: "생성일",
+ type: "date",
+ },
+ {
+ id: "updatedAt",
+ label: "수정일",
+ type: "date",
+ },
+ ]
+
+ const { table } = useDataTable({
+ data,
+ columns,
+ pageCount,
+ filterFields,
+ enablePinning: true,
+ enableAdvancedFilter: true,
+ initialState: {
+ sorting: [{ id: "createdAt", desc: true }],
+ columnPinning: { right: ["actions"] },
+ },
+ getRowId: (originalRow) => String(originalRow.id),
+ shallow: false,
+ clearOnDefault: true,
+ })
+
+ // 행 액션 처리
+ React.useEffect(() => {
+ if (rowAction?.type === "update") {
+ setShowUpdateDialog(true)
+ } else if (rowAction?.type === "delete") {
+ setShowDeleteDialog(true)
+ }
+ }, [rowAction])
+
+ return (
+ <>
+ <DataTable table={table}>
+ <DataTableAdvancedToolbar
+ table={table}
+ filterFields={advancedFilterFields}
+ shallow={false}
+ >
+ <InformationTableToolbarActions
+ table={table}
+ onAdd={() => setShowAddDialog(true)}
+ />
+ </DataTableAdvancedToolbar>
+ </DataTable>
+
+ <AddInformationDialog
+ open={showAddDialog}
+ onOpenChange={setShowAddDialog}
+ />
+
+ <UpdateInformationDialog
+ open={showUpdateDialog}
+ onOpenChange={setShowUpdateDialog}
+ information={rowAction?.row.original}
+ onClose={() => {
+ setShowUpdateDialog(false)
+ setRowAction(null)
+ }}
+ />
+
+ <DeleteInformationDialog
+ open={showDeleteDialog}
+ onOpenChange={setShowDeleteDialog}
+ information={rowAction?.row.original}
+ onClose={() => {
+ setShowDeleteDialog(false)
+ setRowAction(null)
+ }}
+ />
+ </>
+ )
+}
\ No newline at end of file |