(대표님) 벤더 문서 변경사항, data-table 변경, sync 변경

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>