fix: 보호소 프로필 ui 수정

Step3-kakao-tech-campus · Nov 10, 2023 · debc945 · debc945
1 parent 8c31a5b
commit debc945
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/pages/profileList/components/ProfileList.tsx b/src/pages/profileList/components/ProfileList.tsx
@@ -12,7 +12,7 @@ const ProfileList = (prop: { prop: string }) => {
   // 페이지 변경 함수
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
-    navigate(`/profile/${prop}/${page}`);
+    navigate(`/profile/${prop.prop}/${page}`);
   };
   const word = prop.prop === 'urgent' ? 'sos' : prop.prop;
   console.log(word);

diff --git a/src/pages/shelterInfo/components/VShelterCard.tsx b/src/pages/shelterInfo/components/VShelterCard.tsx
@@ -1,17 +1,19 @@
 import { VShelterInfoProps } from '../shelterInfoType';
 
 const VShelterCard = ({ name, adress, call }: VShelterInfoProps) => (
-  <div className="flex w-auto justify-center">
+  <div className="flex w-96 sm:w-auto justify-center">
     <div className="flex mx-2">
       <div className="relative flex">
         <img src={'/assets/frame.png'} alt="" className=" w-auto" />
-        <div className="absolute text-xs sm:text-lg inset-0 flex flex-col items-start justify-start px-8 py-5 sm:p-10">
+        <div className="absolute text-sm sm:text-lg inset-0 flex flex-col items-start justify-start px-8 py-5 sm:p-10">
           <div className="flex text-lg sm:text-2xl font-bold whitespace-nowrap">
             {name}
           </div>
-          <div className="flex center whitespace-nowrap">{adress}</div>
-          <div className="sm:mt-3 mb-1 whitespace-nowrap">연락처 {call}</div>
-          <span className="mt-auto inline-block bg-green-700 px-2 py-1 text-xs font-medium uppercase text-white rounded-xl whitespace-nowrap">
+          <div className="flex center">{adress}</div>
+          <div className="sm:mt-3 text-green-700 mb-1 flex flex-row whitespace-nowrap">
+            연락처 {call}
+          </div>
+          <span className="mt-auto inline-block bg-green-700 px-2 py-1 text-sm font-medium uppercase text-white rounded-xl whitespace-nowrap">
             <a href={`tel:${call}`}>전화하기</a>
           </span>
         </div>

diff --git a/src/pages/shelterInfo/components/VShelterInfo.tsx b/src/pages/shelterInfo/components/VShelterInfo.tsx
@@ -11,14 +11,14 @@ const VShelterInfo = (props: ShelterInfoPageProps) => {
 
   return (
     <div>
-      <div className="mt-8 sm:mt-20">
+      <div className="mt-8 sm:mt-20 flex justify-center ">
         <VShelterCard {...props.shelterInfoProps} />
       </div>
-      <div className="mx-16 sm:mx-40 lg:mx-64 my-14">
+      <div className="mx-8 justify-center sm:mx-40 lg:mx-64 my-14">
         <h2 className="flex w-full font-bold text-xl sm:text-2xl items-center mb-5 whitespace-nowrap">
           관리중인 동물
         </h2>
-        <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-1 w-full whitespace-nowrap">
+        <div className="grid grid-cols-1 items-center place-items-center gap-1 md:grid-cols-2 my-1 w-full">
           {props.profileProps.map((item, index) => (
             <div className="flex flex-row" key={index}>
               <ProfileCard
@@ -35,7 +35,7 @@ const VShelterInfo = (props: ShelterInfoPageProps) => {
                   role === 'SHELTER' &&
                   id === `${props.shelterInfoProps.id}`
                     ? ' absolute ml-60 bg-slate-200 text-sm h-fit w-fit p-1  rounded-xl '
-                    : ' text-transparent '
+                    : ' text-transparent opacity-0'
                 }`}
                 onClick={() => {
                   // eslint-disable-next-line no-restricted-globals