From f23b1eac06e7f077745a507c6ba392872a1ff403 Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Thu, 22 Aug 2024 22:58:39 +0900
Subject: [PATCH] =?UTF-8?q?fix(#48):=20S3=EC=97=90=20=EC=9E=84=EC=8B=9C?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=80=EC=9E=A5=EB=90=9C=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/UserProfileUpdate.tsx | 39 +++++++++++++++++------
 src/service/user/UserQueries.ts           |  7 ++++
 src/service/user/UserService.ts           |  4 +++
 src/service/user/useUserService.ts        | 11 +++++++
 4 files changed, 51 insertions(+), 10 deletions(-)

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<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
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<void> => {
+      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<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,
@@ -55,4 +65,5 @@ export {
   usePatchProfile,
   usePostProfileImg,
   useDeleteProfileImg,
+  useDeleteProfileImgS3,
 }