Merge pull request #380 from TripInfoWeb/dev_mypage

feat: 유저 이미지 제거 기능 추가
TripInfoWeb · Sep 23, 2024 · e1da828 · e1da828
2 parents b25dd78 + 9c24c9c
commit e1da828
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 9 deletions.
diff --git a/public/user/default-female.svg b/public/user/default-female.svg
diff --git a/public/user/default-male.svg b/public/user/default-male.svg
diff --git a/public/user/default-user.svg b/public/user/default-user.svg
diff --git a/src/app/api/auth/user-image/route.ts b/src/app/api/auth/user-image/route.ts
@@ -13,7 +13,7 @@ export async function DELETE(request: NextRequest) {
     return new NextResponse("Refresh token not found", { status: 401 });
   }
 
-  const response = await fetch(`${process.env.BACKEND_URL}/api/user-image`, {
+  const response = await fetch(`${process.env.BACKEND_URL}/api/users/profile`, {
     method: "DELETE",
     headers: {
       Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
@@ -26,5 +26,5 @@ export async function DELETE(request: NextRequest) {
     return new NextResponse(`${response.statusText}`, { status: response.status });
   }
 
-    return await response.json();
+    return response;
 }
diff --git a/src/containers/mypage/MyPageUserImageContainer.tsx b/src/containers/mypage/MyPageUserImageContainer.tsx
@@ -1,6 +1,8 @@
 import MyPageUserImage from "@/components/mypage/MyPageUserImage";
 import { useDragAndDrop } from "@/hooks/useDragAndDrop";
 import useModalState from "@/hooks/useModalState";
+import useAuthStore from "@/store/authStore";
+import useToastifyStore from "@/store/toastifyStore";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { useState } from "react";
 
@@ -13,20 +15,58 @@ const MyPageUserImageContainer = (props: IMyPageUserImageContainer) => {
   const [imageUrl, setImageUrl] = useState(props.userImageUrl || "");
   const [imageBase64Data, setImageBase64Data] = useState<string>("");
   const modalState = useModalState();
-
+  const authStore = useAuthStore();
+  const toastifyStore = useToastifyStore();
+
   const imageUpload = (imageDataUrl: string) => {
     setImageBase64Data(imageDataUrl);
     modalState.openModal(); // 이미지 편집을 위한 모달창
   }
 
-  const deleteImage = () => {
-    alert("개발중");
-
-    const response = fetchWithAuth("/api/auth/user-image", {
+  const deleteImage = async () => {
+    const response = await fetchWithAuth("/api/auth/user-image", {
       method: "DELETE",
       "Content-Type": "application/json",
     });
-
+
+    if (!response.ok) {
+      toastifyStore.setToastify({
+        type: "success",
+        message: "이미지 삭제 실패"
+      })
+    }
+
+    if (response.ok) {
+      const { initialize, setUser, ...prevState } = authStore;
+      if (props.userSex == "male") {
+        setImageUrl("/user/default-male.svg");
+        authStore.setUser({
+          ...prevState,
+          userImage: {
+            ...authStore.userImage,
+            address: "/user/default-male.svg",
+          },
+        });
+      }else if (props.userSex == "female") {
+        setImageUrl("/user/default-female.svg");
+        authStore.setUser({
+          ...prevState,
+          userImage: {
+            ...authStore.userImage,
+            address: "/user/default-female.svg",
+          },
+        });
+      }else if (!props.userSex) {
+        setImageUrl("/user/default-user.svg");
+        authStore.setUser({
+          ...prevState,
+          userImage: {
+            ...authStore.userImage,
+            address: "/user/default-user.svg",
+          },
+        });
+      }
+    }    
   }
 
   const closeCropModal = () => {
@@ -44,7 +84,9 @@ const MyPageUserImageContainer = (props: IMyPageUserImageContainer) => {
       onDragLeave,
       onDragOver,
       onDropOrInputEvent,
-    } = useDragAndDrop({ imageUpload });
+  } = useDragAndDrop({ imageUpload });
+
+  console.log("MyPageUserImageContainer.tsx 파일 : ", useAuthStore.getState());
 
   return (
     <div>