diff options
Diffstat (limited to 'lib/items/table/items-table.tsx')
| -rw-r--r-- | lib/items/table/items-table.tsx | 189 |
1 files changed, 92 insertions, 97 deletions
diff --git a/lib/items/table/items-table.tsx b/lib/items/table/items-table.tsx index c05b4348..92f805eb 100644 --- a/lib/items/table/items-table.tsx +++ b/lib/items/table/items-table.tsx @@ -22,6 +22,7 @@ import { getColumns } from "./items-table-columns" import { ItemsTableToolbarActions } from "./items-table-toolbar-actions" import { UpdateItemSheet } from "./update-item-sheet" import { DeleteItemsDialog } from "./delete-items-dialog" +import { ViewModeToggle } from "@/components/data-table/view-mode-toggle" interface ItemsTableProps { promises?: Promise< @@ -71,7 +72,7 @@ export function ItemsTable({ promises }: ItemsTableProps) { id: "itemName", label: "자재그룹이름", type: "text", - }, + }, { id: "description", label: "상세", @@ -115,13 +116,13 @@ export function ItemsTable({ promises }: ItemsTableProps) { ] // 확장된 useDataTable 훅 사용 (pageSize 기반 자동 전환) - const { - table, - infiniteScroll, - isInfiniteMode, + const { + table, + infiniteScroll, + isInfiniteMode, effectivePageSize, handlePageSizeChange, - urlState + urlState } = useDataTable({ data, columns, @@ -154,98 +155,92 @@ export function ItemsTable({ promises }: ItemsTableProps) { } return ( - <div className="w-full space-y-2.5"> - - {/* <div className="flex items-center justify-between"> - <div className="flex items-center gap-2"> - <Button - variant="outline" - size="sm" - onClick={handleRefresh} - disabled={isInfiniteMode && infiniteScroll?.isLoading} - > - <RotateCcw className="h-4 w-4 mr-2" /> - 새로고침 - </Button> + <div className="w-full space-y-2.5 overflow-x-auto" style={{maxWidth:'100wv'}}> + + {/* 모드 토글 & 새로고침 */} + <div className="flex items-center justify-between"> + <ViewModeToggle + isInfiniteMode={isInfiniteMode} + onSwitch={handlePageSizeChange} // ← ViewModeToggle에 prop 추가 + /> </div> - </div> */} - - {/* 에러 상태 (무한 스크롤 모드) */} - {isInfiniteMode && infiniteScroll?.error && ( - <Alert variant="destructive"> - <AlertDescription> - 데이터를 불러오는 중 오류가 발생했습니다. - <Button - variant="link" - size="sm" - onClick={() => infiniteScroll.reset()} - className="ml-2 p-0 h-auto" - > - 다시 시도 - </Button> - </AlertDescription> - </Alert> - )} - - {/* 로딩 상태가 아닐 때만 테이블 렌더링 */} - {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? ( - <> - {/* 도구 모음 */} - <DataTableAdvancedToolbar - table={table} - filterFields={advancedFilterFields} - shallow={false} - > - <ItemsTableToolbarActions table={table} /> - </DataTableAdvancedToolbar> - - {/* 테이블 렌더링 */} - {isInfiniteMode ? ( - // 무한 스크롤 모드: InfiniteDataTable 사용 (자체 페이지네이션 없음) - <InfiniteDataTable - table={table} - hasNextPage={infiniteScroll?.hasNextPage || false} - isLoadingMore={infiniteScroll?.isLoadingMore || false} - onLoadMore={infiniteScroll?.loadMore} - totalCount={infiniteScroll?.totalCount} - isEmpty={infiniteScroll?.isEmpty || false} - compact={false} - autoSizeColumns={true} - /> - ) : ( - // 페이지네이션 모드: DataTable 사용 (내장 페이지네이션 활용) - <DataTable + + {/* 에러 상태 (무한 스크롤 모드) */} + {isInfiniteMode && infiniteScroll?.error && ( + <Alert variant="destructive"> + <AlertDescription> + 데이터를 불러오는 중 오류가 발생했습니다. + <Button + variant="link" + size="sm" + onClick={() => infiniteScroll.reset()} + className="ml-2 p-0 h-auto" + > + 다시 시도 + </Button> + </AlertDescription> + </Alert> + )} + + {/* 로딩 상태가 아닐 때만 테이블 렌더링 */} + {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? ( + <> + {/* 도구 모음 */} + <DataTableAdvancedToolbar table={table} - compact={false} - autoSizeColumns={true} - /> - )} - </> - ) : ( - /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */ - <div className="space-y-3"> - <div className="text-sm text-muted-foreground mb-4"> - 무한 스크롤 모드로 데이터를 로드하고 있습니다... + filterFields={advancedFilterFields} + shallow={false} + > + <ItemsTableToolbarActions table={table} /> + </DataTableAdvancedToolbar> + + {/* 테이블 렌더링 */} + {isInfiniteMode ? ( + // 무한 스크롤 모드: InfiniteDataTable 사용 (자체 페이지네이션 없음) + <InfiniteDataTable + table={table} + hasNextPage={infiniteScroll?.hasNextPage || false} + isLoadingMore={infiniteScroll?.isLoadingMore || false} + onLoadMore={infiniteScroll?.onLoadMore} + totalCount={infiniteScroll?.totalCount} + isEmpty={infiniteScroll?.isEmpty || false} + compact={false} + autoSizeColumns={true} + /> + ) : ( + // 페이지네이션 모드: DataTable 사용 (내장 페이지네이션 활용) + <DataTable + table={table} + compact={false} + autoSizeColumns={true} + /> + )} + </> + ) : ( + /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */ + <div className="space-y-3"> + <div className="text-sm text-muted-foreground mb-4"> + 무한 스크롤 모드로 데이터를 로드하고 있습니다... + </div> + {Array.from({ length: 10 }).map((_, i) => ( + <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" /> + ))} </div> - {Array.from({ length: 10 }).map((_, i) => ( - <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" /> - ))} - </div> - )} - - {/* 기존 다이얼로그들 */} - <UpdateItemSheet - open={rowAction?.type === "update"} - onOpenChange={() => setRowAction(null)} - item={rowAction?.row.original ?? null} - /> - <DeleteItemsDialog - open={rowAction?.type === "delete"} - onOpenChange={() => setRowAction(null)} - items={rowAction?.row.original ? [rowAction?.row.original] : []} - showTrigger={false} - onSuccess={() => rowAction?.row.toggleSelected(false)} - /> - </div> - ) + )} + + {/* 기존 다이얼로그들 */} + <UpdateItemSheet + open={rowAction?.type === "update"} + onOpenChange={() => setRowAction(null)} + item={rowAction?.row.original ?? null} + /> + <DeleteItemsDialog + open={rowAction?.type === "delete"} + onOpenChange={() => setRowAction(null)} + items={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => rowAction?.row.toggleSelected(false)} + /> + </div> + ) }
\ No newline at end of file |