From 9e5474f4c22942d1003eb629c4b271c81e77f95e Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Thu, 2 May 2024 16:35:50 +0900
Subject: [PATCH] feat: implement CreateCommentButton

---
 .../comment/client/create-comment-button.tsx  | 23 +++++++++
 .../comment/use-create-comment-button.tsx     | 47 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 ui/src/components/comment/client/create-comment-button.tsx
 create mode 100644 ui/src/hooks/comment/use-create-comment-button.tsx

diff --git a/ui/src/components/comment/client/create-comment-button.tsx b/ui/src/components/comment/client/create-comment-button.tsx
new file mode 100644
index 00000000..cf730537
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/ui/src/hooks/comment/use-create-comment-button.tsx b/ui/src/hooks/comment/use-create-comment-button.tsx
new file mode 100644
index 00000000..ce8c5326
--- /dev/null
+++ b/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() };
+}