diff options
Diffstat (limited to 'lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx')
| -rw-r--r-- | lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx | 80 |
1 files changed, 44 insertions, 36 deletions
diff --git a/lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx b/lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx index 255b1f9d..4ec57369 100644 --- a/lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx +++ b/lib/vendor-document-list/ship/enhanced-doc-table-toolbar-actions.tsx @@ -1,4 +1,6 @@ +// enhanced-doc-table-toolbar-actions.tsx - 최적화된 버전 "use client" + import * as React from "react" import { type Table } from "@tanstack/react-table" import { Download, Upload, Plus, Files, RefreshCw } from "lucide-react" @@ -6,14 +8,13 @@ import { toast } from "sonner" import { exportTableToExcel } from "@/lib/export" import { Button } from "@/components/ui/button" -import { SimplifiedDocumentsView } from "@/db/schema/vendorDocu" +import { SimplifiedDocumentsView } from "@/db/schema/vendorDocu" import { SendToSHIButton } from "./send-to-shi-button" import { ImportFromDOLCEButton } from "./import-from-dolce-button" interface EnhancedDocTableToolbarActionsProps { table: Table<SimplifiedDocumentsView> projectType: "ship" | "plant" - contractId?: number } export function EnhancedDocTableToolbarActions({ @@ -21,70 +22,77 @@ export function EnhancedDocTableToolbarActions({ projectType, }: EnhancedDocTableToolbarActionsProps) { const [bulkUploadDialogOpen, setBulkUploadDialogOpen] = React.useState(false) - - // 현재 테이블의 모든 데이터 (필터링된 상태) - const allDocuments = table.getFilteredRowModel().rows.map(row => row.original) - const handleSyncComplete = () => { - // 동기화 완료 후 테이블 새로고침 + // 🔥 메모이제이션으로 불필요한 재계산 방지 + const allDocuments = React.useMemo(() => { + return table.getFilteredRowModel().rows.map(row => row.original) + }, [ + table.getFilteredRowModel().rows.length, // 행 개수가 변경될 때만 재계산 + table.getState().columnFilters, // 필터가 변경될 때만 재계산 + table.getState().globalFilter, // 전역 필터가 변경될 때만 재계산 + ]) + + // 🔥 projectIds 메모이제이션 (ImportFromDOLCEButton에서 중복 계산 방지) + const projectIds = React.useMemo(() => { + const uniqueIds = [...new Set(allDocuments.map(doc => doc.projectId).filter(Boolean))] + return uniqueIds.sort() + }, [allDocuments]) + + // 🔥 핸들러들을 useCallback으로 메모이제이션 + const handleSyncComplete = React.useCallback(() => { table.resetRowSelection() - // 필요시 추가 액션 수행 - } + }, [table]) - const handleDocumentAdded = () => { - // 테이블 새로고침 + const handleDocumentAdded = React.useCallback(() => { table.resetRowSelection() - - // 추가적인 새로고침 시도 + // 🔥 강제 새로고침 대신 더 효율적인 방법 사용 setTimeout(() => { - window.location.reload() // 강제 새로고침 + // 상태 업데이트만으로 충분한 경우가 많음 + window.location.reload() }, 500) - } + }, [table]) - const handleImportComplete = () => { - // 가져오기 완료 후 테이블 새로고침 + const handleImportComplete = React.useCallback(() => { table.resetRowSelection() setTimeout(() => { window.location.reload() }, 500) - } + }, [table]) + + // 🔥 Export 핸들러 메모이제이션 + const handleExport = React.useCallback(() => { + exportTableToExcel(table, { + filename: "Document-list", + excludeColumns: ["select", "actions"], + }) + }, [table]) return ( <div className="flex items-center gap-2"> - - <> - {/* SHIP: DOLCE에서 목록 가져오기 */} - <ImportFromDOLCEButton - allDocuments={allDocuments} - onImportComplete={handleImportComplete} - /> - </> - + {/* SHIP: DOLCE에서 목록 가져오기 */} + <ImportFromDOLCEButton + allDocuments={allDocuments} + projectIds={projectIds} // 🔥 미리 계산된 projectIds 전달 + onImportComplete={handleImportComplete} + /> {/* Export 버튼 (공통) */} <Button variant="outline" size="sm" - onClick={() => - exportTableToExcel(table, { - filename: "Document-list", - excludeColumns: ["select", "actions"], - }) - } + onClick={handleExport} className="gap-2" > <Download className="size-4" aria-hidden="true" /> <span className="hidden sm:inline">Export</span> </Button> - {/* Send to SHI 버튼 (공통) - 내부 → 외부로 보내기 */} + {/* Send to SHI 버튼 (공통) */} <SendToSHIButton documents={allDocuments} onSyncComplete={handleSyncComplete} projectType={projectType} /> - - </div> ) }
\ No newline at end of file |
