[#327] Implement CommentCard

ui/src/components/comment/client/comment-card-body.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import clsx from 'clsx';
+
+import { CommentEditable } from '@/components/comment/client/comment-editable';
+
+import { useCommentCardActions } from '@/hooks/comment/use-comment-card-actions';
+
+export function CommentCardBody() {
+  return <CommentEditable actions={<Actions />} />;
+}
+
+function Actions() {
+  const { handleClickCancel, handleClickUpdate, disabled } = useCommentCardActions();
+
+  return (
+    <>
+      <button
+        className={clsx('h-fit w-fit rounded-full border bg-white px-2 py-1', {
+          'pointer-events-none': disabled,
+        })}
+        aria-disabled={disabled}
+        onClick={handleClickCancel}
+      >
+        취소
+      </button>
+
+      <button
+        className={clsx('h-fit w-fit rounded-full border bg-white px-2 py-1', {
+          'pointer-events-none': disabled,
+        })}
+        aria-disabled={disabled}
+        onClick={handleClickUpdate}
+      >
+        저장
+      </button>
+    </>
+  );
+}

ui/src/components/comment/client/comment-card.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { CommentCardBody } from '@/components/comment/client/comment-card-body';
+import { CommentCardFooter } from '@/components/comment/client/comment-card-footer';
+import { CommentCardHeader } from '@/components/comment/client/comment-card-header';
+import Card from '@/components/common/server/card';
+
+import { CommentProvider } from '@/context/comment/comment-context';
+
+import type { Comment } from '@/lib/definitions/comment';
+
+export function CommentCard({ comment }: { comment: Comment }) {
+  return (
+    <CommentProvider prepopulated={comment}>
+      <Card>
+        <Card.Header>
+          <CommentCardHeader />
+        </Card.Header>
+
+        <Card.Body>
+          <CommentCardBody />
+        </Card.Body>
+
+        <Card.Footer>
+          <CommentCardFooter
+            nickname={comment.nickname}
+            tag={comment.tag}
+            createdAt={comment.createdAt}
+            updatedAt={comment.updatedAt}
+            authorId={comment.userId}
+          />
+        </Card.Footer>
+      </Card>
+    </CommentProvider>
+  );
+}

ui/src/hooks/comment/use-comment-card-actions.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { useComment } from '@/context/comment/comment-context';
+import { useToast } from '@/context/common/toast-context';
+
+import { useApiError } from '@/hooks/common/use-api-error';
+
+import { updateComment } from '@/lib/apis/comment/client';
+
+export const useCommentCardActions = () => {
+  const {
+    disabled,
+    setDisabled,
+    setContent,
+    setMovieName,
+    prepopulated,
+    setIsEditing,
+    validateAndGetData,
+  } = useComment();
+
+  if (prepopulated === undefined) {
+    throw new Error('content should be prepopulated');
+  }
+
+  const handleClickCancel = () => {
+    setDisabled(true);
+
+    setContent(prepopulated.content);
+    setMovieName(prepopulated.movieName);
+
+    setIsEditing(false);
+    setDisabled(false);
+  };
+
+  const router = useRouter();
+  const { emitToast } = useToast();
+  const { handleApiError } = useApiError();
+
+  const handleUpdateComment = async () => {
+    const data = validateAndGetData();
+
+    if (data === undefined) {
+      return;
+    }
+
+    try {
+      await updateComment(prepopulated.id, data);
+
+      setIsEditing(false);
+      emitToast('코멘트가 수정되었습니다.', 'success');
+      router.refresh();
+    } catch (error) {
+      handleApiError(error);
+    }
+  };
+
+  const handleClickUpdate = async () => {
+    setDisabled(true);
+    await handleUpdateComment();
+    setDisabled(false);
+  };
+
+  return { disabled, handleClickCancel, handleClickUpdate: () => void handleClickUpdate() };
+};