fix(web-domains): 질문 답변 완료, 코멘트 답변 완료, 질문인 선택 post 요청 시 버튼 로딩 처리

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>
   );
 };

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,
   };
 };

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>

packages/web-domains/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx

@@ -19,15 +19,15 @@ interface QuestionerProps {
 
 export const Questioner = ({ meetingId, meetingMemberId, imageUrl, name }: QuestionerProps) => {
   const openModal = useModal();
-  const { postRelayQuestionInfo } = usePostRelayQuestionInfo(meetingId);
+  const { postRelayQuestionInfo, isPending } = usePostRelayQuestionInfo(meetingId);
 
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const handleOpenModal = async () => {
     const isConfirm = await openModal({
       component: QuestionerDetail,
-      componentProps: { imageUrl, name, isRandom: false },
+      componentProps: { imageUrl, name, isRandom: false, isPending },
     });
 
     if (isConfirm) {

packages/web-domains/src/relay-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx

@@ -16,6 +16,7 @@ interface QuestionerDetailProps {
   onClose: () => void;
   onConfirm: () => void;
   onRefetch?: () => void;
+  isPending?: boolean;
 }
 
 export const QuestionerDetail = ({
@@ -25,6 +26,7 @@ export const QuestionerDetail = ({
   onClose,
   onConfirm,
   onRefetch,
+  isPending = false,
 }: QuestionerDetailProps) => {
   return (
     <div css={wrapperCss}>
@@ -38,7 +40,9 @@ export const QuestionerDetail = ({
         <Button variant="sub" onClick={onClose}>
           닫기
         </Button>
-        <Button onClick={onConfirm}>질문인 선택</Button>
+        <Button onClick={onConfirm} loading={isPending}>
+          질문인 선택
+        </Button>
       </div>
       {isRandom && (
         <RePick onClick={onRefetch}>

packages/web-domains/src/relay-question/features/select-relay-question/containers/RandomPickContainer/RandomPickContainer.tsx

@@ -97,7 +97,7 @@ const QuestionerRandomPick = ({ meetingId }: Props) => {
     excludeMemberIds: [memberMe?.meetingMemberId!],
   });
 
-  const { postRelayQuestionInfo } = usePostRelayQuestionInfo(meetingId);
+  const { postRelayQuestionInfo, isPending } = usePostRelayQuestionInfo(meetingId);
 
   const handleOpenModal = () => {
     setIsOpen(true);
@@ -142,6 +142,7 @@ const QuestionerRandomPick = ({ meetingId }: Props) => {
             onConfirm={handleConfirmModal}
             onRefetch={refetchQuestioner}
             isRandom
+            isPending={isPending}
           />
         )}
       </Modal>

packages/web-domains/src/relay-question/features/select-relay-question/hooks/mutations/usePostRelayQuestionInfo.ts

@@ -20,7 +20,7 @@ export const usePostRelayQuestionInfo = (meetingId: number) => {
   const { mutate: postRelayQuestionInfo, ...rest } = useMutation({
     mutationFn: (payload: Payload) => _postRelayQuestionInfo({ meetingId, payload }),
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '댓글 수정에 실패했습니다.');
+      alert(error.response?.data.message ?? '릴레이 질문 생성에 실패했습니다.');
     },
   });