@farmzone/fz-template-react 1.0.0 → 1.0.1

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

@@ -0,0 +1,424 @@
+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",
+        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, 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 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="SAMPLE"
+                                    targetId={sampleId}
+                                    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="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>
+  );
+}

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

@@ -0,0 +1,269 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { Badge, Button, confirmModal, PageFilter, Select, Table } from "@farmzone/fz-react-ui";
+
+import { useDeleteSamples, useGetSamples, usePostSample, usePutSample } from "@/app/api/queries";
+import type { Sample } from "@/types";
+import ListContents from "@/app/layout/ListContents";
+import ListHeader from "@/app/layout/ListHeader";
+import { formatDateTime } from "@/shared/utils/format";
+import { SampleFormModal, SAMPLE_FORM_DEFAULT_VALUES } from "./SampleFormModal";
+import type { SampleFormData } from "./SampleFormModal";
+
+const PAGE_SIZE_OPTIONS = [
+  { label: "15", value: "15" },
+  { label: "30", value: "30" },
+  { label: "60", value: "60" },
+  { label: "100", value: "100" },
+];
+
+interface SampleFilterParams {
+  name: string;
+  category: string;
+}
+
+const FILTER_RESET: SampleFilterParams = { name: "", category: "" };
+
+const CATEGORY_FILTER_OPTIONS = [
+  { label: "기본", value: "BASIC" },
+  { label: "고급", value: "PREMIUM" },
+];
+
+export default function SamplePage() {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(15);
+  const [filterParams, setFilterParams] = useState<SampleFilterParams>(FILTER_RESET);
+  const [submittedFilter, setSubmittedFilter] = useState<SampleFilterParams>(FILTER_RESET);
+
+  const [modalMode, setModalMode] = useState<"create" | "edit" | null>(null);
+  const [selectedSample, setSelectedSample] = useState<Sample | null>(null);
+  const [editDefaultValues, setEditDefaultValues] = useState<SampleFormData | undefined>(undefined);
+  const [selectedKeys, setSelectedKeys] = useState<Array<string | number>>([]);
+  const [sortOption, setSortOption] = useState<{ sortKey: string; sortOrder: "asc" | "desc" } | undefined>(
+    undefined,
+  );
+
+  const { data, isLoading } = useGetSamples({
+    page,
+    size: pageSize,
+    name: submittedFilter.name || undefined,
+    category: submittedFilter.category || undefined,
+    sortKey: sortOption?.sortKey,
+    sortOrder: sortOption?.sortOrder,
+  });
+
+  const { mutateAsync: postSample, isPending: isCreating } = usePostSample();
+  const { mutateAsync: putSample, isPending: isUpdating } = usePutSample();
+  const { mutateAsync: deleteSamples } = useDeleteSamples();
+
+  const totalElements = data?.totalElements ?? 0;
+  const totalPages = data?.totalPages ?? 0;
+  const content = data?.content ?? [];
+
+  const openCreate = () => {
+    setEditDefaultValues(undefined);
+    setSelectedSample(null);
+    setModalMode("create");
+  };
+
+  const closeModal = () => {
+    setModalMode(null);
+    setSelectedSample(null);
+    setEditDefaultValues(undefined);
+  };
+
+  const handleSubmit = async (data: SampleFormData) => {
+    if (modalMode === "create") {
+      await postSample({
+        name: data.name,
+        description: data.description,
+        category: data.category as "BASIC" | "ADVANCED",
+        active: data.active,
+      });
+    } else if (modalMode === "edit" && selectedSample) {
+      await putSample({
+        id: selectedSample.id,
+        data: {
+          name: data.name,
+          description: data.description,
+          category: data.category as "BASIC" | "ADVANCED",
+          active: data.active,
+        },
+      });
+    }
+    closeModal();
+  };
+
+  const columns = [
+    {
+      key: "index",
+      title: "No",
+      width: "30px",
+      align: "center" as const,
+      render: (_: unknown, __: unknown, index: number) => totalElements - page * pageSize - index,
+    },
+    {
+      key: "name",
+      title: "이름",
+      sortable: true,
+      sort: sortOption?.sortKey === "name" ? sortOption.sortOrder : null,
+    },
+    { key: "description", title: "설명", minWidth: 200 },
+    {
+      key: "category",
+      title: "카테고리",
+      align: "center" as const,
+      width: "40px",
+      render: (_: unknown, record: Sample) => (
+        <Badge
+          text={record.category === "BASIC" ? "기본" : "고급"}
+          className={`scale-90 ${record.category === "BASIC" ? "bg-blue-100 text-blue-700 border-blue-100" : "bg-purple-100 text-purple-700 border-purple-100"}`}
+        />
+      ),
+    },
+    {
+      key: "priority",
+      title: "우선순위",
+      align: "center" as const,
+      width: "30px",
+      render: (_: unknown, record: Sample) => (
+        <span className="text-sm font-medium text-gray-700">{record.priority}</span>
+      ),
+    },
+    {
+      key: "active",
+      title: "사용여부",
+      align: "center" as const,
+      width: "30px",
+      render: (_: unknown, record: Sample) => (
+        <Badge
+          text={record.active ? "O" : "X"}
+          className={`scale-90 ${record.active ? "bg-green-100 text-green-700 border-green-100" : "bg-red-100 text-red-500 border-red-100"}`}
+        />
+      ),
+    },
+    {
+      key: "createdAt",
+      title: "등록일시",
+      align: "center" as const,
+      width: "80px",
+      render: (_: unknown, record: Sample) => formatDateTime(record.createdAt),
+    },
+  ];
+
+  return (
+    <div className="p-6">
+      <ListHeader
+        title="샘플 관리"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="save" onClick={openCreate}>
+              등록
+            </Button>
+            <Button
+              variant="delete"
+              disabled={selectedKeys.length === 0}
+              onClick={() => {
+                confirmModal({
+                  content: `선택한 ${selectedKeys.length}개 항목을 삭제하시겠습니까?`,
+                  onOk: async () => {
+                    await deleteSamples(selectedKeys.map(Number));
+                    setSelectedKeys([]);
+                  },
+                  onCancel: () => {},
+                  className: "max-w-100",
+                });
+              }}
+            >
+              삭제
+            </Button>
+          </div>
+        }
+      />
+      <ListContents>
+        <PageFilter
+          values={filterParams}
+          onChange={(updates: Partial<SampleFilterParams>) =>
+            setFilterParams((prev) => ({ ...prev, ...updates }))
+          }
+          onSubmit={() => {
+            setPage(0);
+            setSelectedKeys([]);
+            setSubmittedFilter(filterParams);
+          }}
+          onReset={() => {
+            setFilterParams(FILTER_RESET);
+            setSubmittedFilter(FILTER_RESET);
+            setPage(0);
+            setPageSize(15);
+            setSelectedKeys([]);
+          }}
+          rows={[
+            {
+              options: [
+                { type: "select", key: "category", label: "카테고리", options: CATEGORY_FILTER_OPTIONS },
+                { type: "input", key: "name", label: "이름", placeholder: "이름 검색" },
+              ],
+            },
+          ]}
+        />
+        <Table
+          rowKey="id"
+          columns={columns}
+          data={content}
+          isLoading={isLoading}
+          sortOption={sortOption}
+          onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
+            setSortOption({ sortKey, sortOrder });
+            setPage(0);
+          }}
+          onRowClick={(record: Sample) => navigate(`/sample/${record.id}`)}
+          paginationInfo={{
+            page,
+            totalPages,
+            onPageChange: (newPage: number) => {
+              setPage(newPage);
+              setSelectedKeys([]);
+            },
+          }}
+          checkboxInfo={{
+            selectedKeys,
+            onSelectionChange: setSelectedKeys,
+          }}
+          renderFooter={{
+            renderLeft: (
+              <p className="text-sm text-gray-600">
+                총 <span className="font-semibold text-gray-900">{totalElements}</span>건
+              </p>
+            ),
+            renderRight: (
+              <div className="flex items-center gap-2.5 pr-5">
+                <p className="text-sm font-medium text-gray-700">페이지 개수</p>
+                <Select
+                  value={String(pageSize)}
+                  options={PAGE_SIZE_OPTIONS}
+                  onChange={(val: string) => {
+                    setPageSize(Number(val));
+                    setPage(0);
+                    setSelectedKeys([]);
+                  }}
+                />
+              </div>
+            ),
+          }}
+        />
+      </ListContents>
+
+      <SampleFormModal
+        mode={modalMode ?? "create"}
+        isOpen={modalMode !== null}
+        onClose={closeModal}
+        defaultValues={editDefaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
+        onSubmit={handleSubmit}
+        isPending={isCreating || isUpdating}
+        formKey={selectedSample?.id}
+      />
+    </div>
+  );
+}