diff --git a/src/components/auth/UserProfileUpdate.tsx b/src/components/auth/UserProfileUpdate.tsx index d10fc71..7267660 100644 --- 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(null) const { mutate: postProfileImg } = usePostProfileImg() const { mutate: deleteProfileImg } = useDeleteProfileImg() + const { mutate: deleteProfileImgS3 } = useDeleteProfileImgS3() + const { showToast } = useToast() const [profileImgUrl, setProfileImgUrl] = useState(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 index 380d3e8..3298745 100644 --- 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 => { + await UserService.deleteProfileImgS3(imageUrl) + }, + }, } export default queryOptions diff --git a/src/service/user/UserService.ts b/src/service/user/UserService.ts index 6394f8f..fe2b277 100644 --- 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 index d0e2dea..94f1c48 100644 --- a/src/service/user/useUserService.ts +++ b/src/service/user/useUserService.ts @@ -48,6 +48,16 @@ const useDeleteProfileImg = () => { return useMutation(options) } +const useDeleteProfileImgS3 = () => { + const mutationFn = (imageUrl: string): Promise => + queryOptions.deleteProfileImgS3.mutationFn(imageUrl) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + export { useProfile, useTerms, @@ -55,4 +65,5 @@ export { usePatchProfile, usePostProfileImg, useDeleteProfileImg, + useDeleteProfileImgS3, }