Refactor: 짤 상세 모달 컴포넌트 리팩토링

src/components/ImageDetailModal/ButtonWithIcon.tsx

@@ -32,7 +32,7 @@ const ButtonWithIcon = ({
       {!isLoading && <Icon aria-label={iconLabel} />}
       {isLoading && (
         <div className="h-6 w-6">
-          <span className="loading loading-spinner loading-xs"></span>
+          <span className="loading loading-spinner loading-xs" />
         </div>
       )}
       <span className="mt-1 hidden text-xs sm:flex">{children}</span>

src/components/ImageDetailModal/index.tsx

@@ -29,14 +29,7 @@ const ImageDetailModalContent = () => {
   const { reportZzal } = usePostReportZzal();
   const { deleteMyZzal } = useDeleteMyZzal();
   const reportConfirmOverlay = useOverlay();
-  const {
-    imageLikeYn: isLiked,
-    imgUrl: imageUrl,
-    tags,
-    imageTitle,
-    uploadUserId,
-    imageId,
-  } = zzalDetails;
+  const { isLiked, imageUrl, tags, imageTitle, uploadUserId, imageId } = zzalDetails;
 
   const isUploader = uploadUserId === 19;
   //TODO: [2024.03.01] 추후 실제 사용자 아이디와 비교하기
@@ -67,13 +60,14 @@ const ImageDetailModalContent = () => {
 
     deleteMyZzal(imageId, {
       onSuccess: () => {
-        setIsDeleting(false);
         toast.success("사진이 삭제되었습니다.");
       },
       onError: () => {
-        setIsDeleting(false);
         toast.error("사진 삭제에 실패했습니다.");
       },
+      onSettled: () => {
+        setIsDeleting(false);
+      },
     }); // TODO: [2024-03-05] 모달 클릭 시 URL이 변경되도록 구현 후, 이미지 삭제 성공 시 이전 페이지로 이동하는 navigate 추가 필요
   }, 500);
 

src/hooks/api/zzal/useGetZzalDetails.ts

@@ -5,6 +5,11 @@ const useGetZzalDetails = (imageId: number) => {
   const { data: zzalDetails, ...rest } = useSuspenseQuery({
     queryKey: ["zzalDetails", imageId],
     queryFn: () => getZzalDetails(imageId),
+    select: (data) => ({
+      isLiked: data.imageLikeYn,
+      imageUrl: data.imgUrl,
+      ...data,
+    }),
   });
   return { zzalDetails, ...rest };
 };