Merge pull request #85 from next-petree/FEAT_mypage34

FEAT: 주거환경 기능 추가

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
+    "react-image-file-resizer": "^0.4.8",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.17.0",
@@ -55,4 +56,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/component/MyPage/ProfileContent/ProfileContentForms1/AvatarUpload.tsx

@@ -7,7 +7,6 @@ import {
   AvatarLabel,
   Button,
   Form,
-  ImageDeleteBtn,
   Overlay,
   Store,
   UploadAvatarBorder,
@@ -29,19 +28,13 @@ import {
 import React from "react";
 import DecodeToken from "../../../../utils/DecodeJWT/DecodeJWT";
 import { useAppDispatch, useAppSelector } from "../../../../redux/hooks";
+import { resizeFile } from "../../../../utils/ImageResize";
 
 interface IAvatarUpload {
   setChangeAvatar: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-interface IUser {
-  email: string;
-  exp: number;
-  iat: number;
-  role: "ADOPTER" | "BREEDER";
-  sub: string;
-  verification: boolean;
-}
+
 
 const AvatarUpload = ({ setChangeAvatar }: IAvatarUpload) => {
   const {
@@ -51,8 +44,6 @@ const AvatarUpload = ({ setChangeAvatar }: IAvatarUpload) => {
     setValue,
   } = useForm<IChangeAvatar>();
   const accountInfo = DecodeToken();
-  const [user, setuser] = useState<IUser>(accountInfo);
-  const [isAvatarDel, setIsAvatarDel] = useState<boolean>(false);
   const nowavatar = useAppSelector(selectAvatarSlice);
   const dispath = useAppDispatch();
   const [avatarPreview, setAvatarPreview] = useState(nowavatar.avatar);
@@ -76,15 +67,22 @@ const AvatarUpload = ({ setChangeAvatar }: IAvatarUpload) => {
       // post가 제대로 보내지지 않음
       if (avatar && avatar.length > 0) {
         try {
+          const avatar_Resize = (await resizeFile(avatar[0])) as File;
           const url = AvatarUrl("post");
           const form = new FormData();
-          form.append("image", avatar[0]);
+          form.append("image", avatar_Resize);
           const response = await post<AvatarResultResponse>(url, form);
           if (response.data.status === "FAIL") {
             throw "올바르지 못한 접근 입니다.";
           }
           dispath(setAvatar(response.data.data.fileUrl));
           dispath(setAvatarId(response.data.data.id));
+          if (response.data.status === "SUCCESS") {
+            Swal.fire({
+              ...alertList.successMessage("프로필 사진이 변경되었습니다"),
+              width: "350px",
+            });
+          }
         } catch (e) {}
       }
       else {

src/component/MyPage/ProfileContent/ProfileContentForms1/LivingEnvironmentForm.tsx

@@ -1,4 +1,3 @@
-import DecodeToken from "../../../../utils/DecodeJWT/DecodeJWT";
 import {
   Button,
   Container,
@@ -26,6 +25,7 @@ import {
 import { LivingEnvironmentUrl } from "../../../../utils/MypageUrl1";
 import { get, put } from "../../../../api/api";
 import React from "react";
+import { resizeFile } from "../../../../utils/ImageResize";
 
 export interface ILivingEnvironment {
   yard: FileList | null;
@@ -40,14 +40,8 @@ export interface ILivingEnvironmentPreview {
 }
 
 const LivingEnvironmentForm = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    watch,
-    setValue,
-  } = useForm<ILivingEnvironment>();
-  const getUser = DecodeToken();
+  const { register, handleSubmit, watch, setValue } =
+    useForm<ILivingEnvironment>();
   const [deleteImgId, setDeleteImgId] = useState<number[]>([]);
   const [imageData, setImageData] = useState<LivingEnvironmentsData[]>([]);
   const onValid = async ({
@@ -64,25 +58,31 @@ const LivingEnvironmentForm = () => {
         const form = new FormData();
         const id = Array.from(new Set(deleteImgId));
         if (livingRoom && livingRoom.length > 0) {
-          form.append("livingRoomImg", livingRoom[0]);
-        } 
+          const livingRoom_Resize = (await resizeFile(livingRoom[0])) as File;
+          form.append("livingRoomImg", livingRoom_Resize);
+        }
         if (bathRoom && bathRoom.length > 0) {
-          form.append("bathRoomImg", bathRoom[0]);
-        } 
+          const bathRoom_Resize = (await resizeFile(bathRoom[0])) as File;
+          form.append("bathRoomImg", bathRoom_Resize);
+        }
 
         if (yard && yard.length > 0) {
-          form.append("yardImg", yard[0]);
-        } 
-        let data = {
-          "deletedImgsId":id
+          const yard_Resize = (await resizeFile(yard[0])) as File;
+          form.append("yardImg", yard_Resize);
         }
-        form.append("deletedImgsId", JSON.stringify(data));
+        const data = {
+          deletedImgsId: id,
+        };
+        const blob = new Blob([JSON.stringify(data)], {
+          type: "application/json",
+        });
+        form.append("deletedImgsId", blob);
         const url = LivingEnvironmentUrl();
         const response = await put<LivingEnvironmentsUploadResultResponse>(
           url,
           form
         );
-        if(response.data.status === "SUCCESS") {
+        if (response.data.status === "SUCCESS") {
           Swal.fire({
             ...alertList.successMessage("주거 환경이 저장되었습니다"),
             width: "350px",

src/component/MyPage/ProfileContent/ProfileContentForms1/MajorDogForm.tsx

@@ -26,7 +26,6 @@ const MajorDogForm = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
     watch,
     setValue,
   } = useForm();

src/component/MyPage/ProfileContent/ProfileContentForms1/ProfileForm.tsx

@@ -58,13 +58,12 @@ const ProfileForm = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
     watch,
     setValue,
   } = useForm<IIntroductionForm>();
 
   const accountInfo = DecodeToken();
-  const [user, setuser] = useState<IUser>(accountInfo);
+  const [user] = useState<IUser>(accountInfo);
 
   const onValid = async ({ introduction }: IIntroductionForm) => {
     const answer = await Swal.fire({

src/utils/ImageResize.ts

@@ -0,0 +1,17 @@
+import Resizer from "react-image-file-resizer";
+
+export const resizeFile = (file: File) =>
+    new Promise((resolve) => {
+      Resizer.imageFileResizer(
+        file,
+        1500,
+        1500,
+        "WEBP",
+        80,
+        0,
+        (uri) => {
+          resolve(uri);
+        },
+        "file"
+      );
+    });