(대표님) lib 파트 커밋

1 files changed, 518 insertions, 0 deletions

diff --git a/lib/procurement-rfqs/table/detail-table/vendor-communication-drawer.tsx b/lib/procurement-rfqs/table/detail-table/vendor-communication-drawer.tsx
new file mode 100644
index 00000000..34efdfc2
--- /dev/null
+++ b/lib/procurement-rfqs/table/detail-table/vendor-communication-drawer.tsx
@@ -0,0 +1,518 @@
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useRef } from "react"
+import { ProcurementRfqsView } from "@/db/schema"
+import { RfqDetailView } from "./rfq-detail-column"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "sonner"
+import { 
+  Send, 
+  Paperclip, 
+  DownloadCloud, 
+  File, 
+  FileText, 
+  Image as ImageIcon,
+  AlertCircle,
+  X
+} from "lucide-react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { formatDateTime } from "@/lib/utils"
+import { formatFileSize } from "@/lib/utils" // formatFileSize 유틸리티 임포트
+import { fetchVendorComments, markMessagesAsRead } from "@/lib/procurement-rfqs/services"
+
+// 타입 정의
+interface Comment {
+  id: number;
+  rfqId: number;
+  vendorId: number | null  // null 허용으로 변경
+  userId?: number | null   // null 허용으로 변경
+  content: string;
+  isVendorComment: boolean | null; // null 허용으로 변경
+  createdAt: Date;
+  updatedAt: Date;
+  userName?: string | null  // null 허용으로 변경
+  vendorName?: string | null  // null 허용으로 변경
+  attachments: Attachment[];
+  isRead: boolean | null   // null 허용으로 변경
+}
+
+interface Attachment {
+  id: number;
+  fileName: string;
+  fileSize: number;
+  fileType: string;
+  filePath: string;
+  uploadedAt: Date;
+}
+
+// 프롭스 정의
+interface VendorCommunicationDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedRfq: ProcurementRfqsView | null;
+  selectedVendor: RfqDetailView | null;
+  onSuccess?: () => void;
+}
+
+async function sendComment(params: {
+  rfqId: number;
+  vendorId: number;
+  content: string;
+  attachments?: File[];
+}): Promise<Comment> {
+  try {
+    // 폼 데이터 생성 (파일 첨부를 위해)
+    const formData = new FormData();
+    formData.append('rfqId', params.rfqId.toString());
+    formData.append('vendorId', params.vendorId.toString());
+    formData.append('content', params.content);
+    formData.append('isVendorComment', 'false');
+    
+    // 첨부파일 추가
+    if (params.attachments && params.attachments.length > 0) {
+      params.attachments.forEach((file) => {
+        formData.append(`attachments`, file);
+      });
+    }
+    
+    // API 엔드포인트 구성
+    const url = `/api/procurement-rfqs/${params.rfqId}/vendors/${params.vendorId}/comments`;
+    
+    // API 호출
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData, // multipart/form-data 형식 사용
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`API 요청 실패: ${response.status} ${errorText}`);
+    }
+
+    // 응답 데이터 파싱
+    const result = await response.json();
+    
+    if (!result.success || !result.data) {
+      throw new Error(result.message || '코멘트 전송 중 오류가 발생했습니다');
+    }
+
+    return result.data.comment;
+  } catch (error) {
+    console.error('코멘트 전송 오류:', error);
+    throw error;
+  }
+}
+
+export function VendorCommunicationDrawer({
+  open,
+  onOpenChange,
+  selectedRfq,
+  selectedVendor,
+  onSuccess
+}: VendorCommunicationDrawerProps) {
+  // 상태 관리
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState("");
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  
+  // 첨부파일 관련 상태
+  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+  const [selectedAttachment, setSelectedAttachment] = useState<Attachment | null>(null);
+  
+  // 드로어가 열릴 때 데이터 로드
+  useEffect(() => {
+    if (open && selectedRfq && selectedVendor) {
+      loadComments();
+    }
+  }, [open, selectedRfq, selectedVendor]);
+  
+  // 스크롤 최하단으로 이동
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [comments]);
+  
+  // 코멘트 로드 함수
+  const loadComments = async () => {
+    if (!selectedRfq || !selectedVendor) return;
+    
+    try {
+      setIsLoading(true);
+      
+      // Server Action을 사용하여 코멘트 데이터 가져오기
+      const commentsData = await fetchVendorComments(selectedRfq.id, selectedVendor.vendorId);
+      setComments(commentsData);
+      
+      // Server Action을 사용하여 읽지 않은 메시지를 읽음 상태로 변경
+      await markMessagesAsRead(selectedRfq.id, selectedVendor.vendorId);
+    } catch (error) {
+      console.error("코멘트 로드 오류:", error);
+      toast.error("메시지를 불러오는 중 오류가 발생했습니다");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  // 파일 선택 핸들러
+  const handleFileSelect = () => {
+    fileInputRef.current?.click();
+  };
+  
+  // 파일 변경 핸들러
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const newFiles = Array.from(e.target.files);
+      setAttachments(prev => [...prev, ...newFiles]);
+    }
+  };
+  
+  // 파일 제거 핸들러
+  const handleRemoveFile = (index: number) => {
+    setAttachments(prev => prev.filter((_, i) => i !== index));
+  };
+  
+  console.log(newComment)
+
+  // 코멘트 전송 핸들러
+  const handleSubmitComment = async () => {
+    console.log("버튼 클릭1", selectedRfq,selectedVendor, selectedVendor?.vendorId )
+    console.log(!newComment.trim() && attachments.length === 0)
+
+    if (!newComment.trim() && attachments.length === 0) return;
+    if (!selectedRfq || !selectedVendor || !selectedVendor.vendorId) return;
+
+    console.log("버튼 클릭")
+    
+    try {
+      setIsSubmitting(true);
+      
+      // API를 사용하여 새 코멘트 전송 (파일 업로드 때문에 FormData 사용)
+      const newCommentObj = await sendComment({
+        rfqId: selectedRfq.id,
+        vendorId: selectedVendor.vendorId,
+        content: newComment,
+        attachments: attachments
+      });
+      
+      // 상태 업데이트
+      setComments(prev => [...prev, newCommentObj]);
+      setNewComment("");
+      setAttachments([]);
+      
+      toast.success("메시지가 전송되었습니다");
+      
+      // 데이터 새로고침
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error) {
+      console.error("코멘트 전송 오류:", error);
+      toast.error("메시지 전송 중 오류가 발생했습니다");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  
+  // 첨부파일 미리보기
+  const handleAttachmentPreview = (attachment: Attachment) => {
+    setSelectedAttachment(attachment);
+    setPreviewDialogOpen(true);
+  };
+  
+  // 첨부파일 다운로드
+  const handleAttachmentDownload = (attachment: Attachment) => {
+    // TODO: 실제 다운로드 구현
+    window.open(attachment.filePath, '_blank');
+  };
+  
+  // 파일 아이콘 선택
+  const getFileIcon = (fileType: string) => {
+    if (fileType.startsWith("image/")) return <ImageIcon className="h-5 w-5 text-blue-500" />;
+    if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />;
+    if (fileType.includes("spreadsheet") || fileType.includes("excel")) 
+      return <FileText className="h-5 w-5 text-green-500" />;
+    if (fileType.includes("document") || fileType.includes("word")) 
+      return <FileText className="h-5 w-5 text-blue-500" />;
+    return <File className="h-5 w-5 text-gray-500" />;
+  };
+  
+  // 첨부파일 미리보기 다이얼로그
+  const renderAttachmentPreviewDialog = () => {
+    if (!selectedAttachment) return null;
+    
+    const isImage = selectedAttachment.fileType.startsWith("image/");
+    const isPdf = selectedAttachment.fileType.includes("pdf");
+    
+    return (
+      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {getFileIcon(selectedAttachment.fileType)}
+              {selectedAttachment.fileName}
+            </DialogTitle>
+            <DialogDescription>
+              {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt)}
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="min-h-[300px] flex items-center justify-center p-4">
+            {isImage ? (
+              <img 
+                src={selectedAttachment.filePath} 
+                alt={selectedAttachment.fileName}
+                className="max-h-[500px] max-w-full object-contain"
+              />
+            ) : isPdf ? (
+              <iframe 
+                src={`${selectedAttachment.filePath}#toolbar=0`} 
+                className="w-full h-[500px]" 
+                title={selectedAttachment.fileName}
+              />
+            ) : (
+              <div className="flex flex-col items-center gap-4 p-8">
+                {getFileIcon(selectedAttachment.fileType)}
+                <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p>
+                <Button 
+                  variant="outline"
+                  onClick={() => handleAttachmentDownload(selectedAttachment)}
+                >
+                  <DownloadCloud className="h-4 w-4 mr-2" />
+                  다운로드
+                </Button>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  };
+  
+  if (!selectedRfq || !selectedVendor) {
+    return null;
+  }
+  
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent className="max-h-[85vh]">
+        <DrawerHeader className="border-b">
+          <DrawerTitle className="flex items-center gap-2">
+            <Avatar className="h-8 w-8">
+              <AvatarFallback className="bg-primary/10">
+                {selectedVendor.vendorName?.[0] || 'V'}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <span>{selectedVendor.vendorName}</span>
+              <Badge variant="outline" className="ml-2">{selectedVendor.vendorCode}</Badge>
+            </div>
+          </DrawerTitle>
+          <DrawerDescription>
+            RFQ: {selectedRfq.rfqCode} • 프로젝트: {selectedRfq.projectName}
+          </DrawerDescription>
+        </DrawerHeader>
+        
+        <div className="p-0 flex flex-col h-[60vh]">
+          {/* 메시지 목록 */}
+          <ScrollArea className="flex-1 p-4">
+            {isLoading ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-muted-foreground">메시지 로딩 중...</p>
+              </div>
+            ) : comments.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <div className="flex flex-col items-center gap-2">
+                  <AlertCircle className="h-6 w-6 text-muted-foreground" />
+                  <p className="text-muted-foreground">아직 메시지가 없습니다</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {comments.map(comment => (
+                  <div 
+                    key={comment.id} 
+                    className={`flex gap-3 ${comment.isVendorComment ? 'justify-start' : 'justify-end'}`}
+                  >
+                    {comment.isVendorComment && (
+                      <Avatar className="h-8 w-8 mt-1">
+                        <AvatarFallback className="bg-primary/10">
+                          {comment.vendorName?.[0] || 'V'}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+                    
+                    <div className={`rounded-lg p-3 max-w-[80%] ${
+                      comment.isVendorComment 
+                        ? 'bg-muted' 
+                        : 'bg-primary text-primary-foreground'
+                    }`}>
+                      <div className="text-sm font-medium mb-1">
+                        {comment.isVendorComment ? comment.vendorName : comment.userName}
+                      </div>
+                      
+                      {comment.content && (
+                        <div className="text-sm whitespace-pre-wrap break-words">
+                          {comment.content}
+                        </div>
+                      )}
+                      
+                      {/* 첨부파일 표시 */}
+                      {comment.attachments.length > 0 && (
+                        <div className={`mt-2 pt-2 ${
+                          comment.isVendorComment 
+                            ? 'border-t border-t-border/30' 
+                            : 'border-t border-t-primary-foreground/20'
+                        }`}>
+                          {comment.attachments.map(attachment => (
+                            <div 
+                              key={attachment.id} 
+                              className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer"
+                              onClick={() => handleAttachmentPreview(attachment)}
+                            >
+                              {getFileIcon(attachment.fileType)}
+                              <span className="flex-1 truncate">{attachment.fileName}</span>
+                              <span className="text-xs opacity-70">
+                                {formatFileSize(attachment.fileSize)}
+                              </span>
+                              <Button 
+                                variant="ghost" 
+                                size="icon" 
+                                className="h-6 w-6 rounded-full"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleAttachmentDownload(attachment);
+                                }}
+                              >
+                                <DownloadCloud className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      
+                      <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end">
+                        {formatDateTime(comment.createdAt)}
+                      </div>
+                    </div>
+                    
+                    {!comment.isVendorComment && (
+                      <Avatar className="h-8 w-8 mt-1">
+                        <AvatarFallback className="bg-primary/20">
+                          {comment.userName?.[0] || 'U'}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+                  </div>
+                ))}
+                <div ref={messagesEndRef} />
+              </div>
+            )}
+          </ScrollArea>
+          
+          {/* 선택된 첨부파일 표시 */}
+          {attachments.length > 0 && (
+            <div className="p-2 bg-muted mx-4 rounded-md mb-2">
+              <div className="text-xs font-medium mb-1">첨부파일</div>
+              <div className="flex flex-wrap gap-2">
+                {attachments.map((file, index) => (
+                  <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs">
+                    {file.type.startsWith("image/") ? (
+                      <ImageIcon className="h-4 w-4 mr-1 text-blue-500" />
+                    ) : (
+                      <File className="h-4 w-4 mr-1 text-gray-500" />
+                    )}
+                    <span className="truncate max-w-[100px]">{file.name}</span>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-4 w-4 ml-1 p-0"
+                      onClick={() => handleRemoveFile(index)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* 메시지 입력 영역 */}
+          <div className="p-4 border-t">
+            <div className="flex gap-2 items-end">
+              <div className="flex-1">
+                <Textarea
+                  placeholder="메시지를 입력하세요..."
+                  className="min-h-[80px] resize-none"
+                  value={newComment}
+                  onChange={(e) => setNewComment(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  className="hidden"
+                  multiple
+                  onChange={handleFileChange}
+                />
+                <Button 
+                  variant="outline" 
+                  size="icon"
+                  onClick={handleFileSelect}
+                  title="파일 첨부"
+                >
+                  <Paperclip className="h-4 w-4" />
+                </Button>
+                <Button 
+                  onClick={handleSubmitComment}
+                  disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting}
+                >
+                  <Send className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <DrawerFooter className="border-t">
+          <div className="flex justify-between">
+            <Button variant="outline" onClick={() => loadComments()}>
+              새로고침
+            </Button>
+            <DrawerClose asChild>
+              <Button variant="outline">닫기</Button>
+            </DrawerClose>
+          </div>
+        </DrawerFooter>
+      </DrawerContent>
+      
+      {renderAttachmentPreviewDialog()}
+    </Drawer>
+  );
+}
\ No newline at end of file