(merge) 대표님/최겸 작업사항 머지

1 files changed, 231 insertions, 0 deletions

diff --git a/lib/techsales-rfq/table/tech-sales-quotation-attachments-sheet.tsx b/lib/techsales-rfq/table/tech-sales-quotation-attachments-sheet.tsx
new file mode 100644
index 00000000..21c61773
--- /dev/null
+++ b/lib/techsales-rfq/table/tech-sales-quotation-attachments-sheet.tsx
@@ -0,0 +1,231 @@
+"use client"

+

+import * as React from "react"

+import {

+  Sheet,

+  SheetContent,

+  SheetHeader,

+  SheetTitle,

+  SheetDescription,

+} from "@/components/ui/sheet"

+import { Button } from "@/components/ui/button"

+import { Download, FileText, File, ImageIcon, AlertCircle } from "lucide-react"

+import { Badge } from "@/components/ui/badge"

+import { Separator } from "@/components/ui/separator"

+import { formatDate } from "@/lib/utils"

+import prettyBytes from "pretty-bytes"

+

+// 견적서 첨부파일 타입 정의

+export interface QuotationAttachment {

+  id: number

+  quotationId: number

+  revisionId: number

+  fileName: string

+  originalFileName: string

+  fileSize: number

+  fileType: string | null

+  filePath: string

+  description: string | null

+  uploadedBy: number

+  vendorId: number

+  isVendorUpload: boolean

+  createdAt: Date

+  updatedAt: Date

+}

+

+// 견적서 정보 타입

+interface QuotationInfo {

+  id: number

+  quotationCode: string | null

+  vendorName?: string

+  rfqCode?: string

+}

+

+interface TechSalesQuotationAttachmentsSheetProps

+  extends React.ComponentPropsWithRef<typeof Sheet> {

+  quotation: QuotationInfo | null

+  attachments: QuotationAttachment[]

+  isLoading?: boolean

+}

+

+export function TechSalesQuotationAttachmentsSheet({

+  quotation,

+  attachments,

+  isLoading = false,

+  ...props

+}: TechSalesQuotationAttachmentsSheetProps) {

+  

+  // 파일 아이콘 선택 함수

+  const getFileIcon = (fileName: string) => {

+    const ext = fileName.split('.').pop()?.toLowerCase();

+    if (!ext) return <File className="h-5 w-5 text-gray-500" />;

+    

+    // 이미지 파일

+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext)) {

+      return <ImageIcon className="h-5 w-5 text-blue-500" />;

+    }

+    // PDF 파일

+    if (ext === 'pdf') {

+      return <FileText className="h-5 w-5 text-red-500" />;

+    }

+    // Excel 파일

+    if (['xlsx', 'xls', 'csv'].includes(ext)) {

+      return <FileText className="h-5 w-5 text-green-500" />;

+    }

+    // Word 파일

+    if (['docx', 'doc'].includes(ext)) {

+      return <FileText className="h-5 w-5 text-blue-500" />;

+    }

+    // 기본 파일

+    return <File className="h-5 w-5 text-gray-500" />;

+  };

+

+  // 파일 다운로드 처리

+  const handleDownload = (attachment: QuotationAttachment) => {

+    const link = document.createElement('a');

+    link.href = attachment.filePath;

+    link.download = attachment.originalFileName || attachment.fileName;

+    link.target = '_blank';

+    document.body.appendChild(link);

+    link.click();

+    document.body.removeChild(link);

+  };

+

+  // 리비전별로 첨부파일 그룹핑

+  const groupedAttachments = React.useMemo(() => {

+    const groups = new Map<number, QuotationAttachment[]>();

+    

+    attachments.forEach(attachment => {

+      const revisionId = attachment.revisionId;

+      if (!groups.has(revisionId)) {

+        groups.set(revisionId, []);

+      }

+      groups.get(revisionId)!.push(attachment);

+    });

+

+    // 리비전 ID 기준 내림차순 정렬 (최신 버전이 위에)

+    return Array.from(groups.entries())

+      .sort(([a], [b]) => b - a)

+      .map(([revisionId, files]) => ({

+        revisionId,

+        files: files.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

+      }));

+  }, [attachments]);

