From 31f463dd0b69fcb88280582ea4c1bb5e8397ca1c Mon Sep 17 00:00:00 2001
From: kimyong8175 <kimyong8175@naver.com>
Date: Sun, 4 Feb 2024 22:50:49 +0900
Subject: [PATCH] =?UTF-8?q?Custom=20Input=20=EC=9E=91=EC=97=85=EC=A4=91:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ManageOwnDogs/ContentBox/ContentBox.tsx   |  5 ++-
 .../ManageOwnDogs/CustomInput/CustomInput.tsx | 23 +++++++++---
 .../ManageOwnDogs/Form/OwnDogsCreateForm.tsx  |  2 +-
 .../ManageOwnDogs/Form/OwnDogsEditForm.tsx    | 37 +++++++++++--------
 .../ManageReview/ContentBox/ContentBox.tsx    |  8 ++--
 src/pages/ManageOwnDogs/edit/EditOwnDogs.tsx  |  6 +--
 src/utils/ReviewUrl.tsx                       | 13 +++++++
 7 files changed, 63 insertions(+), 31 deletions(-)
 create mode 100644 src/utils/ReviewUrl.tsx

diff --git a/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx b/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx
index 34baa97..c0a4df8 100644
--- a/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx
+++ b/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx
@@ -41,8 +41,9 @@ const ContentBox = () => {
 
   useEffect(() => {
     const fetchData = async () => {
+      const url = `${process.env.REACT_APP_API_URL}breeder/dogs?page=${page - 1}`;
       const res = await get<IData>(
-        `${process.env.REACT_APP_API_URL}breeder/dogs`,
+        url
       );
 
       return res.data.data;
@@ -54,7 +55,7 @@ const ContentBox = () => {
         setDogs(res.content);
       })
       .catch(err => console.log(err));
-  }, []);
+  }, [page]);
 
   const searchItems = (searchValue: string) => {
     setInputText(searchValue);
diff --git a/src/component/ManageOwnDogs/CustomInput/CustomInput.tsx b/src/component/ManageOwnDogs/CustomInput/CustomInput.tsx
index 2acf0a4..4a18f30 100644
--- a/src/component/ManageOwnDogs/CustomInput/CustomInput.tsx
+++ b/src/component/ManageOwnDogs/CustomInput/CustomInput.tsx
@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BiSolidDownArrow } from "react-icons/bi";
 
 import * as S from "./styles";
 
 interface IProps {
-    value?: string;
+    genderValue?: string;
+    statusValue?: string;
     genderArr?: string[];
     statusArr?: string[];
     width: string;
@@ -14,7 +15,8 @@ interface IProps {
 }
 
 const CustomInput = ({
-    value,
+    genderValue,
+    statusValue,
     genderArr,
     statusArr,
     width,
@@ -23,10 +25,15 @@ const CustomInput = ({
     updateStatusState
 }: IProps) => {
     const [isArrowClicked, setIsArrowClicked] = useState(false);
-    const [gender, setGender] = useState<string | undefined>(value);
-    const [status, setStatus] = useState<string | undefined>(value);
+    const [gender, setGender] = useState<string | undefined>();
+    const [status, setStatus] = useState<string | undefined>();
 
     if (genderArr) {
+        useEffect(() => {
+            setGender(genderValue);
+            console.log("g");
+            
+        }, [genderValue])
         return (
             <S.Wrapper width={width} height={height}>
                 <S.Input value={gender} disabled />
@@ -55,6 +62,12 @@ const CustomInput = ({
         );
     }
 
+    useEffect(() => {
+        setStatus(statusValue);
+        console.log('s');
+        
+    }, [statusValue])
+
     return (
         <S.Wrapper width={width} height={height}>
             <S.Input value={status} disabled />
diff --git a/src/component/ManageOwnDogs/Form/OwnDogsCreateForm.tsx b/src/component/ManageOwnDogs/Form/OwnDogsCreateForm.tsx
index 025cf23..72c9675 100644
--- a/src/component/ManageOwnDogs/Form/OwnDogsCreateForm.tsx
+++ b/src/component/ManageOwnDogs/Form/OwnDogsCreateForm.tsx
@@ -214,7 +214,7 @@ const OwnDogsCreateForm = () => {
                                 <CustomInput
                                     width={"84%"}
                                     height="48px"
-                                    value={
+                                    genderValue={
                                         dog?.gender?.gender ? dog?.gender?.gender : "MALE"
                                     }
                                     genderArr={["FEMAIL", "MALE"]}
diff --git a/src/component/ManageOwnDogs/Form/OwnDogsEditForm.tsx b/src/component/ManageOwnDogs/Form/OwnDogsEditForm.tsx
index ade4dbf..9c0cc31 100644
--- a/src/component/ManageOwnDogs/Form/OwnDogsEditForm.tsx
+++ b/src/component/ManageOwnDogs/Form/OwnDogsEditForm.tsx
@@ -25,7 +25,9 @@ interface IProps {
 //     status: IStatus;
 // }
 
-export type IStatus = 'AVAILABLE' | 'DONE';
+export interface IStatus {
+    status: 'AVAILABLE' | 'DONE';
+};
 
 export interface IGender {
     gender: 'FEMALE' | 'MALE';
@@ -36,11 +38,11 @@ const initialState:IDogEditInfo = {
     birthDate: "",
     dogImgUrl: [],
     dogType: "",
-    gender: "FEMALE",
+    gender: "",
     id: -1,
     management: "",
     name: "",
-    status: 'AVAILABLE'
+    status: ""
 }
 
 interface IDate {
@@ -83,11 +85,10 @@ const OwnDogsEditForm = ({dog}: IProps) => {
     */
     useEffect(() => {        
         setDog1(dog!);
-        // setDog1({...dog1, status: {status: dog1.status.status}})
         handleDate(dog?.birthDate!);
         setPrevImages(dog?.dogImgUrl!);
-    }, [dog])
-
+    }, [dog]);
+    
     /*
         Handle Date
     */
@@ -161,10 +162,7 @@ const OwnDogsEditForm = ({dog}: IProps) => {
         const updateStatusState = (value: string) => {
             if (value === 'AVAILABLE') setDog1({...dog1, status: 'AVAILABLE'});
              else setDog1({...dog1, status: 'DONE'});
-        }
-
-        console.log(dog1);
-        
+        }        
 
         /*
             Submit 할 때 create | edit 인지 확인 (dog1.id)
@@ -204,6 +202,15 @@ const OwnDogsEditForm = ({dog}: IProps) => {
                 } else {
                     formDataToSend.append('dogImgFiles', formDataFile[0]);
                 }
+            } else {
+                if (dog1.dogImgUrl.length > 0) {
+                    dog1.dogImgUrl.forEach((d) => {
+                        formDataToSend.append('dogImgFiles', d);
+                    });
+                } else {
+                    formDataToSend.append('dogImgFiles', dog1.dogImgUrl[0]);
+                }
+                formDataToSend.append('dogImgFiles', "");
             }
 
             formDataToSend.forEach((e) => {
@@ -285,8 +292,8 @@ const OwnDogsEditForm = ({dog}: IProps) => {
                                 <CustomInput
                                     width={"84%"}
                                     height="48px"
-                                    value={
-                                        dog1?.gender ? dog1?.gender : "MALE"
+                                    genderValue={
+                                        dog1?.gender === "FEMALE" ? dog1?.gender : "MALE"
                                     }
                                     genderArr={["FEMAIL", "MALE"]}
                                     updateGenderState={updateGenderState}
@@ -298,10 +305,10 @@ const OwnDogsEditForm = ({dog}: IProps) => {
                                 <CustomInput
                                     width={"84%"}
                                     height="48px"
-                                    value={
-                                        dog1?.status
+                                    statusValue={
+                                        dog1?.status === "AVAILABLE"
                                             ? dog1?.status
-                                            : "AVAILABLE"
+                                            : "DONE"
                                     }
                                     statusArr={["DONE", "AVAILABLE"]}
                                     updateStatusState={updateStatusState}
diff --git a/src/component/ManageReview/ContentBox/ContentBox.tsx b/src/component/ManageReview/ContentBox/ContentBox.tsx
index f2195f0..bcff370 100644
--- a/src/component/ManageReview/ContentBox/ContentBox.tsx
+++ b/src/component/ManageReview/ContentBox/ContentBox.tsx
@@ -56,11 +56,12 @@ const ContentBox = () => {
 
     useEffect(() => {
         const fetchData = async () => {
+            const url = `${process.env.REACT_APP_API_URL}adopter/reviews?page=${page - 1}`;
             const res = await get<any>(
-                `${process.env.REACT_APP_API_URL}adopter/reviews`
+                url
             );
 
-            console.log(res.data.data);
+            console.log(res);
             
             return res.data.data;
         };
@@ -71,8 +72,7 @@ const ContentBox = () => {
                 setTotalPage(res.totalPages);
             })
             .catch((err) => console.log(err));
-        setPage(1);  
-    }, []);
+    }, [page]);
 
     const searchItems = (searchValue: string) => {
         setInputText(searchValue);
diff --git a/src/pages/ManageOwnDogs/edit/EditOwnDogs.tsx b/src/pages/ManageOwnDogs/edit/EditOwnDogs.tsx
index 9f21080..5461afd 100644
--- a/src/pages/ManageOwnDogs/edit/EditOwnDogs.tsx
+++ b/src/pages/ManageOwnDogs/edit/EditOwnDogs.tsx
@@ -1,6 +1,6 @@
 import Navbar from "../../../component/MyPage/Navbar/Navbar";
 import CustomLayout from "../../Layout/CustomLayout";
-import OwnDogsEditForm, { IStatus } from "../../../component/ManageOwnDogs/Form/OwnDogsEditForm";
+import OwnDogsEditForm, { IGender, IStatus } from "../../../component/ManageOwnDogs/Form/OwnDogsEditForm";
 import { BoxsContainer, Container, SubmitButton } from "../styles";
 import { useParams } from "react-router-dom";
 import { useState , useEffect} from "react";
@@ -36,11 +36,9 @@ const EditOwnDogs = () => {
                 dogImgUrl: res.data.data.dogImgUrl,
                 birthDate: res.data.data.birthDate,
                 management: res.data.data.management,
-                status: res.data.data.status || "AVAILABLE",
+                status: res.data.data.status,
                 gender: res.data.data.gender,
             });
-
-            console.log(res.data.data.status);
         }
         getDogById();
     }, [id]);
diff --git a/src/utils/ReviewUrl.tsx b/src/utils/ReviewUrl.tsx
new file mode 100644
index 0000000..51108f0
--- /dev/null
+++ b/src/utils/ReviewUrl.tsx
@@ -0,0 +1,13 @@
+const ReviewUrl = () => {
+  return (
+    <div>ReviewUrl</div>
+  )
+}
+
+export default ReviewUrl
+
+// export const BreedersCollecturl = ({ page, searchs }: IBreedersCollecturl) => {
+//     return `breeders?page=${page - 1}${searchs.auth ? "&verification=yes" : ""}${
+//       searchs.keyword === "" ? "" : `&keyword=${searchs.keyword}`
+//     }`;
+//   };
\ No newline at end of file