fix: 질문 답변 완료 시 loading 처리

depromeet · Aug 30, 2024 · 42a9146 · 42a9146
1 parent 776d570
commit 42a9146
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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>