[#504] [모임 상세] 모임 게시글 작성 기능 구현 (#517)

src/queries/group/useCreateBookGroupCommentMutation.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIGroup } from '@/types/group';
+import groupAPI from '@/apis/group';
+import bookGroupKeys from './key';
+
+const useCreateBookGroupCommentMutation = (
+  bookGroupId: APIGroup['bookGroupId']
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (comment: string) =>
+      groupAPI
+        .createGroupComment({ bookGroupId, comment })
+        .then(({ data }) => data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: bookGroupKeys.comments(bookGroupId),
+      });
+    },
+  });
+};
+
+export default useCreateBookGroupCommentMutation;

src/v1/bookGroup/BookGroupNavigation.tsx

@@ -4,17 +4,24 @@ import {
   createContext,
   isValidElement,
   useContext,
+  useRef,
 } from 'react';
 import { useRouter } from 'next/navigation';
 
 import SSRSafeSuspense from '@/components/SSRSafeSuspense';
 import TopNavigation from '@/v1/base/TopNavigation';
+import CommentDrawer from '@/v1/comment/CommentDrawer';
 import { IconArrowLeft, IconHamburger, IconPost } from '@public/icons';
 import {
   useBookGroupOwner,
   useBookGroupTitle,
   useBookGroupJoinInfo,
 } from '@/queries/group/useBookGroupQuery';
+import useToast from '@/v1/base/Toast/useToast';
+import useDisclosure from '@/hooks/useDisclosure';
+import useCreateBookGroupCommentMutation from '@/queries/group/useCreateBookGroupCommentMutation';
+import { isAxiosErrorWithCustomCode } from '@/utils/helpers';
+import { SERVICE_ERROR_MESSAGE } from '@/constants';
 
 const NavigationContext = createContext({} as { groupId: number });
 
@@ -103,7 +110,56 @@ const WriteButton = () => {
   const { data: joinInfo } = useBookGroupJoinInfo(groupId);
   const { isMember } = joinInfo;
 
-  return <>{isMember && <IconPost />}</>;
+  const { show: showToast } = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const commentRef = useRef<HTMLTextAreaElement>(null);
+  const createComment = useCreateBookGroupCommentMutation(groupId);
+
+  const handleCommentCreate = () => {
+    const comment = commentRef.current?.value;
+
+    if (!comment) {
+      return;
+    }
+
+    createComment.mutate(comment, {
+      onSuccess: () => {
+        onClose();
+        showToast({ type: 'success', message: '게시글을 등록했어요 🎉' });
+      },
+      onError: error => {
+        if (isAxiosErrorWithCustomCode(error)) {
+          const { code } = error.response.data;
+          const message = SERVICE_ERROR_MESSAGE[code];
+          showToast({ type: 'error', message });
+          return;
+        }
+
+        showToast({ type: 'error', message: '게시글을 등록하지 못했어요 🥲' });
+      },
+    });
+  };
+
+  return (
+    <>
+      {isMember && (
+        <>
+          <button onClick={onOpen}>
+            <IconPost />
+          </button>
+          <CommentDrawer
+            title="게시글 작성하기"
+            placeholder="나누고 싶은 이야기가 있었다면 게시글에 남겨보세요"
+            isOpen={isOpen}
+            onClose={onClose}
+            ref={commentRef}
+            onConfirm={handleCommentCreate}
+          />
+        </>
+      )}
+    </>
+  );
 };
 
 BookGroupNavigation.BackButton = BackButton;