From ef4c533ebacc2cdc97e518f30e9a9350004fcdfb Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 28 Apr 2025 02:13:30 +0000 Subject: ~20250428 작업사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/rfqs/tbe-table/comments-sheet.tsx | 145 ++++++++++++++++------------------ 1 file changed, 68 insertions(+), 77 deletions(-) (limited to 'lib/rfqs/tbe-table/comments-sheet.tsx') diff --git a/lib/rfqs/tbe-table/comments-sheet.tsx b/lib/rfqs/tbe-table/comments-sheet.tsx index bea1fc8e..6efd631f 100644 --- a/lib/rfqs/tbe-table/comments-sheet.tsx +++ b/lib/rfqs/tbe-table/comments-sheet.tsx @@ -4,7 +4,7 @@ import * as React from "react" import { useForm, useFieldArray } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" -import { Loader, Download, X } from "lucide-react" +import { Download, X, Loader2 } from "lucide-react" import prettyBytes from "pretty-bytes" import { toast } from "sonner" @@ -26,41 +26,34 @@ import { FormLabel, FormMessage, } from "@/components/ui/form" -import { - Textarea, -} from "@/components/ui/textarea" - +import { Textarea } from "@/components/ui/textarea" import { Dropzone, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription, - DropzoneInput + DropzoneInput, } from "@/components/ui/dropzone" - import { Table, TableHeader, TableRow, TableHead, TableBody, - TableCell + TableCell, } from "@/components/ui/table" -// DB 스키마에서 필요한 타입들을 가져온다고 가정 -// (실제 프로젝트에 맞춰 import를 수정하세요.) -import { RfqWithAll } from "@/db/schema/rfq" import { createRfqCommentWithAttachments } from "../service" import { formatDate } from "@/lib/utils" -// 코멘트 + 첨부파일 구조 (단순 예시) -// 실제 DB 스키마에 맞춰 조정 + export interface TbeComment { id: number commentText: string commentedBy?: number - createdAt?: string | Date + commentedByEmail?: string + createdAt?: Date attachments?: { id: number fileName: string @@ -68,23 +61,21 @@ export interface TbeComment { }[] } +// 1) props 정의 interface CommentSheetProps extends React.ComponentPropsWithRef { - /** 코멘트를 작성할 RFQ 정보 */ - /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */ initialComments?: TbeComment[] - - /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */ currentUserId: number - rfqId:number - vendorId:number - /** 댓글 저장 후 갱신용 콜백 (옵션) */ + rfqId: number + tbeId: number + vendorId: number onCommentsUpdated?: (comments: TbeComment[]) => void + isLoading?: boolean // New prop } -// 새 코멘트 작성 폼 스키마 +// 2) 폼 스키마 const commentFormSchema = z.object({ commentText: z.string().min(1, "댓글을 입력하세요."), - newFiles: z.array(z.any()).optional() // File[] + newFiles: z.array(z.any()).optional(), // File[] }) type CommentFormValues = z.infer @@ -95,40 +86,48 @@ export function CommentSheet({ vendorId, initialComments = [], currentUserId, + tbeId, onCommentsUpdated, + isLoading = false, // Default to false ...props }: CommentSheetProps) { + console.log("tbeId", tbeId) + const [comments, setComments] = React.useState(initialComments) const [isPending, startTransition] = React.useTransition() React.useEffect(() => { setComments(initialComments) }, [initialComments]) - - // RHF 세팅 const form = useForm({ resolver: zodResolver(commentFormSchema), defaultValues: { commentText: "", - newFiles: [] - } + newFiles: [], + }, }) - // formFieldArray 예시 (파일 목록) const { fields: newFileFields, append, remove } = useFieldArray({ control: form.control, - name: "newFiles" + name: "newFiles", }) - // 1) 기존 코멘트 + 첨부 보여주기 - // 간단히 테이블 하나로 표현 - // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음 + // (A) 기존 코멘트 렌더링 function renderExistingComments() { + + if (isLoading) { + return ( +
+ + Loading comments... +
+ ) + } + if (comments.length === 0) { return

No comments yet

} - return ( @@ -144,16 +143,15 @@ export function CommentSheet({ {c.commentText} - {/* 첨부파일 표시 */} - {(!c.attachments || c.attachments.length === 0) && ( + {!c.attachments?.length && ( No files )} - {c.attachments && c.attachments.length > 0 && ( + {c.attachments?.length && (
{c.attachments.map((att) => (
)} - { c.createdAt ? formatDate(c.createdAt): "-"} - - {c.commentedBy ?? "-"} - + {c.createdAt ? formatDate(c.createdAt) : "-"} + {c.commentedByEmail ?? "-"} ))} @@ -178,28 +174,28 @@ export function CommentSheet({ ) } - // 2) 새 파일 Drop + // (B) 파일 드롭 function handleDropAccepted(files: File[]) { - // 드롭된 File[]을 RHF field array에 추가 - const toAppend = files.map((f) => f) - append(toAppend) + append(files) } - - // 3) 저장(Submit) + // (C) Submit async function onSubmit(data: CommentFormValues) { - if (!rfqId) return startTransition(async () => { try { - // 서버 액션 호출 + console.log("rfqId", rfqId) + console.log("vendorId", vendorId) + console.log("tbeId", tbeId) + console.log("currentUserId", currentUserId) const res = await createRfqCommentWithAttachments({ - rfqId: rfqId, - vendorId: vendorId, // 필요시 세팅 + rfqId, + vendorId, commentText: data.commentText, commentedBy: currentUserId, - evaluationId: null, // 필요시 세팅 - files: data.newFiles + evaluationId: tbeId, + cbeId: null, + files: data.newFiles, }) if (!res.ok) { @@ -208,23 +204,22 @@ export function CommentSheet({ toast.success("Comment created") - // 새 코멘트를 다시 불러오거나, - // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트 + // 임시로 새 코멘트 추가 const newComment: TbeComment = { - id: res.commentId, // 서버에서 반환된 commentId + id: res.commentId, // 서버 응답 commentText: data.commentText, commentedBy: currentUserId, - createdAt: new Date().toISOString(), - attachments: (data.newFiles?.map((f, idx) => ({ - id: Math.random() * 100000, - fileName: f.name, - filePath: "/uploads/" + f.name, - })) || []) + createdAt: res.createdAt, + attachments: + data.newFiles?.map((f) => ({ + id: Math.floor(Math.random() * 1e6), + fileName: f.name, + filePath: "/uploads/" + f.name, + })) || [], } setComments((prev) => [...prev, newComment]) onCommentsUpdated?.([...comments, newComment]) - // 폼 리셋 form.reset() } catch (err: any) { console.error(err) @@ -243,12 +238,8 @@ export function CommentSheet({ - {/* 기존 코멘트 목록 */} -
- {renderExistingComments()} -
+
{renderExistingComments()}
- {/* 새 코멘트 작성 Form */}
New Comment -