Merge pull request #354 from MovieReviewComment/feature/issue-327/cre…

…ate-comment-button

[#327] Implement CreateCommentButton

ui/src/components/comment/client/create-comment-button.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import clsx from 'clsx';
+
+import Text from '@/components/common/server/text';
+
+import { useCreateCommentButton } from '@/hooks/comment/use-create-comment-button';
+
+export function CreateCommentButton() {
+  const { disabled, handleClick } = useCreateCommentButton();
+
+  return (
+    <button
+      onClick={handleClick}
+      className={clsx('h-fit w-fit rounded-full border bg-white px-2 py-1', {
+        'pointer-events-none': disabled,
+      })}
+      aria-disabled={disabled}
+    >
+      <Text nowrap>등록하기</Text>
+    </button>
+  );
+}

ui/src/hooks/comment/use-create-comment-button.tsx

@@ -0,0 +1,47 @@
+'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 { createComment } from '@/lib/apis/comment/client';
+
+export function useCreateCommentButton() {
+  const router = useRouter();
+  const { emitToast } = useToast();
+  const { handleApiError } = useApiError();
+
+  const { disabled, setDisabled, setContent, setMovieName, validateAndGetData } = useComment();
+
+  const handleCreateComment = async () => {
+    const data = validateAndGetData();
+
+    if (!data) {
+      return;
+    }
+
+    try {
+      await createComment(data);
+
+      emitToast('코멘트가 등록되었습니다.', 'success');
+
+      setContent('');
+      setMovieName('');
+      router.push('/comment'); // to reset query
+      router.refresh();
+    } catch (error) {
+      handleApiError(error);
+    }
+  };
+
+  const handleClick = async () => {
+    setDisabled(true);
+    await handleCreateComment();
+    setDisabled(false);
+  };
+
+  return { disabled, handleClick: () => void handleClick() };
+}