diff --git a/public/user/default-female.svg b/public/user/default-female.svg
new file mode 100644
index 00000000..1129dde0
--- /dev/null
+++ b/public/user/default-female.svg
@@ -0,0 +1,72 @@
+
diff --git a/public/user/default-male.svg b/public/user/default-male.svg
new file mode 100644
index 00000000..73529871
--- /dev/null
+++ b/public/user/default-male.svg
@@ -0,0 +1,62 @@
+
diff --git a/public/user/default-user.svg b/public/user/default-user.svg
new file mode 100644
index 00000000..5f67ddd6
--- /dev/null
+++ b/public/user/default-user.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/app/api/auth/user-image/route.ts b/src/app/api/auth/user-image/route.ts
index 84f5691c..65877683 100644
--- 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
index ff3fabc3..63d1cab1 100644
--- 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("");
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 (