@farmzone/fz-template-react 1.0.5 → 1.0.7

package/template/src/pages/sample/detail/index.tsx

@@ -1,400 +1,551 @@
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router";
-import { Badge, Button, confirmModal, toast } from "@farmzone/fz-react-ui";
-import { CornerDownRight, Pencil, Trash2 } from "lucide-react";
-
-import {
-  useDeleteComment,
-  useDeleteSample,
-  useGetComments,
-  useGetSample,
-  usePutComment,
-  usePutSample,
-} from "@/app/api/queries";
-import { useUserStore } from "@/app/store";
-import type { Comment } from "@/types";
-import ListHeader from "@/app/layout/ListHeader";
-import CommentInput from "@/shared/components/CommentInput";
-import { formatDateTime } from "@/shared/utils/format";
-import ListContents from "@/app/layout/ListContents";
-import { SampleFormModal } from "../SampleFormModal";
-import type { SampleFormData } from "../SampleFormModal";
-
-function countComments(list: Array<Comment>): number {
-  return list.reduce((sum, c) => {
-    const depth2 = c.replies ?? [];
-    const depth3Count = depth2.reduce((s, r) => s + (r.replies?.length ?? 0), 0);
-    return sum + 1 + depth2.length + depth3Count;
-  }, 0);
-}
-
-export default function SampleDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const sampleId = Number(id);
-  const navigate = useNavigate();
-  const currentUser = useUserStore((s) => s.user);
-
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [replyingToId, setReplyingToId] = useState<number | null>(null);
-  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
-
-  const { data: sample, isLoading } = useGetSample(sampleId);
-  const { data: comments = [] } = useGetComments("SAMPLE", sampleId);
-  const { mutateAsync: putSample, isPending: isUpdating } = usePutSample();
-  const { mutateAsync: deleteSample } = useDeleteSample();
-  const { mutateAsync: deleteComment } = useDeleteComment();
-  const { mutateAsync: putComment, isPending: isCommentUpdating } = usePutComment();
-
-  const topComments = comments.filter((c) => c.parentCommentId === null);
-  const totalCommentCount = countComments(topComments);
-
-  const openEditModal = () => setIsEditOpen(true);
-  const closeEditModal = () => setIsEditOpen(false);
-
-  const handleEdit = async (data: SampleFormData) => {
-    await putSample({
-      id: sampleId,
-      data: {
-        name: data.name,
-        description: data.description,
-        category: data.category as "BASIC" | "ADVANCED",
-        priority: data.priority,
-        active: data.active,
-      },
-    });
-    closeEditModal();
-  };
-
-  const handleDelete = () => {
-    if (!sample) return;
-    confirmModal({
-      content: `"${sample.name}"을(를) 삭제하시겠습니까?`,
-      onOk: async () => {
-        await deleteSample(sampleId);
-        navigate("/sample");
-      },
-      onCancel: () => {},
-      className: "max-w-100",
-    });
-  };
-
-  const isCommentOwner = (commentUserId: number | null) =>
-    commentUserId !== null && String(commentUserId) === currentUser?.id;
-
-  const handleCommentEditStart = (comment: Comment) => {
-    if (!isCommentOwner(comment.userId)) {
-      toast.error("본인의 댓글만 수정할 수 있습니다.");
-      return;
-    }
-    setEditingCommentId(comment.id);
-  };
-
-  const handleCommentDelete = (commentId: number, commentUserId: number | null) => {
-    if (!isCommentOwner(commentUserId)) {
-      toast.error("본인의 댓글만 삭제할 수 있습니다.");
-      return;
-    }
-    confirmModal({
-      content: "댓글을 삭제하시겠습니까?",
-      onOk: async () => {
-        await deleteComment(commentId);
-      },
-      onCancel: () => {},
-      className: "max-w-100",
-    });
-  };
-
-  const handleCommentSave = async (commentId: number, content: string, mentionUserIds: Array<number>) => {
-    await putComment({
-      commentId,
-      data: { content, mentionUserIds: mentionUserIds.length > 0 ? mentionUserIds : undefined },
-    });
-    setEditingCommentId(null);
-  };
-
-  const renderCommentActions = (comment: Comment) => {
-    if (!isCommentOwner(comment.userId)) return null;
-    return (
-      <div className="flex shrink-0 items-center gap-0.5">
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          onClick={() => handleCommentEditStart(comment)}
-          className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-blue-500"
-          aria-label="댓글 수정"
-        >
-          <Pencil size={14} />
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          onClick={() => handleCommentDelete(comment.id, comment.userId)}
-          className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500"
-          aria-label="댓글 삭제"
-        >
-          <Trash2 size={14} />
-        </Button>
-      </div>
-    );
-  };
-
-  const editDefaultValues: SampleFormData | undefined = sample
-    ? { name: sample.name, description: sample.description, category: sample.category, priority: sample.priority, active: sample.active }
-    : undefined;
-
-  return (
-    <div className="p-6">
-      <ListHeader
-        title="샘플 상세"
-        rightArea={
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={() => navigate("/sample")}>
-              목록
-            </Button>
-            {sample && (
-              <>
-                <Button variant="save" onClick={openEditModal}>
-                  수정
-                </Button>
-                <Button variant="delete" onClick={handleDelete}>
-                  삭제
-                </Button>
-              </>
-            )}
-          </div>
-        }
-      />
-
-      <ListContents>
-        {/* 샘플 상세 */}
-        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
-          {isLoading ? (
-            <div className="p-8 text-center text-sm text-gray-400">불러오는 중...</div>
-          ) : sample ? (
-            <>
-              <div className="border-b border-gray-100 bg-gray-50/50 px-6 py-5">
-                <h2 className="mb-3 text-xl font-bold leading-tight text-gray-900">{sample.name}</h2>
-                <div className="flex items-center gap-3 text-xs text-gray-500">
-                  <Badge
-                    text={sample.category === "BASIC" ? "기본" : "고급"}
-                    className={`scale-90 ${
-                      sample.category === "BASIC"
-                        ? "bg-blue-100 text-blue-700 border-blue-100"
-                        : "bg-purple-100 text-purple-700 border-purple-100"
-                    }`}
-                  />
-                  <Badge
-                    text={sample.active ? "사용" : "미사용"}
-                    className={`scale-90 ${
-                      sample.active
-                        ? "bg-green-100 text-green-700 border-green-100"
-                        : "bg-red-100 text-red-500 border-red-100"
-                    }`}
-                  />
-                  <span className="text-gray-300">|</span>
-                  <span>우선순위 {sample.priority}</span>
-                  <span className="text-gray-300">|</span>
-                  <span>등록일 {formatDateTime(sample.createdAt)}</span>
-                  <span className="text-gray-300">|</span>
-                  <span>수정일 {formatDateTime(sample.updatedAt)}</span>
-                </div>
-              </div>
-
-              <div className="min-h-44 px-6 py-6">
-                <p className="whitespace-pre-wrap text-sm leading-7 text-gray-800">{sample.description}</p>
-              </div>
-            </>
-          ) : (
-            <div className="p-8 text-center text-sm text-gray-400">샘플을 찾을 수 없습니다.</div>
-          )}
-        </div>
-
-        {/* 댓글 섹션 */}
-        <div className="rounded-xl border border-gray-200 bg-white">
-          <div className="border-b border-gray-100 px-5 py-3">
-            <h3 className="text-sm font-semibold text-gray-700">댓글 {totalCommentCount}개</h3>
-          </div>
-
-          {topComments.length > 0 ? (
-            <ul className="divide-y divide-gray-100">
-              {topComments.map((comment) => {
-                const depth2Replies = comment.replies ?? [];
-                const isReplying = replyingToId === comment.id;
-                const isEditing = editingCommentId === comment.id;
-
-                return (
-                  <li key={comment.id}>
-                    {/* depth 1: 원댓글 */}
-                    <div className="flex items-start gap-3 px-5 py-4">
-                      <div className="flex-1 space-y-1">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-semibold text-gray-800">
-                            {comment.userName || "알수없음"}
-                          </span>
-                          <span className="text-xs text-gray-400">{formatDateTime(comment.createdAt)}</span>
-                        </div>
-                        {isEditing ? (
-                          <CommentInput
-                            initialContent={comment.content}
-                            initialMentionUserIds={comment.mentionUserIds ?? []}
-                            onSave={(content, mentionUserIds) =>
-                              handleCommentSave(comment.id, content, mentionUserIds)
-                            }
-                            isSaving={isCommentUpdating}
-                            saveLabel="저장"
-                            onCancel={() => setEditingCommentId(null)}
-                          />
-                        ) : (
-                          <>
-                            <p className="whitespace-pre-wrap text-sm text-gray-700">{comment.content}</p>
-                            {!comment.deletedAt && (
-                              <button
-                                type="button"
-                                onClick={() => setReplyingToId(isReplying ? null : comment.id)}
-                                className="mt-0.5 flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-blue-500"
-                              >
-                                <CornerDownRight size={11} />
-                                {isReplying ? "취소" : "답글"}
-                              </button>
-                            )}
-                          </>
-                        )}
-                      </div>
-                      {!isEditing && renderCommentActions(comment)}
-                    </div>
-
-                    {/* depth 2: 대댓글 목록 */}
-                    {depth2Replies.length > 0 && (
-                      <ul className="border-t border-gray-50 bg-gray-50/60">
-                        {depth2Replies.map((reply) => {
-                          const depth3Replies = reply.replies ?? [];
-                          const isEditingReply = editingCommentId === reply.id;
-
-                          return (
-                            <li key={reply.id} className="border-b border-gray-100 last:border-0">
-                              <div className="flex items-start gap-2.5 py-3 pl-10 pr-5">
-                                <CornerDownRight size={13} className="mt-0.5 shrink-0 text-gray-300" />
-                                <div className="flex-1 space-y-0.5">
-                                  <div className="flex items-center gap-2">
-                                    <span className="text-sm font-semibold text-gray-800">
-                                      {reply.userName}
-                                    </span>
-                                    <span className="text-xs text-gray-400">
-                                      {formatDateTime(reply.createdAt)}
-                                    </span>
-                                  </div>
-                                  {isEditingReply ? (
-                                    <CommentInput
-                                      initialContent={reply.content}
-                                      initialMentionUserIds={reply.mentionUserIds ?? []}
-                                      onSave={(content, mentionUserIds) =>
-                                        handleCommentSave(reply.id, content, mentionUserIds)
-                                      }
-                                      isSaving={isCommentUpdating}
-                                      saveLabel="저장"
-                                      onCancel={() => setEditingCommentId(null)}
-                                    />
-                                  ) : (
-                                    <p className="whitespace-pre-wrap text-sm text-gray-600">
-                                      {reply.content}
-                                    </p>
-                                  )}
-                                </div>
-                                {!isEditingReply && renderCommentActions(reply)}
-                              </div>
-
-                              {/* depth 3: 대대댓글 목록 (답글 버튼 없음) */}
-                              {depth3Replies.length > 0 && (
-                                <ul className="bg-gray-100/50">
-                                  {depth3Replies.map((deepReply) => {
-                                    const isEditingDeepReply = editingCommentId === deepReply.id;
-                                    return (
-                                      <li
-                                        key={deepReply.id}
-                                        className="flex items-start gap-2.5 border-b border-gray-100 py-3 pl-16 pr-5 last:border-0"
-                                      >
-                                        <CornerDownRight
-                                          size={13}
-                                          className="mt-0.5 shrink-0 text-gray-200"
-                                        />
-                                        <div className="flex-1 space-y-0.5">
-                                          <div className="flex items-center gap-2">
-                                            <span className="text-sm font-semibold text-gray-800">
-                                              {deepReply.userName}
-                                            </span>
-                                            <span className="text-xs text-gray-400">
-                                              {formatDateTime(deepReply.createdAt)}
-                                            </span>
-                                          </div>
-                                          {isEditingDeepReply ? (
-                                            <CommentInput
-                                              initialContent={deepReply.content}
-                                              initialMentionUserIds={deepReply.mentionUserIds ?? []}
-                                              onSave={(content, mentionUserIds) =>
-                                                handleCommentSave(deepReply.id, content, mentionUserIds)
-                                              }
-                                              isSaving={isCommentUpdating}
-                                              saveLabel="저장"
-                                              onCancel={() => setEditingCommentId(null)}
-                                            />
-                                          ) : (
-                                            <p className="whitespace-pre-wrap text-sm text-gray-600">
-                                              {deepReply.content}
-                                            </p>
-                                          )}
-                                        </div>
-                                        {!isEditingDeepReply && renderCommentActions(deepReply)}
-                                      </li>
-                                    );
-                                  })}
-                                </ul>
-                              )}
-
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    )}
-
-                    {/* depth 1 답글 입력창 */}
-                    {isReplying && !isEditing && (
-                      <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-10 pr-5">
-                        <CommentInput
-                          targetType="SAMPLE"
-                          targetId={sampleId}
-                          parentCommentId={comment.id}
-                          placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
-                          onSuccess={() => setReplyingToId(null)}
-                        />
-                      </div>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          ) : (
-            <div className="px-5 py-6 text-center text-sm text-gray-400">등록된 댓글이 없습니다.</div>
-          )}
-
-          {/* 최상위 댓글 입력창 */}
-          <div className="border-t border-gray-100 px-5 py-4">
-            <CommentInput targetType="SAMPLE" targetId={sampleId} parentCommentId={null} />
-          </div>
-        </div>
-      </ListContents>
-
-      {/* 수정 모달 */}
-      <SampleFormModal
-        mode="edit"
-        isOpen={isEditOpen}
-        onClose={closeEditModal}
-        defaultValues={editDefaultValues}
-        onSubmit={handleEdit}
-        isPending={isUpdating}
-        formKey={sampleId}
-      />
-    </div>
-  );
-}
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import {
+  Badge,
+  Button,
+  confirmModal,
+  FilePreviewViewer,
+  toast,
+  useFilePreviewViewer,
+} from "@farmzone/fz-react-ui";
+import { CornerDownRight, Pencil, Trash2 } from "lucide-react";
+
+import {
+  useDeleteComment,
+  useDeleteSample,
+  useGetComments,
+  useGetSample,
+  usePutComment,
+  usePutSample,
+} from "@/app/api/queries";
+import { useUserStore } from "@/app/store";
+import type { Comment, FileResponse } from "@/types";
+import { apiFileInstance } from "@/app/api/api";
+import ListHeader from "@/app/layout/ListHeader";
+import CommentInput from "@/shared/components/CommentInput";
+import { formatDateTime } from "@/shared/utils/format";
+import ListContents from "@/app/layout/ListContents";
+import FilePreviewCard from "@/shared/components/FilePreviewCard";
+import { SampleFormModal } from "../SampleFormModal";
+import type { SampleFormData } from "../SampleFormModal";
+
+function toPreviewFileType(mimeType: string): "image" | "pdf" | "unsupported" {
+  if (mimeType?.startsWith("image/")) return "image";
+  if (mimeType === "application/pdf") return "pdf";
+  return "unsupported";
+}
+
+function countComments(list: Array<Comment>): number {
+  return list.reduce((sum, c) => {
+    const depth2 = c.replies ?? [];
+    const depth3Count = depth2.reduce((s, r) => s + (r.replies?.length ?? 0), 0);
+    return sum + 1 + depth2.length + depth3Count;
+  }, 0);
+}
+
+export default function SampleDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const sampleId = Number(id);
+  const navigate = useNavigate();
+  const currentUser = useUserStore((s) => s.user);
+
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [replyingToId, setReplyingToId] = useState<number | null>(null);
+  const [replyingToReplyId, setReplyingToReplyId] = useState<number | null>(null);
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [pendingFiles, setPendingFiles] = useState<Array<File>>([]);
+  const [existingFiles, setExistingFiles] = useState<Array<FileResponse>>([]);
+  const [deleteFileIds, setDeleteFileIds] = useState<Array<number>>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [blobUrls, setBlobUrls] = useState<Array<string>>([]);
+  const [previewFileNames, setPreviewFileNames] = useState<Array<string>>([]);
+  const [previewFileTypes, setPreviewFileTypes] = useState<Array<"image" | "pdf" | "unsupported">>([]);
+
+  const { data: sample, isLoading } = useGetSample(sampleId);
+  const { data: comments = [] } = useGetComments("SAMPLE", sampleId);
+  const { mutateAsync: putSample, isPending: isUpdating } = usePutSample();
+  const { mutateAsync: deleteSample } = useDeleteSample();
+  const { mutateAsync: deleteComment } = useDeleteComment();
+  const { mutateAsync: putComment, isPending: isCommentUpdating } = usePutComment();
+
+  const sampleFiles = sample?.files ?? [];
+  const topComments = comments.filter((c) => c.parentCommentId === null);
+  const totalCommentCount = countComments(topComments);
+
+  useEffect(() => {
+    if (sampleFiles.length === 0) {
+      setBlobUrls([]);
+      setPreviewFileNames([]);
+      setPreviewFileTypes([]);
+      return;
+    }
+
+    let cancelled = false;
+    const createdUrls: Array<string> = [];
+
+    (async () => {
+      const results = await Promise.all(
+        sampleFiles.map(async (file) => {
+          try {
+            const { data: blob } = await apiFileInstance.get(file.filePath, { responseType: "blob" });
+            const url = URL.createObjectURL(blob);
+            createdUrls.push(url);
+            return { url, name: file.fileName, type: toPreviewFileType(file.fileType) };
+          } catch {
+            return { url: "", name: file.fileName, type: "unsupported" as const };
+          }
+        }),
+      );
+      if (!cancelled) {
+        setBlobUrls(results.map((r) => r.url));
+        setPreviewFileNames(results.map((r) => r.name));
+        setPreviewFileTypes(results.map((r) => r.type));
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      createdUrls.forEach((url) => url && URL.revokeObjectURL(url));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sampleFiles.length, sampleFiles[0]?.id]);
+
+  const filePreview = useFilePreviewViewer(blobUrls);
+
+  const openEditModal = () => {
+    setPendingFiles([]);
+    setExistingFiles(sample?.files ?? []);
+    setDeleteFileIds([]);
+    setIsEditOpen(true);
+  };
+
+  const closeEditModal = () => {
+    setIsEditOpen(false);
+    setPendingFiles([]);
+    setExistingFiles([]);
+    setDeleteFileIds([]);
+  };
+
+  const handleDeleteExistingFile = (fileId: number) => {
+    setExistingFiles((prev) => prev.filter((f) => f.id !== fileId));
+    setDeleteFileIds((prev) => [...prev, fileId]);
+  };
+
+  const handleEdit = async (data: SampleFormData) => {
+    setIsUploading(true);
+    try {
+      await putSample({
+        id: sampleId,
+        data: {
+          name: data.name,
+          description: data.description,
+          category: data.category as "BASIC" | "ADVANCED",
+          priority: data.priority,
+          active: data.active,
+          deleteFileIds: deleteFileIds.length > 0 ? deleteFileIds : undefined,
+        },
+        files: pendingFiles.length > 0 ? pendingFiles : undefined,
+      });
+      closeEditModal();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDelete = () => {
+    if (!sample) return;
+    confirmModal({
+      content: `"${sample.name}"을(를) 삭제하시겠습니까?`,
+      onOk: async () => {
+        await deleteSample(sampleId);
+        navigate("/sample");
+      },
+      onCancel: () => {},
+      className: "max-w-100",
+    });
+  };
+
+  const isCommentOwner = (commentUserId: number | null) =>
+    commentUserId !== null && String(commentUserId) === String(currentUser?.id);
+
+  const handleCommentEditStart = (comment: Comment) => {
+    if (!isCommentOwner(comment.userId)) {
+      toast.error("본인의 댓글만 수정할 수 있습니다.");
+      return;
+    }
+    setEditingCommentId(comment.id);
+  };
+
+  const handleCommentDelete = (commentId: number, commentUserId: number | null) => {
+    if (!isCommentOwner(commentUserId)) {
+      toast.error("본인의 댓글만 삭제할 수 있습니다.");
+      return;
+    }
+    confirmModal({
+      content: "댓글을 삭제하시겠습니까?",
+      onOk: async () => {
+        await deleteComment(commentId);
+      },
+      onCancel: () => {},
+      className: "max-w-100",
+    });
+  };
+
+  const handleCommentSave = async (commentId: number, content: string, mentionUserIds: Array<number>) => {
+    await putComment({
+      commentId,
+      data: { content, mentionUserIds: mentionUserIds.length > 0 ? mentionUserIds : undefined },
+    });
+    setEditingCommentId(null);
+  };
+
+  const renderCommentActions = (comment: Comment) => {
+    if (!isCommentOwner(comment.userId)) return null;
+    return (
+      <div className="flex shrink-0 items-center gap-0.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => handleCommentEditStart(comment)}
+          className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-blue-500"
+          aria-label="댓글 수정"
+        >
+          <Pencil size={14} />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => handleCommentDelete(comment.id, comment.userId)}
+          className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500"
+          aria-label="댓글 삭제"
+        >
+          <Trash2 size={14} />
+        </Button>
+      </div>
+    );
+  };
+
+  const editDefaultValues: SampleFormData | undefined = sample
+    ? {
+        name: sample.name,
+        description: sample.description,
+        category: sample.category,
+        priority: sample.priority,
+        active: sample.active,
+      }
+    : undefined;
+
+  return (
+    <div className="p-6">
+      <ListHeader
+        title="샘플 상세"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => navigate("/sample")}>
+              목록
+            </Button>
+            {sample && (
+              <>
+                <Button variant="save" onClick={openEditModal}>
+                  수정
+                </Button>
+                <Button variant="delete" onClick={handleDelete}>
+                  삭제
+                </Button>
+              </>
+            )}
+          </div>
+        }
+      />
+
+      <ListContents>
+        {/* 샘플 상세 */}
+        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+          {isLoading ? (
+            <div className="p-8 text-center text-sm text-gray-400">불러오는 중...</div>
+          ) : sample ? (
+            <>
+              <div className="border-b border-gray-100 bg-gray-50/50 px-6 py-5">
+                <h2 className="mb-3 text-xl font-bold leading-tight text-gray-900">{sample.name}</h2>
+                <div className="flex items-center gap-3 text-xs text-gray-500">
+                  <Badge
+                    text={sample.category === "BASIC" ? "기본" : "고급"}
+                    className={`scale-90 ${
+                      sample.category === "BASIC"
+                        ? "bg-blue-100 text-blue-700 border-blue-100"
+                        : "bg-purple-100 text-purple-700 border-purple-100"
+                    }`}
+                  />
+                  <Badge
+                    text={sample.active ? "사용" : "미사용"}
+                    className={`scale-90 ${
+                      sample.active
+                        ? "bg-green-100 text-green-700 border-green-100"
+                        : "bg-red-100 text-red-500 border-red-100"
+                    }`}
+                  />
+                  <span className="text-gray-300">|</span>
+                  <span>우선순위 {sample.priority}</span>
+                  <span className="text-gray-300">|</span>
+                  <span>등록일 {formatDateTime(sample.createdAt)}</span>
+                  <span className="text-gray-300">|</span>
+                  <span>수정일 {formatDateTime(sample.updatedAt)}</span>
+                </div>
+              </div>
+
+              <div className="min-h-44 px-6 py-6">
+                <p className="whitespace-pre-wrap text-sm leading-7 text-gray-800">{sample.description}</p>
+              </div>
+
+              {sampleFiles.length > 0 && (
+                <>
+                  <div className="m-4 grid grid-cols-8 gap-2 w-full">
+                    {sampleFiles.map((_, idx) => (
+                      <FilePreviewCard
+                        key={idx}
+                        src={blobUrls[idx] ?? ""}
+                        fileName={previewFileNames[idx] ?? ""}
+                        fileType={previewFileTypes[idx]}
+                        onClick={() => filePreview.open(idx)}
+                      />
+                    ))}
+                  </div>
+                  <FilePreviewViewer
+                    {...filePreview.viewerProps}
+                    fileNames={previewFileNames}
+                    fileTypes={previewFileTypes}
+                  />
+                </>
+              )}
+            </>
+          ) : (
+            <div className="p-8 text-center text-sm text-gray-400">샘플을 찾을 수 없습니다.</div>
+          )}
+        </div>
+
+        {/* 댓글 섹션 */}
+        <div className="rounded-xl border border-gray-200 bg-white">
+          <div className="border-b border-gray-100 px-5 py-3">
+            <h3 className="text-sm font-semibold text-gray-700">댓글 {totalCommentCount}개</h3>
+          </div>
+
+          {topComments.length > 0 ? (
+            <ul className="divide-y divide-gray-100">
+              {topComments.map((comment) => {
+                const depth2Replies = comment.replies ?? [];
+                const isReplying = replyingToId === comment.id;
+                const isEditing = editingCommentId === comment.id;
+
+                return (
+                  <li key={comment.id}>
+                    {/* depth 1: 원댓글 */}
+                    <div className="flex items-start gap-3 px-5 py-4">
+                      <div className="flex-1 space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-semibold text-gray-800">
+                            {comment.userName || "알수없음"}
+                          </span>
+                          <span className="text-xs text-gray-400">{formatDateTime(comment.createdAt)}</span>
+                        </div>
+                        {isEditing ? (
+                          <CommentInput
+                            initialContent={comment.content}
+                            initialMentionUserIds={comment.mentionUserIds ?? []}
+                            onSave={(content, mentionUserIds) =>
+                              handleCommentSave(comment.id, content, mentionUserIds)
+                            }
+                            isSaving={isCommentUpdating}
+                            saveLabel="저장"
+                            onCancel={() => setEditingCommentId(null)}
+                          />
+                        ) : (
+                          <>
+                            <p className="whitespace-pre-wrap text-sm text-gray-700">{comment.content}</p>
+                            {!comment.deletedAt && (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setReplyingToReplyId(null);
+                                  setReplyingToId(isReplying ? null : comment.id);
+                                }}
+                                className="mt-0.5 flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-blue-500"
+                              >
+                                <CornerDownRight size={11} />
+                                {isReplying ? "취소" : "답글"}
+                              </button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                      {!isEditing && renderCommentActions(comment)}
+                    </div>
+
+                    {/* depth 2: 대댓글 목록 */}
+                    {depth2Replies.length > 0 && (
+                      <ul className="border-t border-gray-50 bg-gray-50/60">
+                        {depth2Replies.map((reply) => {
+                          const depth3Replies = reply.replies ?? [];
+                          const isEditingReply = editingCommentId === reply.id;
+
+                          return (
+                            <li key={reply.id} className="border-b border-gray-100 last:border-0">
+                              <div className="flex items-start gap-2.5 py-3 pl-10 pr-5">
+                                <CornerDownRight size={13} className="mt-0.5 shrink-0 text-gray-300" />
+                                <div className="flex-1 space-y-0.5">
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-sm font-semibold text-gray-800">
+                                      {reply.userName || "알수없음"}
+                                    </span>
+                                    <span className="text-xs text-gray-400">
+                                      {formatDateTime(reply.createdAt)}
+                                    </span>
+                                  </div>
+                                  {isEditingReply ? (
+                                    <CommentInput
+                                      initialContent={reply.content}
+                                      initialMentionUserIds={reply.mentionUserIds ?? []}
+                                      onSave={(content, mentionUserIds) =>
+                                        handleCommentSave(reply.id, content, mentionUserIds)
+                                      }
+                                      isSaving={isCommentUpdating}
+                                      saveLabel="저장"
+                                      onCancel={() => setEditingCommentId(null)}
+                                    />
+                                  ) : (
+                                    <>
+                                      <p className="whitespace-pre-wrap text-sm text-gray-600">
+                                        {reply.content}
+                                      </p>
+                                      {!reply.deletedAt && (
+                                        <button
+                                          type="button"
+                                          onClick={() => {
+                                            setReplyingToId(null);
+                                            setReplyingToReplyId(
+                                              replyingToReplyId === reply.id ? null : reply.id,
+                                            );
+                                          }}
+                                          className="mt-0.5 flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-blue-500"
+                                        >
+                                          <CornerDownRight size={11} />
+                                          {replyingToReplyId === reply.id ? "취소" : "답글"}
+                                        </button>
+                                      )}
+                                    </>
+                                  )}
+                                </div>
+                                {!isEditingReply && renderCommentActions(reply)}
+                              </div>
+
+                              {/* depth 3: 대대댓글 목록 (답글 버튼 없음) */}
+                              {depth3Replies.length > 0 && (
+                                <ul className="bg-gray-100/50">
+                                  {depth3Replies.map((deepReply) => {
+                                    const isEditingDeepReply = editingCommentId === deepReply.id;
+                                    return (
+                                      <li
+                                        key={deepReply.id}
+                                        className="flex items-start gap-2.5 border-b border-gray-100 py-3 pl-16 pr-5 last:border-0"
+                                      >
+                                        <CornerDownRight
+                                          size={13}
+                                          className="mt-0.5 shrink-0 text-gray-200"
+                                        />
+                                        <div className="flex-1 space-y-0.5">
+                                          <div className="flex items-center gap-2">
+                                            <span className="text-sm font-semibold text-gray-800">
+                                              {deepReply.userName || "알수없음"}
+                                            </span>
+                                            <span className="text-xs text-gray-400">
+                                              {formatDateTime(deepReply.createdAt)}
+                                            </span>
+                                          </div>
+                                          {isEditingDeepReply ? (
+                                            <CommentInput
+                                              initialContent={deepReply.content}
+                                              initialMentionUserIds={deepReply.mentionUserIds ?? []}
+                                              onSave={(content, mentionUserIds) =>
+                                                handleCommentSave(deepReply.id, content, mentionUserIds)
+                                              }
+                                              isSaving={isCommentUpdating}
+                                              saveLabel="저장"
+                                              onCancel={() => setEditingCommentId(null)}
+                                            />
+                                          ) : (
+                                            <p className="whitespace-pre-wrap text-sm text-gray-600">
+                                              {deepReply.content}
+                                            </p>
+                                          )}
+                                        </div>
+                                        {!isEditingDeepReply && renderCommentActions(deepReply)}
+                                      </li>
+                                    );
+                                  })}
+                                </ul>
+                              )}
+
+                              {/* depth-2 답글 입력창 (저장은 depth-1 자식으로) */}
+                              {replyingToReplyId === reply.id && !isEditingReply && (
+                                <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-16 pr-5">
+                                  <CommentInput
+                                    targetType="SAMPLE"
+                                    targetId={sampleId}
+                                    parentCommentId={comment.id}
+                                    placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
+                                    onSuccess={() => setReplyingToReplyId(null)}
+                                  />
+                                </div>
+                              )}
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+
+                    {/* depth 1 답글 입력창 */}
+                    {isReplying && !isEditing && (
+                      <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-10 pr-5">
+                        <CommentInput
+                          targetType="SAMPLE"
+                          targetId={sampleId}
+                          parentCommentId={comment.id}
+                          placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
+                          onSuccess={() => setReplyingToId(null)}
+                        />
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <div className="px-5 py-6 text-center text-sm text-gray-400">등록된 댓글이 없습니다.</div>
+          )}
+
+          {/* 최상위 댓글 입력창 */}
+          <div className="border-t border-gray-100 px-5 py-4">
+            <CommentInput targetType="SAMPLE" targetId={sampleId} parentCommentId={null} />
+          </div>
+        </div>
+      </ListContents>
+
+      {/* 수정 모달 */}
+      <SampleFormModal
+        mode="edit"
+        isOpen={isEditOpen}
+        onClose={closeEditModal}
+        defaultValues={editDefaultValues}
+        onSubmit={handleEdit}
+        isPending={isUpdating || isUploading}
+        formKey={sampleId}
+        originalName={sample?.name}
+        pendingFiles={pendingFiles}
+        onPendingFilesChange={setPendingFiles}
+        existingFiles={existingFiles}
+        onDeleteExistingFile={handleDeleteExistingFile}
+      />
+    </div>
+  );
+}