Custom Input 작업중:

next-petree · Feb 4, 2024 · 31f463d · 31f463d
1 parent 0f8c6d4
commit 31f463d
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`
+//     }`;
+//   };