feat(ai-character): 댓글과 팬톡 운영 기능 구현

src/features/comments/components/CommentThread.tsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { createComment, deleteComment, getReplies, getRootComments, updateComment } from "@/features/comments/api/comment-api";
+import { CommentForm } from "@/features/comments/components/CommentForm";
+import { CommentItem } from "@/features/comments/components/CommentItem";
+import type { CommentPage, CommentRecord, CommentTarget } from "@/features/comments/model/types";
+import { ApiError } from "@/shared/api/api-error";
+import type { ApiClient } from "@/shared/api/client";
+import { PageState } from "@/shared/ui/page-state";
+import { ResourcePagination } from "@/shared/ui/resource-pagination";
+
+type LoadState =
+  | { readonly status: "loading" }
+  | { readonly data: CommentPage; readonly status: "content" }
+  | { readonly message: string; readonly status: "error" };
+
+type ReplyEntry = {
+  readonly page: number;
+  readonly state: LoadState;
+};
+
+type ReplyState = Record<number, ReplyEntry>;
+
+const pageSize = 20;
+
+function getErrorMessage(error: unknown): string {
+  return error instanceof ApiError ? error.message : "댓글을 처리하지 못했습니다.";
+}
+
+function canEdit(comment: CommentRecord, target: CommentTarget): boolean {
+  return comment.writerId === target.creatorId;
+}
+
+export function CommentThread({ apiClient, canMutate = true, target }: { readonly apiClient: ApiClient; readonly canMutate?: boolean; readonly target: CommentTarget }) {
+  const audioContentId = target.kind === "audio" ? target.contentId : "";
+  const communityPostId = target.kind === "community" ? target.postId : "";
+  const requestTarget = useMemo<CommentTarget>(() => target.kind === "audio"
+    ? { kind: "audio", characterId: target.characterId, contentId: audioContentId, creatorId: target.creatorId }
+    : { kind: "community", characterId: target.characterId, postId: communityPostId, creatorId: target.creatorId }, [audioContentId, communityPostId, target.characterId, target.creatorId, target.kind]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [expandedRootIds, setExpandedRootIds] = useState<readonly number[]>([]);
+  const [isSaving, setIsSaving] = useState(false);
+  const [rootPage, setRootPage] = useState(0);
+  const [rootReloadKey, setRootReloadKey] = useState(0);
+  const [roots, setRoots] = useState<LoadState>({ status: "loading" });
+  const [replies, setReplies] = useState<ReplyState>({});
+  const isSavingRef = useRef(false);
+
+  const loadReplies = useCallback(async function loadRepliesForPage(rootId: number, page = 0): Promise<void> {
+    setReplies((current) => ({ ...current, [rootId]: { page, state: { status: "loading" } } }));
+    try {
+      const data = await getReplies(apiClient, requestTarget, { commentId: rootId, page, size: pageSize });
+      if (page > 0 && data.items.length === 0 && data.totalCount <= page * pageSize) {
+        await loadRepliesForPage(rootId, page - 1);
+        return;
+      }
+      setReplies((current) => ({ ...current, [rootId]: { page, state: { data, status: "content" } } }));
+    } catch (error: unknown) {
+      setReplies((current) => ({ ...current, [rootId]: { page, state: { message: getErrorMessage(error), status: "error" } } }));
+    }
+  }, [apiClient, requestTarget]);
+
+  useEffect(() => {
+    let isCurrent = true;
+    setRoots((current) => current.status === "content" ? current : { status: "loading" });
+    void getRootComments(apiClient, requestTarget, { page: rootPage, size: pageSize })
+      .then((data) => {
+        if (isCurrent) {
+          setRoots({ data, status: "content" });
+        }
+      })
+      .catch((error: unknown) => {
+        if (isCurrent) {
+          setRoots({ message: getErrorMessage(error), status: "error" });
+        }
+      });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [apiClient, requestTarget, rootPage, rootReloadKey]);
+
+  async function runMutation(work: () => Promise<null>, rootId?: number): Promise<boolean> {
+    if (isSavingRef.current) {
+      return false;
+    }
+    isSavingRef.current = true;
+    setIsSaving(true);
+    setErrorMessage(null);
+    try {
+      await work();
+      setRootReloadKey((key) => key + 1);
+      if (rootId !== undefined) {
+        await loadReplies(rootId, replies[rootId]?.page ?? 0);
+      }
+      return true;
+    } catch (error: unknown) {
+      setErrorMessage(getErrorMessage(error));
+      return false;
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+    }
+  }
+
+  async function createRoot(comment: string): Promise<boolean> {
+    if (requestTarget.kind === "audio") {
+      return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: null, isSecret: false, languageCode: null }));
+    }
+    return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: null, isSecret: false }));
+  }
+
+  async function createReply(rootId: number, comment: string): Promise<boolean> {
+    if (requestTarget.kind === "audio") {
+      return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: rootId, isSecret: false, languageCode: null }), rootId);
+    }
+    return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: rootId, isSecret: false }), rootId);
+  }
+
+  function toggleReplies(rootId: number) {
+    setExpandedRootIds((current) => current.includes(rootId) ? current.filter((id) => id !== rootId) : [...current, rootId]);
+    if (replies[rootId] === undefined) {
+      void loadReplies(rootId, 0);
+    }
+  }
+
+  function renderReplies(root: CommentRecord) {
+    if (!expandedRootIds.includes(root.id)) {
+      return null;
+    }
+    const entry = replies[root.id] ?? { page: 0, state: { status: "loading" } };
+    const state = entry.state;
+    if (state.status === "loading") {
+      return <PageState state="loading" title="답글을 불러오는 중" />;
+    }
+    if (state.status === "error") {
+      return <PageState description={state.message} onRetry={() => void loadReplies(root.id)} state="error" title="답글 조회 실패" />;
+    }
+
+    return (
+      <section aria-label={`${root.comment} 답글`} className="ml-0 flex flex-col gap-3 border-l border-border pl-3 sm:ml-4">
+        {canMutate ? <CommentForm errorId={`comment-reply-${root.id}-error`} isSaving={isSaving} label={`${root.comment}에 답글`} onSubmit={(comment) => createReply(root.id, comment)} submitLabel="답글 등록" /> : null}
+        {state.data.items.map((reply) => (
+          <CommentItem canDelete={canMutate} canEdit={canMutate && canEdit(reply, requestTarget)} comment={reply} isSaving={isSaving} key={reply.id} onDelete={() => void runMutation(() => deleteComment(apiClient, requestTarget, { commentId: reply.id }), root.id)} onEdit={(comment) => void runMutation(() => updateComment(apiClient, requestTarget, { commentId: reply.id, request: { comment } }), root.id)} />
+        ))}
+        {state.data.totalCount > pageSize ? <ResourcePagination data={{ totalCount: state.data.totalCount, page: entry.page, size: pageSize, hasNext: (entry.page + 1) * pageSize < state.data.totalCount, items: state.data.items }} onPageChange={(page) => void loadReplies(root.id, page)} onSizeChange={() => void loadReplies(root.id, 0)} sizeOptions={[20]} /> : null}
+      </section>
+    );
+  }
+
+  return (
+    <section className="flex flex-col gap-4 rounded-lg border border-border bg-muted p-4" aria-labelledby="comment-thread-title">
+      <div className="flex flex-col gap-1">
+        <p className="text-xs font-semibold text-info">COMMENTS</p>
+        <h2 className="text-xl font-semibold" id="comment-thread-title">댓글 관리</h2>
+      </div>
+      {canMutate ? <CommentForm errorId="comment-root-error" isSaving={isSaving} label="새 댓글" onSubmit={createRoot} submitLabel="댓글 등록" /> : null}
+      {errorMessage === null ? null : <p className="rounded-md border border-destructive bg-card p-3 text-sm font-semibold text-destructive" role="alert">{errorMessage}</p>}
+      {isSaving ? <p className="rounded-md border border-border bg-card p-3 text-sm font-semibold" role="status">댓글을 저장하는 중</p> : null}
+      {roots.status === "loading" ? <PageState state="loading" title="댓글을 불러오는 중" /> : null}
+      {roots.status === "error" ? <PageState description={roots.message} onRetry={() => setRootReloadKey((key) => key + 1)} state="error" title="댓글 조회 실패" /> : null}
+      {roots.status === "content" ? (
+        <>
+          <p className="text-sm font-semibold text-muted-foreground">총 {roots.data.totalCount.toLocaleString("ko-KR")}개</p>
+          {roots.data.totalCount === 0 ? <PageState description="새 댓글을 등록해 첫 대화를 시작할 수 있습니다." state="empty" title="댓글이 없습니다" /> : (
+            <>
+              <div className="flex flex-col gap-3">
+                {roots.data.items.map((comment) => (
+                  <div className="flex flex-col gap-3" key={comment.id}>
+                    <CommentItem canDelete={canMutate} canEdit={canMutate && canEdit(comment, requestTarget)} comment={comment} isSaving={isSaving} onDelete={() => void runMutation(() => deleteComment(apiClient, requestTarget, { commentId: comment.id }))} onEdit={(nextComment) => void runMutation(() => updateComment(apiClient, requestTarget, { commentId: comment.id, request: { comment: nextComment } }))} onShowReplies={() => toggleReplies(comment.id)} showRepliesButton={comment.replyCount > 0 || expandedRootIds.includes(comment.id)} />
+                    {renderReplies(comment)}
+                  </div>
+                ))}
+              </div>
+              <ResourcePagination data={{ totalCount: roots.data.totalCount, page: rootPage, size: pageSize, hasNext: (rootPage + 1) * pageSize < roots.data.totalCount, items: roots.data.items }} onPageChange={setRootPage} onSizeChange={() => setRootPage(0)} sizeOptions={[20]} />
+            </>
+          )}
+        </>
+      ) : null}
+    </section>
+  );
+}