✨ mutation이 isPending일때 삭제 버튼 비활성화

dnd-side-project · Mar 10, 2024 · 3d89963 · 3d89963
1 parent fbfed49
commit 3d89963
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/app/mypage/_components/MyVote.tsx b/src/app/mypage/_components/MyVote.tsx
@@ -17,7 +17,7 @@ type BottomSheetType = 'askDelete' | 'selectOption';
 
 const MyVote = () => {
   const { data, status } = useGetMyVote();
-  const { mutate: onDelete } = useDeleteVoteMutation();
+  const { mutate: onDelete, isPending } = useDeleteVoteMutation();
   const { onOpenSheet, openedSheet, onCloseSheet } = useBottomSheetState<BottomSheetType>();
   const deleteTarget = useRef<VoteType['id'] | null>(null);
 
@@ -51,6 +51,7 @@ const MyVote = () => {
                     onOpenSheet('selectOption');
                     deleteTarget.current = vote.id;
                   }}
+                  disabled={isPending && deleteTarget.current === vote.id}
                 />
               </div>
 

diff --git a/src/app/vote/[slug]/_component/VoteExtraDetail.tsx b/src/app/vote/[slug]/_component/VoteExtraDetail.tsx
@@ -22,7 +22,7 @@ type BottomSheetType = 'askDelete' | 'replyOption';
 
 const VoteExtraDetail = ({ author, views, category, voteId }: Props) => {
   const { data: user } = useGetUser();
-  const { mutate: onDelete } = useDeleteVoteMutation();
+  const { mutate: onDelete, isPending } = useDeleteVoteMutation();
 
   const router = useRouter();
   const { onOpenSheet, openedSheet, onCloseSheet } = useBottomSheetState<BottomSheetType>();
@@ -44,6 +44,7 @@ const VoteExtraDetail = ({ author, views, category, voteId }: Props) => {
                 icon="more"
                 className="!p-0"
                 onClick={() => onOpenSheet('replyOption')}
+                disabled={isPending}
               />
             )
           }