From 42a91461601a3c8a50bd9cf13fa1577a66191247 Mon Sep 17 00:00:00 2001
From: Doeunnkimm <doeunnkimm@gmail.com>
Date: Fri, 30 Aug 2024 23:06:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A7=88=EB=AC=B8=20=EB=8B=B5=EB=B3=80?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C=20=EC=8B=9C=20loading=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../answer/features/comment/containers/CommentContainer.tsx | 5 +++--
 .../answer/features/comment/services/useCommentService.tsx  | 6 ++++--
 .../features/floating-button/components/CommentButton.tsx   | 5 +++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx b/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx
index 80be4abc..9720e12c 100644
--- a/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx
+++ b/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx
@@ -5,7 +5,8 @@ import { Comment } from '../components/Comment';
 import { useCommentService } from '../services/useCommentService';
 
 export const CommentContainer = () => {
-  const { comment, handleChangeComment, handleSubmit } = useCommentService();
+  const { comment, handleChangeComment, handleSubmit, isSendCommentPending, isAnswerQuestionPending } =
+    useCommentService();
 
   return (
     <section
@@ -16,7 +17,7 @@ export const CommentContainer = () => {
       }}
     >
       <Comment comment={comment} onChangeComment={handleChangeComment} />
-      <CommentButton onClick={handleSubmit} />
+      <CommentButton onClick={handleSubmit} loading={isSendCommentPending || isAnswerQuestionPending} />
     </section>
   );
 };
diff --git a/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx b/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx
index d00c6c07..2f9f24b3 100644
--- a/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx
+++ b/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx
@@ -20,8 +20,8 @@ export const useCommentService = () => {
   const [comment, setComment] = useState<string>('');
   const answerList = useAtomValue(answerAtoms.answerList);
   const { meetingId, questionId } = useParams<{ meetingId: string; questionId: string }>();
-  const { mutateAsync: sendCommentMutate } = useCommentMutation({});
-  const { mutateAsync: sendAnswerMutate } = useAnswerQuestionMutation({});
+  const { mutateAsync: sendCommentMutate, isPending: isSendCommentPending } = useCommentMutation({});
+  const { mutateAsync: sendAnswerMutate, isPending: isAnswerQuestionPending } = useAnswerQuestionMutation({});
 
   const setIsProgressingQuestion = useSetAtom(HomeAtoms.isProgessingQuestionAtom);
   const setHomeGlobalTime = useSetAtom(HomeAtoms.homeGlobalTimeAtom);
@@ -87,5 +87,7 @@ export const useCommentService = () => {
     comment,
     handleSubmit,
     handleChangeComment,
+    isAnswerQuestionPending,
+    isSendCommentPending,
   };
 };
diff --git a/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx b/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx
index 638cb287..7fb76aea 100644
--- a/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx
+++ b/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx
@@ -7,9 +7,10 @@ import { Attributes, HTMLAttributes } from 'react';
 interface CommentButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
   disabled?: boolean;
   onClick?: () => void;
+  loading?: boolean;
 }
 
-export const CommentButton = ({ disabled, onClick, ...rest }: CommentButtonProps) => {
+export const CommentButton = ({ disabled, onClick, loading = false, ...rest }: CommentButtonProps) => {
   const buttonStyles: Attributes['css'] = {
     backgroundColor: disabled ? colors.grey600 : colors.black,
     cursor: disabled ? 'none' : 'pointer',
@@ -24,7 +25,7 @@ export const CommentButton = ({ disabled, onClick, ...rest }: CommentButtonProps
 
   return (
     <div css={{ position: 'absolute', bottom: '40px', width: '100%', maxWidth: '600px', padding: '0 20px' }}>
-      <Button size="large" {...rest} css={buttonStyles} onClick={handleAnswer}>
+      <Button size="large" {...rest} css={buttonStyles} onClick={handleAnswer} loading={loading}>
         답변 보내기
       </Button>
     </div>