diff options
| author | joonhoekim <26rote@gmail.com> | 2025-10-24 19:44:29 +0900 |
|---|---|---|
| committer | joonhoekim <26rote@gmail.com> | 2025-10-24 19:44:29 +0900 |
| commit | 4142f8ce9c736a19b08f5f4f9fa55aa15d9c99b3 (patch) | |
| tree | 837ee03e61e2e97ec085acedd597f398e7b42b33 /lib/swp/table | |
| parent | 14961f2202b94be5ad881c762c524b8115a4f2cd (diff) | |
| parent | 231c4eb86771a44b24248ca403fcbb8c44fff74b (diff) | |
Merge branch 'swp' into dujinkim
Diffstat (limited to 'lib/swp/table')
| -rw-r--r-- | lib/swp/table/swp-help-dialog.tsx | 153 | ||||
| -rw-r--r-- | lib/swp/table/swp-table-columns.tsx | 93 | ||||
| -rw-r--r-- | lib/swp/table/swp-table-toolbar.tsx | 142 | ||||
| -rw-r--r-- | lib/swp/table/swp-table.tsx | 309 |
4 files changed, 572 insertions, 125 deletions
diff --git a/lib/swp/table/swp-help-dialog.tsx b/lib/swp/table/swp-help-dialog.tsx new file mode 100644 index 00000000..18f29644 --- /dev/null +++ b/lib/swp/table/swp-help-dialog.tsx @@ -0,0 +1,153 @@ +"use client"; + +import { HelpCircle } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Badge } from "@/components/ui/badge"; + +export function SwpUploadHelpDialog() { + return ( + <Dialog> + <DialogTrigger asChild> + <Button variant="outline" size="sm" className="gap-2"> + <HelpCircle className="h-4 w-4" /> + 업로드 가이드 + </Button> + </DialogTrigger> + <DialogContent className="max-w-2xl" opacityControl={false}> + <DialogHeader> + <DialogTitle>파일 업로드 가이드</DialogTitle> + <DialogDescription> + 올바른 파일명 형식으로 업로드해주세요 + </DialogDescription> + </DialogHeader> + + <div className="space-y-6"> + {/* 파일명 형식 */} + <div className="space-y-2"> + <h3 className="text-sm font-semibold">📋 파일명 형식</h3> + <div className="rounded-lg bg-muted p-4 font-mono text-sm"> + [OWN_DOC_NO]_[REV_NO]_[STAGE]_[YYYYMMDDhhmmss].[확장자] + </div> + <p className="text-xs text-muted-foreground"> + ⚠️ 언더스코어(_)가 정확히 3개 있어야 합니다 + </p> + </div> + + {/* 각 항목 설명 - 1라인 형태 */} + <div className="space-y-3"> + <h3 className="text-sm font-semibold">📝 항목 설명</h3> + + <div className="flex items-center gap-3 rounded-lg border p-3"> + <Badge variant="secondary" className="font-mono shrink-0"> + OWN_DOC_NO + </Badge> + <div className="text-sm"> + <span className="font-medium">벤더의 문서번호</span> + <span className="text-muted-foreground"> - 프로젝트마다 유니크해야 합니다</span> + </div> + </div> + + <div className="flex items-center gap-3 rounded-lg border p-3"> + <Badge variant="secondary" className="font-mono shrink-0"> + REV_NO + </Badge> + <div className="text-sm"> + <span className="font-medium">리비전 번호</span> + <span className="text-muted-foreground"> - 보통 01, 02 같은 식으로 피드백에 따라 증가합니다</span> + </div> + </div> + + <div className="flex items-center gap-3 rounded-lg border p-3"> + <Badge variant="secondary" className="font-mono shrink-0"> + STAGE + </Badge> + <div className="text-sm"> + <span className="font-medium">스테이지</span> + <span className="text-muted-foreground"> - 중공업이 설정한 스테이지입니다 (예: IFA, IFC, AFC, BFC)</span> + </div> + </div> + + <div className="flex items-center gap-3 rounded-lg border p-3"> + <Badge variant="secondary" className="font-mono shrink-0"> + YYYYMMDDhhmmss + </Badge> + <div className="text-sm"> + <span className="font-medium">날짜 및 시간</span> + <span className="text-muted-foreground"> - 업로드 날짜 정보를 기입합니다 (14자리 숫자)</span> + </div> + </div> + </div> + + {/* 예시 */} + <div className="space-y-2"> + <h3 className="text-sm font-semibold">✅ 올바른 예시</h3> + <div className="space-y-2"> + <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3"> + <code className="text-xs font-mono text-green-700 dark:text-green-300"> + VD-DOC-001_01_IFA_20250124143000.pdf + </code> + </div> + <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3"> + <code className="text-xs font-mono text-green-700 dark:text-green-300"> + TECH-SPEC-002_02_IFC_20250124150000.dwg + </code> + </div> + </div> + </div> + + {/* 잘못된 예시 */} + <div className="space-y-2"> + <h3 className="text-sm font-semibold">❌ 잘못된 예시</h3> + <div className="space-y-2"> + <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3"> + <code className="text-xs font-mono text-red-700 dark:text-red-300"> + VD-DOC-001-01-IFA-20250124.pdf + </code> + <p className="text-xs text-red-600 dark:text-red-400 mt-1"> + ✗ 언더스코어(_) 대신 하이픈(-) 사용 + </p> + </div> + <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3"> + <code className="text-xs font-mono text-red-700 dark:text-red-300"> + VD-DOC-001_01_IFA.pdf + </code> + <p className="text-xs text-red-600 dark:text-red-400 mt-1"> + ✗ 날짜/시간 정보 누락 + </p> + </div> + <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3"> + <code className="text-xs font-mono text-red-700 dark:text-red-300"> + VD-DOC-001_01_IFA_20250124.pdf + </code> + <p className="text-xs text-red-600 dark:text-red-400 mt-1"> + ✗ 시간 정보 누락 (14자리가 아님) + </p> + </div> + </div> + </div> + + {/* 주의사항 */} + <div className="rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 p-4"> + <h3 className="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-2"> + ⚠️ 주의사항 + </h3> + <ul className="text-xs text-amber-800 dark:text-amber-200 space-y-1 list-disc list-inside"> + <li>파일명 형식이 올바르지 않으면 업로드가 실패합니다</li> + <li>같은 파일명으로 이미 업로드된 파일이 있으면 덮어쓰지 않고 오류 처리됩니다</li> + <li>프로젝트와 업체 코드를 먼저 선택해야 업로드 버튼이 활성화됩니다</li> + </ul> + </div> + </div> + </DialogContent> + </Dialog> + ); +} + diff --git a/lib/swp/table/swp-table-columns.tsx b/lib/swp/table/swp-table-columns.tsx index dd605453..573acf1b 100644 --- a/lib/swp/table/swp-table-columns.tsx +++ b/lib/swp/table/swp-table-columns.tsx @@ -3,30 +3,28 @@ import { ColumnDef } from "@tanstack/react-table"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { ChevronDown, ChevronRight, FileIcon } from "lucide-react"; +import { ChevronDown, ChevronRight, FileIcon, Download, Loader2 } from "lucide-react"; import { formatDistanceToNow } from "date-fns"; import { ko } from "date-fns/locale"; import type { SwpDocumentWithStats } from "../actions"; +import { downloadSwpFile } from "../actions"; +import { useState } from "react"; +import { toast } from "sonner"; export const swpDocumentColumns: ColumnDef<SwpDocumentWithStats>[] = [ { id: "expander", header: () => null, - cell: ({ row }) => { - return row.getCanExpand() ? ( + cell: () => { + return ( <Button variant="ghost" size="sm" - onClick={row.getToggleExpandedHandler()} className="h-8 w-8 p-0" > - {row.getIsExpanded() ? ( - <ChevronDown className="h-4 w-4" /> - ) : ( - <ChevronRight className="h-4 w-4" /> - )} + <ChevronRight className="h-4 w-4" /> </Button> - ) : null; + ); }, size: 50, }, @@ -182,7 +180,6 @@ export const swpRevisionColumns: ColumnDef<RevisionRow>[] = [ <Button variant="ghost" size="sm" - onClick={row.getToggleExpandedHandler()} className="h-8 w-8 p-0 ml-8" > {row.getIsExpanded() ? ( @@ -390,5 +387,79 @@ export const swpFileColumns: ColumnDef<FileRow>[] = [ ), size: 100, }, + { + id: "actions", + header: "작업", + cell: ({ row }) => ( + <DownloadButton fileId={row.original.id} fileName={row.original.FILE_NM} /> + ), + size: 120, + }, ]; +// ============================================================================ +// 다운로드 버튼 컴포넌트: 임시 구성. Download.aspx 동작 안해서 일단 네트워크드라이브 사용하도록 처리 +// ============================================================================ + +interface DownloadButtonProps { + fileId: number; + fileName: string; +} + +function DownloadButton({ fileId, fileName }: DownloadButtonProps) { + const [isDownloading, setIsDownloading] = useState(false); + + const handleDownload = async () => { + try { + setIsDownloading(true); + + // 서버 액션 호출 + const result = await downloadSwpFile(fileId); + + if (!result.success || !result.data) { + toast.error(result.error || "파일 다운로드 실패"); + return; + } + + // Blob 생성 및 다운로드 + const blob = new Blob([result.data as unknown as BlobPart], { type: result.mimeType }); + const url = window.URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.download = result.fileName || fileName; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + window.URL.revokeObjectURL(url); + + toast.success(`파일 다운로드 완료: ${result.fileName}`); + } catch (error) { + console.error("다운로드 오류:", error); + toast.error("파일 다운로드 중 오류가 발생했습니다."); + } finally { + setIsDownloading(false); + } + }; + + return ( + <Button + variant="outline" + size="sm" + onClick={handleDownload} + disabled={isDownloading} + > + {isDownloading ? ( + <> + <Loader2 className="h-4 w-4 mr-1 animate-spin" /> + 다운로드 중... + </> + ) : ( + <> + <Download className="h-4 w-4 mr-1" /> + 다운로드 + </> + )} + </Button> + ); +} + diff --git a/lib/swp/table/swp-table-toolbar.tsx b/lib/swp/table/swp-table-toolbar.tsx index 7c5f2f2e..03082b26 100644 --- a/lib/swp/table/swp-table-toolbar.tsx +++ b/lib/swp/table/swp-table-toolbar.tsx @@ -16,11 +16,13 @@ import { PopoverTrigger, } from "@/components/ui/popover"; import { Label } from "@/components/ui/label"; -import { RefreshCw, Download, Search, X, Check, ChevronsUpDown } from "lucide-react"; -import { syncSwpProjectAction, type SwpTableFilters } from "../actions"; +import { RefreshCw, Search, X, Check, ChevronsUpDown, Upload } from "lucide-react"; +import { syncSwpProjectAction, uploadSwpFilesAction, type SwpTableFilters } from "../actions"; import { useToast } from "@/hooks/use-toast"; import { useRouter } from "next/navigation"; import { cn } from "@/lib/utils"; +import { useRef } from "react"; +import { SwpUploadHelpDialog } from "./swp-help-dialog"; interface SwpTableToolbarProps { filters: SwpTableFilters; @@ -34,11 +36,13 @@ export function SwpTableToolbar({ projects = [], }: SwpTableToolbarProps) { const [isSyncing, startSync] = useTransition(); + const [isUploading, startUpload] = useTransition(); const [localFilters, setLocalFilters] = useState<SwpTableFilters>(filters); const { toast } = useToast(); const router = useRouter(); const [projectSearchOpen, setProjectSearchOpen] = useState(false); const [projectSearch, setProjectSearch] = useState(""); + const fileInputRef = useRef<HTMLInputElement>(null); // 동기화 핸들러 const handleSync = () => { @@ -84,6 +88,115 @@ export function SwpTableToolbar({ }); }; + /** + * 파일 업로드 핸들러 + * 1) 네트워크 드라이브에 정해진 규칙대로, 파일이름 기반으로 파일 업로드하기 + * 2) 1~N개 파일 받아서, 파일 이름 기준으로 파싱해서 SaveInBoxList API를 통해 업로드 처리 + */ + const handleUploadFiles = () => { + // 프로젝트와 벤더 코드 체크 + const projectNo = localFilters.projNo; + const vndrCd = localFilters.vndrCd; + + if (!projectNo) { + toast({ + variant: "destructive", + title: "프로젝트 선택 필요", + description: "파일을 업로드할 프로젝트를 먼저 선택해주세요.", + }); + return; + } + + if (!vndrCd) { + toast({ + variant: "destructive", + title: "업체 코드 입력 필요", + description: "파일을 업로드할 업체 코드를 입력해주세요.", + }); + return; + } + + // 파일 선택 다이얼로그 열기 + fileInputRef.current?.click(); + }; + + /** + * 파일 선택 핸들러 + */ + const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => { + const selectedFiles = event.target.files; + if (!selectedFiles || selectedFiles.length === 0) { + return; + } + + const projectNo = localFilters.projNo!; + const vndrCd = localFilters.vndrCd!; + + startUpload(async () => { + try { + toast({ + title: "파일 업로드 시작", + description: `${selectedFiles.length}개 파일을 업로드합니다...`, + }); + + // 파일을 Buffer로 변환 + const fileInfos = await Promise.all( + Array.from(selectedFiles).map(async (file) => { + const arrayBuffer = await file.arrayBuffer(); + return { + fileName: file.name, + fileBuffer: Buffer.from(arrayBuffer), + }; + }) + ); + + // 서버 액션 호출 + const result = await uploadSwpFilesAction(projectNo, vndrCd, fileInfos); + + if (result.success) { + toast({ + title: "업로드 완료", + description: result.message, + }); + + // 페이지 새로고침 + router.refresh(); + } else { + toast({ + variant: "destructive", + title: "업로드 실패", + description: result.message, + }); + } + + // 실패한 파일이 있으면 상세 정보 표시 + const failedFiles = result.details.filter((d) => !d.success); + if (failedFiles.length > 0) { + console.error("실패한 파일:", failedFiles); + failedFiles.forEach((f) => { + toast({ + variant: "destructive", + title: `${f.fileName} 업로드 실패`, + description: f.error || "알 수 없는 오류", + }); + }); + } + } catch (error) { + console.error("파일 업로드 실패:", error); + toast({ + variant: "destructive", + title: "업로드 실패", + description: error instanceof Error ? error.message : "알 수 없는 오류", + }); + } finally { + // 파일 입력 초기화 + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + } + }); + }; + // 검색 적용 const handleSearch = () => { onFiltersChange(localFilters); @@ -122,15 +235,32 @@ export function SwpTableToolbar({ {isSyncing ? "동기화 중..." : "SWP 동기화"} </Button> - <Button variant="outline" size="sm" disabled> - <Download className="h-4 w-4 mr-2" /> - Excel 내보내기 - </Button> </div> <div className="text-sm text-muted-foreground"> SWP 문서 관리 시스템 </div> + <div className="flex items-center gap-2"> + <input + ref={fileInputRef} + type="file" + multiple + className="hidden" + onChange={handleFileChange} + accept="*/*" + /> + <Button + variant="outline" + size="sm" + onClick={handleUploadFiles} + disabled={isUploading || !localFilters.projNo || !localFilters.vndrCd} + > + <Upload className={`h-4 w-4 mr-2 ${isUploading ? "animate-pulse" : ""}`} /> + {isUploading ? "업로드 중..." : "파일 업로드"} + </Button> + + <SwpUploadHelpDialog /> + </div> </div> {/* 검색 필터 */} diff --git a/lib/swp/table/swp-table.tsx b/lib/swp/table/swp-table.tsx index 9e8f7f6a..8ae90bdd 100644 --- a/lib/swp/table/swp-table.tsx +++ b/lib/swp/table/swp-table.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import React, { useState } from "react"; import { useReactTable, getCoreRowModel, @@ -17,6 +17,13 @@ import { TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from "@/components/ui/dialog"; import { Loader2 } from "lucide-react"; import { swpDocumentColumns, swpRevisionColumns, swpFileColumns, type RevisionRow, type FileRow } from "./swp-table-columns"; import { fetchDocumentRevisions, fetchRevisionFiles, type SwpDocumentWithStats } from "../actions"; @@ -43,6 +50,8 @@ export function SwpTable({ const [fileData, setFileData] = useState<Record<number, FileRow[]>>({}); const [loadingRevisions, setLoadingRevisions] = useState<Set<string>>(new Set()); const [loadingFiles, setLoadingFiles] = useState<Set<number>>(new Set()); + const [dialogOpen, setDialogOpen] = useState(false); + const [selectedDocument, setSelectedDocument] = useState<SwpDocumentWithStats | null>(null); const table = useReactTable({ data: initialData, @@ -53,7 +62,7 @@ export function SwpTable({ onExpandedChange: setExpanded, getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), - getRowCanExpand: (row) => true, // 모든 문서는 확장 가능 + getRowCanExpand: () => true, // 모든 문서는 확장 가능 }); // 리비전 로드 @@ -104,10 +113,26 @@ export function SwpTable({ } }; - // 문서 행 확장 핸들러 - const handleDocumentExpand = (docNo: string, isExpanded: boolean) => { - if (!isExpanded) { - loadRevisions(docNo); + // 문서 클릭 핸들러 - Dialog 열기 + const handleDocumentClick = async (document: SwpDocumentWithStats) => { + setSelectedDocument(document); + setDialogOpen(true); + + // 리비전 데이터 로드 + if (!revisionData[document.DOC_NO]) { + await loadRevisions(document.DOC_NO); + } + }; + + // 모든 리비전의 파일을 로드 + const loadAllFiles = async (docNo: string) => { + const revisions = revisionData[docNo]; + if (!revisions) return; + + for (const revision of revisions) { + if (!fileData[revision.id]) { + await loadFiles(revision.id); + } } }; @@ -135,10 +160,9 @@ export function SwpTable({ <TableBody> {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( - <> + <React.Fragment key={row.id}> {/* 문서 행 */} <TableRow - key={row.id} data-state={row.getIsSelected() && "selected"} className="hover:bg-muted/50" > @@ -146,10 +170,8 @@ export function SwpTable({ <TableCell key={cell.id}> {cell.column.id === "expander" ? ( <div - onClick={() => { - row.toggleExpanded(); - handleDocumentExpand(row.original.DOC_NO, row.getIsExpanded()); - }} + onClick={() => handleDocumentClick(row.original)} + className="cursor-pointer" > {flexRender( cell.column.columnDef.cell, @@ -162,32 +184,7 @@ export function SwpTable({ </TableCell> ))} </TableRow> - - {/* 리비전 행들 (확장 시) */} - {row.getIsExpanded() && ( - <TableRow> - <TableCell colSpan={swpDocumentColumns.length} className="p-0 bg-muted/30"> - {loadingRevisions.has(row.original.DOC_NO) ? ( - <div className="flex items-center justify-center p-8"> - <Loader2 className="h-6 w-6 animate-spin" /> - <span className="ml-2">리비전 로딩 중...</span> - </div> - ) : revisionData[row.original.DOC_NO]?.length ? ( - <RevisionSubTable - revisions={revisionData[row.original.DOC_NO]} - fileData={fileData} - loadingFiles={loadingFiles} - onLoadFiles={loadFiles} - /> - ) : ( - <div className="p-8 text-center text-muted-foreground"> - 리비전 없음 - </div> - )} - </TableCell> - </TableRow> - )} - </> + </React.Fragment> )) ) : ( <TableRow> @@ -228,28 +225,95 @@ export function SwpTable({ </Button> </div> </div> + + {/* 문서 상세 Dialog */} + <Dialog open={dialogOpen} onOpenChange={setDialogOpen}> + <DialogContent className="max-w-6xl max-h-[90vh]"> + <DialogHeader> + <DialogTitle>문서 상세</DialogTitle> + {selectedDocument && ( + <DialogDescription> + {selectedDocument.DOC_NO} - {selectedDocument.DOC_TITLE} + </DialogDescription> + )} + </DialogHeader> + + {selectedDocument && ( + <div className="space-y-4 overflow-y-auto"> + {/* 문서 정보 */} + <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-muted/30 rounded-lg"> + <div> + <span className="text-sm font-semibold">프로젝트:</span> + <div className="text-sm">{selectedDocument.PROJ_NO}</div> + {selectedDocument.PROJ_NM && ( + <div className="text-xs text-muted-foreground">{selectedDocument.PROJ_NM}</div> + )} + </div> + <div> + <span className="text-sm font-semibold">패키지:</span> + <div className="text-sm">{selectedDocument.PKG_NO || "-"}</div> + </div> + <div> + <span className="text-sm font-semibold">업체:</span> + <div className="text-sm">{selectedDocument.CPY_NM || "-"}</div> + {selectedDocument.VNDR_CD && ( + <div className="text-xs text-muted-foreground">{selectedDocument.VNDR_CD}</div> + )} + </div> + <div> + <span className="text-sm font-semibold">최신 리비전:</span> + <div className="text-sm">{selectedDocument.LTST_REV_NO || "-"}</div> + </div> + </div> + + {/* 리비전 및 파일 목록 */} + {loadingRevisions.has(selectedDocument.DOC_NO) ? ( + <div className="flex items-center justify-center p-8"> + <Loader2 className="h-6 w-6 animate-spin" /> + <span className="ml-2">리비전 로딩 중...</span> + </div> + ) : revisionData[selectedDocument.DOC_NO]?.length ? ( + <DocumentDetailView + revisions={revisionData[selectedDocument.DOC_NO]} + fileData={fileData} + loadingFiles={loadingFiles} + onLoadFiles={loadFiles} + onLoadAllFiles={() => loadAllFiles(selectedDocument.DOC_NO)} + /> + ) : ( + <div className="p-8 text-center text-muted-foreground"> + 리비전 없음 + </div> + )} + </div> + )} + </DialogContent> + </Dialog> </div> ); } // ============================================================================ -// 리비전 서브 테이블 +// 문서 상세 뷰 (Dialog용) // ============================================================================ -interface RevisionSubTableProps { +interface DocumentDetailViewProps { revisions: RevisionRow[]; fileData: Record<number, FileRow[]>; loadingFiles: Set<number>; onLoadFiles: (revisionId: number) => void; + onLoadAllFiles: () => void; } -function RevisionSubTable({ +function DocumentDetailView({ revisions, fileData, loadingFiles, onLoadFiles, -}: RevisionSubTableProps) { + onLoadAllFiles, +}: DocumentDetailViewProps) { const [expandedRevisions, setExpandedRevisions] = useState<ExpandedState>({}); + const [allExpanded, setAllExpanded] = useState(false); const revisionTable = useReactTable({ data: revisions, @@ -263,80 +327,109 @@ function RevisionSubTable({ getRowCanExpand: () => true, }); - const handleRevisionExpand = (revisionId: number, isExpanded: boolean) => { - if (!isExpanded) { - onLoadFiles(revisionId); + const handleExpandAll = () => { + if (allExpanded) { + setExpandedRevisions({}); + } else { + const expanded: ExpandedState = {}; + revisions.forEach((_, index) => { + expanded[index] = true; + }); + setExpandedRevisions(expanded); + onLoadAllFiles(); } + setAllExpanded(!allExpanded); + }; + + const handleRevisionExpand = (revisionId: number) => { + onLoadFiles(revisionId); }; return ( - <div className="border-l-4 border-blue-200"> - <Table> - <TableHeader> - {revisionTable.getHeaderGroups().map((headerGroup) => ( - <TableRow key={headerGroup.id} className="bg-muted/50"> - {headerGroup.headers.map((header) => ( - <TableHead key={header.id} className="font-semibold"> - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - </TableHead> - ))} - </TableRow> - ))} - </TableHeader> - <TableBody> - {revisionTable.getRowModel().rows.map((row) => ( - <> - {/* 리비전 행 */} - <TableRow key={row.id} className="bg-muted/20"> - {row.getVisibleCells().map((cell) => ( - <TableCell key={cell.id}> - {cell.column.id === "expander" ? ( - <div - onClick={() => { - row.toggleExpanded(); - handleRevisionExpand(row.original.id, row.getIsExpanded()); - }} - > - {flexRender( - cell.column.columnDef.cell, - cell.getContext() + <div className="space-y-4"> + {/* 전체 펼치기/접기 버튼 */} + <div className="flex justify-end"> + <Button + variant="outline" + size="sm" + onClick={handleExpandAll} + > + {allExpanded ? "모두 접기" : "모두 펼치기"} + </Button> + </div> + + {/* 리비전 테이블 */} + <div className="rounded-md border"> + <Table> + <TableHeader> + {revisionTable.getHeaderGroups().map((headerGroup) => ( + <TableRow key={headerGroup.id} className="bg-muted/50"> + {headerGroup.headers.map((header) => ( + <TableHead key={header.id} className="font-semibold"> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() )} - </div> - ) : ( - flexRender(cell.column.columnDef.cell, cell.getContext()) - )} - </TableCell> + </TableHead> ))} </TableRow> - - {/* 파일 행들 (확장 시) */} - {row.getIsExpanded() && ( - <TableRow> - <TableCell colSpan={swpRevisionColumns.length} className="p-0 bg-blue-50/30"> - {loadingFiles.has(row.original.id) ? ( - <div className="flex items-center justify-center p-4"> - <Loader2 className="h-5 w-5 animate-spin" /> - <span className="ml-2 text-sm">파일 로딩 중...</span> - </div> - ) : fileData[row.original.id]?.length ? ( - <FileSubTable files={fileData[row.original.id]} /> - ) : ( - <div className="p-4 text-center text-sm text-muted-foreground"> - 파일 없음 - </div> - )} - </TableCell> + ))} + </TableHeader> + <TableBody> + {revisionTable.getRowModel().rows.map((row) => ( + <React.Fragment key={row.id}> + {/* 리비전 행 */} + <TableRow className="bg-muted/20"> + {row.getVisibleCells().map((cell) => ( + <TableCell key={cell.id}> + {cell.column.id === "expander" ? ( + <div + onClick={() => { + row.toggleExpanded(); + if (!row.getIsExpanded()) { + handleRevisionExpand(row.original.id); + } + }} + className="cursor-pointer" + > + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + </div> + ) : ( + flexRender(cell.column.columnDef.cell, cell.getContext()) + )} + </TableCell> + ))} </TableRow> - )} - </> - ))} - </TableBody> - </Table> + + {/* 파일 행들 (확장 시) */} + {row.getIsExpanded() && ( + <TableRow> + <TableCell colSpan={swpRevisionColumns.length} className="p-0 bg-blue-50/30"> + {loadingFiles.has(row.original.id) ? ( + <div className="flex items-center justify-center p-4"> + <Loader2 className="h-5 w-5 animate-spin" /> + <span className="ml-2 text-sm">파일 로딩 중...</span> + </div> + ) : fileData[row.original.id]?.length ? ( + <FileSubTable files={fileData[row.original.id]} /> + ) : ( + <div className="p-4 text-center text-sm text-muted-foreground"> + 파일 없음 + </div> + )} + </TableCell> + </TableRow> + )} + </React.Fragment> + ))} + </TableBody> + </Table> + </div> </div> ); } |
