Merge pull request #135 from Step3-kakao-tech-campus/feat/#127

feat: 보호소 프로필 api 수정에 따른 화면 수정, 프로필 카드 ui 수정
Step3-kakao-tech-campus · Oct 23, 2023 · 4cdcfe8 · 4cdcfe8
2 parents ada6535 + 2ed7e2c
commit 4cdcfe8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/src/pages/profileList/VProfileCard.tsx b/src/pages/profileList/VProfileCard.tsx
@@ -2,7 +2,7 @@ export interface VProfileInfoProps {
   profileImageUrl: string;
   petId: number;
   petName: string;
-  petAge: number;
+  petAge: number | null;
   shelterName: string;
   adoptionStatus: string;
 }
@@ -11,24 +11,27 @@ const VProfileCard = (vProfileInfoProps: VProfileInfoProps) => (
   <div className="flex flex-col items-center justify-center m-5 flex-nowrap">
     <a
       href={`/pet/${vProfileInfoProps.petId}`}
-      className="flex items-center justify-center gap-6"
+      className="flex items-center justify-start gap-6 w-64 h-24"
     >
       <img
-        className="relative w-28 cursor-pointer"
+        className="flex w-1/3 cursor-pointer "
         src={vProfileInfoProps.profileImageUrl}
         alt=""
       />
       <div className=" whitespace-nowrap">
-        <div className="flex flex-col-reverse">
-          {vProfileInfoProps.petName} ({vProfileInfoProps.petAge})
+        <div className="flex flex-row items-center">
+          {vProfileInfoProps.petName}
+          <div className="flex ml-4 text-sm text-brand-color">
+            {vProfileInfoProps.petAge}
+          </div>
         </div>
         <div className="text-sm text-gray-400">
           {vProfileInfoProps.shelterName}
         </div>
-        <div className="font-bold">{vProfileInfoProps.adoptionStatus}</div>
+        <div className=" font-semibold">{vProfileInfoProps.adoptionStatus}</div>
       </div>
     </a>
-    <hr className="mt-5 w-full h-1"></hr>
+    <hr className="mt-4 w-4/6 h-1"></hr>
   </div>
 );
 

diff --git a/src/pages/shelterInfo/ShelterInfo.tsx b/src/pages/shelterInfo/ShelterInfo.tsx
@@ -42,7 +42,7 @@ const ShelterInfo = () => {
       const shelterInfoData = {
         name: data.shelter.name,
         id: data.shelter.id,
-        adress: data.shelter.adress,
+        adress: `${data.shelter.address.province} ${data.shelter.address.city} ${data.shelter.address.roadName} ${data.shelter.address.detail} `,
         call: data.shelter.contact,
       };
       const handlePageChange = (page: number) => {
@@ -51,15 +51,11 @@ const ShelterInfo = () => {
       };
       const pageData = {
         currentPage, // 현재 페이지 상태를 전달
-        lastPage: data.totalPages,
+        lastPage: data.petList.totalPages,
         maxLength: 7,
         setCurrentPage: handlePageChange,
       };
-      const profileListData = {
-        id: data.petList.pets.id,
-        name: data.petList.pets.name,
-        adoptionStatus: data.petList.pets.adoptionStatus,
-      };
+      const profileListData = data.petList.pets;
 
       const props: Props = {
         shelterInfoProps: shelterInfoData,

diff --git a/src/pages/shelterInfo/VShelterInfo.tsx b/src/pages/shelterInfo/VShelterInfo.tsx
@@ -18,9 +18,14 @@ export interface PageNationProps {
 }
 
 export interface ProfileProps {
+  map(
+    arg0: (item: any, index: any) => import('react/jsx-runtime').JSX.Element,
+  ): import('react').ReactNode;
+  profileImageUrl: string;
   id: number;
   name: string;
   adoptionStatus: string;
+  age: number;
 }
 
 export interface Props {
@@ -40,14 +45,16 @@ const VShelterInfo = (props: Props) => {
           관리중인 동물
         </h2>
         <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-10 w-full whitespace-nowrap">
-          <ProfileCard
-            profileImageUrl={''}
-            petId={props.profileProps.id}
-            petName={props.profileProps.name}
-            petAge={0}
-            shelterName={''}
-            {...props.profileProps}
-          />
+          {props.profileProps.map((item, index) => (
+            <ProfileCard
+              key={index}
+              petId={item.id}
+              petName={item.name}
+              petAge={item.age}
+              shelterName={''}
+              {...item}
+            />
+          ))}
         </div>
       </div>
       <div className="flex justify-center mb-11 sm:mb-28">