fix(#48): S3에 임시로 저장된 프로필 이미지 삭제

Help-M-Ssaem · Aug 22, 2024 · f23b1ea · f23b1ea
1 parent edf3da4
commit f23b1ea
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/src/components/auth/UserProfileUpdate.tsx b/src/components/auth/UserProfileUpdate.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { useToast } from '@/hooks/useToast'
 import {
   useDeleteProfileImg,
+  useDeleteProfileImgS3,
   usePostProfileImg,
   useUserInfo,
 } from '@/service/user/useUserService'
@@ -17,6 +18,8 @@ const UserProfileUpdate = ({ onUpdate }: UserProfileUpdateProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const { mutate: postProfileImg } = usePostProfileImg()
   const { mutate: deleteProfileImg } = useDeleteProfileImg()
+  const { mutate: deleteProfileImgS3 } = useDeleteProfileImgS3()
+
   const { showToast } = useToast()
 
   const [profileImgUrl, setProfileImgUrl] = useState<string | null>(null)
@@ -97,18 +100,34 @@ const UserProfileUpdate = ({ onUpdate }: UserProfileUpdateProps) => {
       .toUpperCase()
     const defaultImageUrl = `/images/mbti/${currentMbti}.svg`
 
-    deleteProfileImg(undefined, {
-      onSuccess: () => {
-        setProfileImgUrl(defaultImageUrl)
-      },
-      onError: () => {
-        if (profileImgUrl !== profile?.profileImgUrl) {
+    // DB에 저장된 이미지 삭제
+    if (profileImgUrl === profile?.profileImgUrl) {
+      deleteProfileImg(undefined, {
+        onSuccess: () => {
           setProfileImgUrl(defaultImageUrl)
-        } else {
+          if (profileImgUrl === defaultImageUrl) {
+            showToast('기본 이미지는 삭제할 수 없습니다.')
+          }
+        },
+        onError: () => {
           showToast('기본 이미지는 삭제할 수 없습니다.')
-        }
-      },
-    })
+        },
+      })
+    }
+    // S3에 임시로 저장된 이미지 삭제
+    else {
+      deleteProfileImgS3(profile?.profileImgUrl || '', {
+        onSuccess: () => {
+          setProfileImgUrl(defaultImageUrl)
+          if (profileImgUrl === defaultImageUrl) {
+            showToast('기본 이미지는 삭제할 수 없습니다.')
+          }
+        },
+        onError: () => {
+          showToast('기본 이미지는 삭제할 수 없습니다.')
+        },
+      })
+    }
   }
 
   if (!profile) return null

diff --git a/src/service/user/UserQueries.ts b/src/service/user/UserQueries.ts
@@ -53,6 +53,13 @@ const queryOptions = {
       await UserService.deleteProfileImg()
     },
   },
+
+  deleteProfileImgS3: {
+    queryKey: queryKeys.profileImg,
+    mutationFn: async (imageUrl: string): Promise<void> => {
+      await UserService.deleteProfileImgS3(imageUrl)
+    },
+  },
 }
 
 export default queryOptions
diff --git a/src/service/user/UserService.ts b/src/service/user/UserService.ts
@@ -33,6 +33,10 @@ class UserService extends Service {
   deleteProfileImg() {
     return this.http.delete('/member/profile')
   }
+
+  deleteProfileImgS3(imageUrl: string) {
+    return this.http.post(`/member/s3/file?imageUrl=${imageUrl}`)
+  }
 }
 
 export default new UserService()
diff --git a/src/service/user/useUserService.ts b/src/service/user/useUserService.ts
@@ -48,11 +48,22 @@ const useDeleteProfileImg = () => {
   return useMutation<void, Error, void>(options)
 }
 
+const useDeleteProfileImgS3 = () => {
+  const mutationFn = (imageUrl: string): Promise<void> =>
+    queryOptions.deleteProfileImgS3.mutationFn(imageUrl)
+
+  const options: UseMutationOptions<void, Error, string, unknown> = {
+    mutationFn,
+  }
+  return useMutation<void, Error, string>(options)
+}
+
 export {
   useProfile,
   useTerms,
   useUserInfo,
   usePatchProfile,
   usePostProfileImg,
   useDeleteProfileImg,
+  useDeleteProfileImgS3,
 }