Merge pull request #86 from next-petree/boilerPlate

Boiler plate

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/CollectCOMP1/BreederCollect1/BreederBox1.tsx

@@ -30,7 +30,7 @@ export default function BreederBox({
   return (
     <BoxWrapper>
       <ImgBox>
-        {profileImagUrl ? <Img src={profileImagUrl} /> : <Dermyimg />}
+        {profileImagUrl ? <Img src={profileImagUrl} alt="Breeder_image" /> : <Dermyimg />}
         {verified ? (
           <Badge>
             <svg

src/component/CollectCOMP1/DogyCollect1/DogyBox1.tsx

@@ -30,15 +30,15 @@ export default function DogyBox({
     <BoxWrapper>
       <ImgBox>
         {status === "AVAILABLE" ? (
-          <Img src={imgUrl} alt="" />
+          <Img src={imgUrl} alt="Dog_image" />
         ) : status === "UNDERWAY" ? (
           <>
-            <AlreadyImg src={imgUrl} alt="" />
+            <AlreadyImg src={imgUrl} alt="Dog_image" />
             <Availtext>예약 중</Availtext>
           </>
         ) : (
           <>
-            <AlreadyImg src={imgUrl} alt="" />
+            <AlreadyImg src={imgUrl} alt="Dog_image" />
             <Availtext>분양 완료</Availtext>
           </>
         )}

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 {
@@ -109,7 +107,7 @@ const AvatarUpload = ({ setChangeAvatar }: IAvatarUpload) => {
           {avatarPreview !== "" ? (
             <>
               <UploadAvatarBorder>
-                <Avatar src={avatarPreview} alt="" />
+                <Avatar src={avatarPreview} alt="Profile_image_preview" />
               </UploadAvatarBorder>
               <AvatarDeleteBtn onClick={onDelete}>
                 <svg

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

@@ -1,4 +1,3 @@
-import DecodeToken from "../../../../utils/DecodeJWT/DecodeJWT";
 import {
   Button,
   Container,
@@ -26,25 +25,30 @@ 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;
   bathRoom: FileList | null;
   livingRoom: FileList | null;
 }
 
+export interface ILivingEnvironmentPreview {
+  yard: string | null;
+  bathRoom: string | null;
+  livingRoom: string | null;
+}
+
 const LivingEnvironmentForm = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    watch,
-    setValue,
-  } = useForm<ILivingEnvironment>();
-  const getUser = DecodeToken();
-  const [deleteImgId, setDeleteImgId] = useState<number[]>([])
+  const { register, handleSubmit, watch, setValue } =
+    useForm<ILivingEnvironment>();
+  const [deleteImgId, setDeleteImgId] = useState<number[]>([]);
   const [imageData, setImageData] = useState<LivingEnvironmentsData[]>([]);
-  const onValid = async ({livingRoom,bathRoom,yard,}: ILivingEnvironment) => {
+  const onValid = async ({
+    livingRoom,
+    bathRoom,
+    yard,
+  }: ILivingEnvironment) => {
     const answer = await Swal.fire({
       ...alertList.doubleCheckMessage("주거 환경을 저장 하시겠습니까?"),
       width: "350px",
@@ -53,38 +57,42 @@ const LivingEnvironmentForm = () => {
       try {
         const form = new FormData();
         const id = Array.from(new Set(deleteImgId));
-        console.log(id)
         if (livingRoom && livingRoom.length > 0) {
-          form.append("livingRoomImg", livingRoom[0]);
+          const livingRoom_Resize = (await resizeFile(livingRoom[0])) as File;
+          form.append("livingRoomImg", livingRoom_Resize);
         }
-        else {
-          form.append("livingRoomImg","");
-        }
-
         if (bathRoom && bathRoom.length > 0) {
-          form.append("bathRoomImg", bathRoom[0]);
-        }
-        else {
-          form.append("bathRoomImg", "");
+          const bathRoom_Resize = (await resizeFile(bathRoom[0])) as File;
+          form.append("bathRoomImg", bathRoom_Resize);
         }
 
         if (yard && yard.length > 0) {
-          form.append("yardImg", yard[0]);
-        }
-        else {
-          form.append("yardImg", "");
+          const yard_Resize = (await resizeFile(yard[0])) as File;
+          form.append("yardImg", yard_Resize);
         }
-        form.append("deletedImgsId", `${id}`);
+        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") {
+          Swal.fire({
+            ...alertList.successMessage("주거 환경이 저장되었습니다"),
+            width: "350px",
+          });
+        }
       } catch (e) {}
     }
   };
   // 이미지 url만 보내면 업로드가 되는 건지
-  const [imagesPre, setImagesPre] = useState({
+  const [imagesPre, setImagesPre] = useState<ILivingEnvironmentPreview>({
     yard: "",
     bathRoom: "",
     livingRoom: "",
@@ -115,22 +123,22 @@ const LivingEnvironmentForm = () => {
 
   const onDelete = (data: string) => {
     if (data === "yard") {
-      setImagesPre({ ...imagesPre, yard: "" });
+      setImagesPre({ ...imagesPre, yard: null });
       setValue(data, null);
-      if(imageData[2] && imageData[2].id) {
-        setDeleteImgId([...deleteImgId, imageData[2].id])
+      if (imageData[2] && imageData[2].id) {
+        setDeleteImgId([...deleteImgId, imageData[2].id]);
       }
     } else if (data === "bathRoom") {
-      setImagesPre({ ...imagesPre, bathRoom: "" });
+      setImagesPre({ ...imagesPre, bathRoom: null });
       setValue(data, null);
-      if(imageData[1] && imageData[1].id) {
-        setDeleteImgId([...deleteImgId, imageData[1].id])
+      if (imageData[1] && imageData[1].id) {
+        setDeleteImgId([...deleteImgId, imageData[1].id]);
       }
     } else if (data === "livingRoom") {
-      setImagesPre({ ...imagesPre, livingRoom: "" });
+      setImagesPre({ ...imagesPre, livingRoom: null });
       setValue(data, null);
-      if(imageData[0] && imageData[0].id) {
-        setDeleteImgId([...deleteImgId, imageData[0].id])
+      if (imageData[0] && imageData[0].id) {
+        setDeleteImgId([...deleteImgId, imageData[0].id]);
       }
     }
   };
@@ -154,12 +162,12 @@ const LivingEnvironmentForm = () => {
     <Container>
       <Form onSubmit={handleSubmit(onValid)}>
         <Infos>
-          <Title>주거환경{}</Title>
+          <Title>주거환경</Title>
           <Images>
             <ImageContainer>
-              {imagesPre.yard !== "" ? (
+              {imagesPre.yard !== null ? (
                 <>
-                  <Image src={imagesPre.yard} alt="" />
+                  <Image src={imagesPre.yard} alt="Yard_image" />
                   <ImageDeleteBtn onClick={() => onDelete("yard")}>
                     <svg
                       width="36"
@@ -243,9 +251,9 @@ const LivingEnvironmentForm = () => {
               <ImageText>마당</ImageText>
             </ImageContainer>
             <ImageContainer>
-              {imagesPre.bathRoom !== "" ? (
+              {imagesPre.bathRoom !== null ? (
                 <>
-                  <Image src={imagesPre.bathRoom} alt="" />
+                  <Image src={imagesPre.bathRoom} alt="BathRoom_image" />
                   <ImageDeleteBtn onClick={() => onDelete("bathRoom")}>
                     <svg
                       width="36"
@@ -329,9 +337,9 @@ const LivingEnvironmentForm = () => {
               <ImageText>화장실</ImageText>
             </ImageContainer>
             <ImageContainer>
-              {imagesPre.livingRoom !== "" ? (
+              {imagesPre.livingRoom !== null ? (
                 <>
-                  <Image src={imagesPre.livingRoom} alt="" />
+                  <Image src={imagesPre.livingRoom} alt="LivingRoom_image" />
                   <ImageDeleteBtn onClick={() => onDelete("livingRoom")}>
                     <svg
                       width="36"

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({
@@ -139,7 +138,7 @@ const ProfileForm = () => {
           <AvatarInfo onClick={onChangeAvatar}>
             <AvatarBorder $isAuth={isBreederAuth}>
               {avatar.avatar ? (
-                <Avatar src={avatar.avatar} alt="" />
+                <Avatar src={avatar.avatar} alt="Profile_image" />
               ) : (
                 <AvatarLabel>
                   <svg

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"
+      );
+    });