+  return (

+    <Sheet {...props}>

+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">

+        <SheetHeader className="text-left">

+          <SheetTitle>견적서 첨부파일</SheetTitle>

+          <SheetDescription>

+            <div className="space-y-1">

+              <div>견적서: {quotation?.quotationCode || "N/A"}</div>

+              {quotation?.vendorName && (

+                <div>벤더: {quotation.vendorName}</div>

+              )}

+              {quotation?.rfqCode && (

+                <div>RFQ: {quotation.rfqCode}</div>

+              )}

+            </div>

+          </SheetDescription>

+        </SheetHeader>

+

+        <div className="flex-1 overflow-auto">

+          {isLoading ? (

+            <div className="flex items-center justify-center py-8">

+              <div className="text-center">

+                <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full mx-auto mb-2" />

+                <p className="text-sm text-muted-foreground">첨부파일 로딩 중...</p>

+              </div>

+            </div>

+          ) : attachments.length === 0 ? (

+            <div className="flex flex-col items-center justify-center py-8 text-center">

+              <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />

+              <p className="text-muted-foreground mb-2">첨부파일이 없습니다</p>

+              <p className="text-sm text-muted-foreground">

+                이 견적서에는 첨부된 파일이 없습니다.

+              </p>

+            </div>

+          ) : (

+            <div className="space-y-4">

+              <div className="flex items-center justify-between">

+                <h6 className="font-semibold text-sm">

+                  첨부파일 ({attachments.length}개)

+                </h6>

+              </div>

+              

+              {groupedAttachments.map((group, groupIndex) => (

+                <div key={group.revisionId} className="space-y-3">

+                  {/* 리비전 헤더 */}

+                  <div className="flex items-center gap-2">

+                    <Badge variant={group.revisionId === 0 ? "secondary" : "outline"} className="text-xs">

+                      {group.revisionId === 0 ? "초기 버전" : `버전 ${group.revisionId}`}

+                    </Badge>

+                    <span className="text-xs text-muted-foreground">

+                      ({group.files.length}개 파일)

+                    </span>

+                  </div>

+

+                  {/* 해당 리비전의 첨부파일들 */}

+                  {group.files.map((attachment) => (

+                    <div 

+                      key={attachment.id}

+                      className="flex items-start gap-3 p-3 border rounded-lg hover:bg-muted/50 transition-colors ml-4"

+                    >

+                      <div className="mt-1">

+                        {getFileIcon(attachment.fileName)}

+                      </div>

+                      

+                      <div className="flex-1 min-w-0">

+                        <div className="flex items-start justify-between gap-2">

+                          <div className="min-w-0 flex-1">

+                            <p className="text-sm font-medium break-words leading-tight">

+                              {attachment.originalFileName || attachment.fileName}

+                            </p>

+                            <div className="flex items-center gap-2 mt-1">

+                              <span className="text-xs text-muted-foreground">

+                                {prettyBytes(attachment.fileSize)}

+                              </span>

+                              <Badge variant="outline" className="text-xs">

+                                {attachment.isVendorUpload ? "벤더 업로드" : "시스템"}

+                              </Badge>

+                            </div>

+                            <p className="text-xs text-muted-foreground mt-1">

+                              {formatDate(attachment.createdAt)}

+                            </p>

+                            {attachment.description && (

+                              <p className="text-xs text-muted-foreground mt-1 break-words">

+                                {attachment.description}

+                              </p>

+                            )}

+                          </div>

+                        </div>

+                      </div>

+

+                      <div className="flex flex-col gap-1">

+                        {/* 다운로드 버튼 */}

+                        <Button

+                          variant="ghost"

+                          size="icon"

+                          className="h-8 w-8"

+                          onClick={() => handleDownload(attachment)}

+                          title="다운로드"

+                        >

+                          <Download className="h-4 w-4" />

+                        </Button>

+                      </div>

+                    </div>

+                  ))}

+

+                  {/* 그룹 간 구분선 (마지막 그룹 제외) */}

+                  {groupIndex < groupedAttachments.length - 1 && (

+                    <Separator className="my-4" />

+                  )}

+                </div>

+              ))}

+            </div>

+          )}

+        </div>

+      </SheetContent>

+    </Sheet>

+  )

+} 
\ No newline at end of file