@farmzone/fz-template-react 1.0.2 → 1.0.4

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

@@ -1,548 +1,548 @@
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
-import { useQueryClient } from "@tanstack/react-query";
-
-import { useUserStore } from "@/app/store";
-import {
-  Badge,
-  Button,
-  confirmModal,
-  FilePreviewViewer,
-  getFileLabel,
-  toast,
-  useFilePreviewViewer,
-} from "@farmzone/fz-react-ui";
-import { CornerDownRight, Pencil, Trash2 } from "lucide-react";
-
-import {
-  useDeleteComment,
-  useDeletePost,
-  useGetComments,
-  useGetPost,
-  usePutComment,
-} from "@/app/api/queries";
-import type { Comment, FileResponse } from "@/types";
-import { apiFileInstance, apiFormDataInstance } from "@/app/api/api";
-import { POST_QUERY_KEY } from "@/app/api/queryKey";
-import ListHeader from "@/app/layout/ListHeader";
-import CommentInput from "@/shared/components/CommentInput";
-import { COMMON_MESSAGES } from "@/shared/config/text";
-import { formatDateTime } from "@/shared/utils/format";
-import { PostFormModal } from "../PostFormModal";
-import type { PostFormData } from "../PostFormModal";
-import FilePreviewCard from "@/shared/components/FilePreviewCard";
-
-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);
-}
-
-function toPreviewFileType(mimeType: string): "image" | "pdf" | "unsupported" {
-  if (mimeType?.startsWith("image/")) return "image";
-  if (mimeType === "application/pdf") return "pdf";
-  return "unsupported";
-}
-
-export default function PostDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const postId = Number(id);
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  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);
-
-  // 상세 화면 파일 미리보기용 blob URL 상태
-  const [blobUrls, setBlobUrls] = useState<Array<string>>([]);
-  const [previewFileNames, setPreviewFileNames] = useState<Array<string>>([]);
-  const [previewFileTypes, setPreviewFileTypes] = useState<Array<"image" | "pdf" | "unsupported">>([]);
-
-  // 수정 모달 파일 상태
-  const [pendingFiles, setPendingFiles] = useState<Array<File>>([]);
-  const [existingFiles, setExistingFiles] = useState<Array<FileResponse>>([]);
-  const [deleteFileIds, setDeleteFileIds] = useState<Array<number>>([]);
-  const [isEditUploading, setIsEditUploading] = useState(false);
-
-  const { data: post, isLoading } = useGetPost(postId);
-  const { data: comments = [] } = useGetComments("POST", postId);
-  const { mutateAsync: deletePost } = useDeletePost();
-  const { mutateAsync: deleteComment } = useDeleteComment();
-  const { mutateAsync: putComment, isPending: isCommentUpdating } = usePutComment();
-
-  const postFiles = post?.files ?? [];
-  const topComments = comments.filter((c) => c.parentCommentId === null);
-  const totalCommentCount = countComments(topComments);
-
-  // 첨부파일 blob URL 생성 (FormFile.tsx의 getFiles 패턴)
-  useEffect(() => {
-    if (postFiles.length === 0) {
-      setBlobUrls([]);
-      setPreviewFileNames([]);
-      setPreviewFileTypes([]);
-      return;
-    }
-
-    let cancelled = false;
-    const createdUrls: Array<string> = [];
-
-    (async () => {
-      const results = await Promise.all(
-        postFiles.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));
-    };
-    // postFiles 참조가 바뀔 때만 재실행 (길이 + 첫 id로 비교)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [postFiles.length, postFiles[0]?.id]);
-
-  const filePreview = useFilePreviewViewer(blobUrls);
-
-  const openEditModal = () => {
-    setPendingFiles([]);
-    setExistingFiles(post?.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: PostFormData) => {
-    setIsEditUploading(true);
-    try {
-      const request = {
-        title: data.title,
-        content: data.content,
-        noticeCategory: data.noticeCategory,
-        visible: data.visible,
-        writer: currentUser?.userId ?? "",
-        deleteFileIds,
-      };
-      const formData = new FormData();
-      formData.append("request", JSON.stringify(request));
-      pendingFiles.forEach((f) => formData.append("files", f));
-      await apiFormDataInstance.put(`/posts/${postId}`, formData);
-      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
-      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
-      closeEditModal();
-    } finally {
-      setIsEditUploading(false);
-    }
-  };
-
-  const handleDelete = () => {
-    if (!post) return;
-    confirmModal({
-      content: `"${post.title}" 게시글을 삭제하시겠습니까?`,
-      onOk: async () => {
-        await deletePost(postId);
-        navigate("/post");
-      },
-      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 editDefaultValues: PostFormData | undefined = post
-    ? {
-        title: post.title,
-        content: post.content,
-        noticeCategory: post.noticeCategory,
-        visible: post.visible ?? true,
-      }
-    : undefined;
-
-  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>
-    );
-  };
-
-  return (
-    <div className="p-6">
-      <ListHeader
-        title="게시글 상세"
-        rightArea={
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={() => navigate("/post")}>
-              목록
-            </Button>
-            {post && (
-              <>
-                <Button variant="save" onClick={openEditModal}>
-                  수정
-                </Button>
-                <Button variant="delete" onClick={handleDelete}>
-                  삭제
-                </Button>
-              </>
-            )}
-          </div>
-        }
-      />
-
-      <div className="mt-6 space-y-6">
-        {/* 게시글 - 공지사항 스타일 */}
-        <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>
-          ) : post ? (
-            <>
-              {/* 제목 + 메타 정보 */}
-              <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">{post.title}</h2>
-                <div className="flex items-center gap-3 text-xs text-gray-500">
-                  <Badge
-                    text={post.visible ? "노출" : "미노출"}
-                    className={`scale-90 ${post.visible ? "bg-green-100 text-green-700 border-green-100" : "bg-gray-100 text-gray-500 border-gray-200"}`}
-                  />
-                  <span className="text-gray-300">|</span>
-                  <span>작성자: {post.writer}</span>
-                  <span className="text-gray-300">|</span>
-                  <span>등록일: {formatDateTime(post.createdAt)}</span>
-                  <span className="text-gray-300">|</span>
-                  <span>수정일: {formatDateTime(post.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">{post.content}</p>
-              </div>
-
-              {/* TODO fix issues */}
-              {/* 첨부파일 미리보기 뷰어 */}
-              {postFiles.length > 0 && (
-                <>
-                  <div className="grid grid-cols-2 gap-2 w-full">
-                    {postFiles
-                      .map((postFile) => postFile.filePath)
-                      .map((img, idx) => (
-                        <FilePreviewCard
-                          key={idx}
-                          src={img}
-                          fileName={getFileLabel(img, 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={() => 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 isReplyingToReply = replyingToId === reply.id;
-                          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.content !== "삭제된 댓글입니다." && (
-                                        <button
-                                          type="button"
-                                          onClick={() => setReplyingToId(isReplyingToReply ? 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} />
-                                          {isReplyingToReply ? "취소" : "답글"}
-                                        </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 답글 입력창 */}
-                              {isReplyingToReply && !isEditingReply && (
-                                <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-10 pr-5">
-                                  <CommentInput
-                                    targetType="POST"
-                                    targetId={postId}
-                                    parentCommentId={reply.id}
-                                    placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
-                                    onSuccess={() => setReplyingToId(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="POST"
-                          targetId={postId}
-                          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="POST" targetId={postId} parentCommentId={null} />
-          </div>
-        </div>
-      </div>
-
-      {/* 수정 모달 */}
-      <PostFormModal
-        mode="edit"
-        isOpen={isEditOpen}
-        onClose={closeEditModal}
-        defaultValues={editDefaultValues}
-        onSubmit={handleEdit}
-        isPending={isEditUploading}
-        pendingFiles={pendingFiles}
-        onPendingFilesChange={setPendingFiles}
-        existingFiles={existingFiles}
-        onDeleteExistingFile={handleDeleteExistingFile}
-        formKey={postId}
-      />
-    </div>
-  );
-}
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useUserStore } from "@/app/store";
+import {
+  Badge,
+  Button,
+  confirmModal,
+  FilePreviewViewer,
+  getFileLabel,
+  toast,
+  useFilePreviewViewer,
+} from "@farmzone/fz-react-ui";
+import { CornerDownRight, Pencil, Trash2 } from "lucide-react";
+
+import {
+  useDeleteComment,
+  useDeletePost,
+  useGetComments,
+  useGetPost,
+  usePutComment,
+} from "@/app/api/queries";
+import type { Comment, FileResponse } from "@/types";
+import { apiFileInstance, apiFormDataInstance } from "@/app/api/api";
+import { POST_QUERY_KEY } from "@/app/api/queryKey";
+import ListHeader from "@/app/layout/ListHeader";
+import CommentInput from "@/shared/components/CommentInput";
+import { COMMON_MESSAGES } from "@/shared/config/text";
+import { formatDateTime } from "@/shared/utils/format";
+import { PostFormModal } from "../PostFormModal";
+import type { PostFormData } from "../PostFormModal";
+import FilePreviewCard from "@/shared/components/FilePreviewCard";
+
+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);
+}
+
+function toPreviewFileType(mimeType: string): "image" | "pdf" | "unsupported" {
+  if (mimeType?.startsWith("image/")) return "image";
+  if (mimeType === "application/pdf") return "pdf";
+  return "unsupported";
+}
+
+export default function PostDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const postId = Number(id);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  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);
+
+  // 상세 화면 파일 미리보기용 blob URL 상태
+  const [blobUrls, setBlobUrls] = useState<Array<string>>([]);
+  const [previewFileNames, setPreviewFileNames] = useState<Array<string>>([]);
+  const [previewFileTypes, setPreviewFileTypes] = useState<Array<"image" | "pdf" | "unsupported">>([]);
+
+  // 수정 모달 파일 상태
+  const [pendingFiles, setPendingFiles] = useState<Array<File>>([]);
+  const [existingFiles, setExistingFiles] = useState<Array<FileResponse>>([]);
+  const [deleteFileIds, setDeleteFileIds] = useState<Array<number>>([]);
+  const [isEditUploading, setIsEditUploading] = useState(false);
+
+  const { data: post, isLoading } = useGetPost(postId);
+  const { data: comments = [] } = useGetComments("POST", postId);
+  const { mutateAsync: deletePost } = useDeletePost();
+  const { mutateAsync: deleteComment } = useDeleteComment();
+  const { mutateAsync: putComment, isPending: isCommentUpdating } = usePutComment();
+
+  const postFiles = post?.files ?? [];
+  const topComments = comments.filter((c) => c.parentCommentId === null);
+  const totalCommentCount = countComments(topComments);
+
+  // 첨부파일 blob URL 생성 (FormFile.tsx의 getFiles 패턴)
+  useEffect(() => {
+    if (postFiles.length === 0) {
+      setBlobUrls([]);
+      setPreviewFileNames([]);
+      setPreviewFileTypes([]);
+      return;
+    }
+
+    let cancelled = false;
+    const createdUrls: Array<string> = [];
+
+    (async () => {
+      const results = await Promise.all(
+        postFiles.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));
+    };
+    // postFiles 참조가 바뀔 때만 재실행 (길이 + 첫 id로 비교)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [postFiles.length, postFiles[0]?.id]);
+
+  const filePreview = useFilePreviewViewer(blobUrls);
+
+  const openEditModal = () => {
+    setPendingFiles([]);
+    setExistingFiles(post?.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: PostFormData) => {
+    setIsEditUploading(true);
+    try {
+      const request = {
+        title: data.title,
+        content: data.content,
+        noticeCategory: data.noticeCategory,
+        visible: data.visible,
+        writer: currentUser?.userId ?? "",
+        deleteFileIds,
+      };
+      const formData = new FormData();
+      formData.append("request", JSON.stringify(request));
+      pendingFiles.forEach((f) => formData.append("files", f));
+      await apiFormDataInstance.put(`/posts/${postId}`, formData);
+      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      closeEditModal();
+    } finally {
+      setIsEditUploading(false);
+    }
+  };
+
+  const handleDelete = () => {
+    if (!post) return;
+    confirmModal({
+      content: `"${post.title}" 게시글을 삭제하시겠습니까?`,
+      onOk: async () => {
+        await deletePost(postId);
+        navigate("/post");
+      },
+      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 editDefaultValues: PostFormData | undefined = post
+    ? {
+        title: post.title,
+        content: post.content,
+        noticeCategory: post.noticeCategory,
+        visible: post.visible ?? true,
+      }
+    : undefined;
+
+  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>
+    );
+  };
+
+  return (
+    <div className="p-6">
+      <ListHeader
+        title="게시글 상세"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => navigate("/post")}>
+              목록
+            </Button>
+            {post && (
+              <>
+                <Button variant="save" onClick={openEditModal}>
+                  수정
+                </Button>
+                <Button variant="delete" onClick={handleDelete}>
+                  삭제
+                </Button>
+              </>
+            )}
+          </div>
+        }
+      />
+
+      <div className="mt-6 space-y-6">
+        {/* 게시글 - 공지사항 스타일 */}
+        <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>
+          ) : post ? (
+            <>
+              {/* 제목 + 메타 정보 */}
+              <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">{post.title}</h2>
+                <div className="flex items-center gap-3 text-xs text-gray-500">
+                  <Badge
+                    text={post.visible ? "노출" : "미노출"}
+                    className={`scale-90 ${post.visible ? "bg-green-100 text-green-700 border-green-100" : "bg-gray-100 text-gray-500 border-gray-200"}`}
+                  />
+                  <span className="text-gray-300">|</span>
+                  <span>작성자: {post.writer}</span>
+                  <span className="text-gray-300">|</span>
+                  <span>등록일: {formatDateTime(post.createdAt)}</span>
+                  <span className="text-gray-300">|</span>
+                  <span>수정일: {formatDateTime(post.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">{post.content}</p>
+              </div>
+
+              {/* TODO fix issues */}
+              {/* 첨부파일 미리보기 뷰어 */}
+              {postFiles.length > 0 && (
+                <>
+                  <div className="grid grid-cols-2 gap-2 w-full">
+                    {postFiles
+                      .map((postFile) => postFile.filePath)
+                      .map((img, idx) => (
+                        <FilePreviewCard
+                          key={idx}
+                          src={img}
+                          fileName={getFileLabel(img, 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={() => 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 isReplyingToReply = replyingToId === reply.id;
+                          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.content !== "삭제된 댓글입니다." && (
+                                        <button
+                                          type="button"
+                                          onClick={() => setReplyingToId(isReplyingToReply ? 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} />
+                                          {isReplyingToReply ? "취소" : "답글"}
+                                        </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 답글 입력창 */}
+                              {isReplyingToReply && !isEditingReply && (
+                                <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-10 pr-5">
+                                  <CommentInput
+                                    targetType="POST"
+                                    targetId={postId}
+                                    parentCommentId={reply.id}
+                                    placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
+                                    onSuccess={() => setReplyingToId(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="POST"
+                          targetId={postId}
+                          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="POST" targetId={postId} parentCommentId={null} />
+          </div>
+        </div>
+      </div>
+
+      {/* 수정 모달 */}
+      <PostFormModal
+        mode="edit"
+        isOpen={isEditOpen}
+        onClose={closeEditModal}
+        defaultValues={editDefaultValues}
+        onSubmit={handleEdit}
+        isPending={isEditUploading}
+        pendingFiles={pendingFiles}
+        onPendingFilesChange={setPendingFiles}
+        existingFiles={existingFiles}
+        onDeleteExistingFile={handleDeleteExistingFile}
+        formKey={postId}
+      />
+    </div>
+  );
+}