Merge pull request #200 from Step3-kakao-tech-campus/feat/#138

카테고리 안나오는 문제 해결, alt 값 추가, 각종 ui 수정
Step3-kakao-tech-campus · Nov 11, 2023 · 819d8a3 · 819d8a3
2 parents 1a3133e + 34850c7
commit 819d8a3
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 54 deletions.
diff --git a/src/commons/modals/CategoryModal.tsx b/src/commons/modals/CategoryModal.tsx
@@ -5,7 +5,7 @@ import CategoryModalList, {
   CategoryModalType,
   VCategoryModalListProps,
 } from 'commons/modals/VCategoryModalList';
-import { redirect, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 export interface CategoryModalProps {
   handleModalCloseClick: () => void;
@@ -30,7 +30,7 @@ const CategoryModal = ({
     '서울',
     '경기',
     '인천',
-    '제주특별자치도',
+    '제주',
     '충북',
     '충남',
     '대전',
@@ -42,8 +42,8 @@ const CategoryModal = ({
     '전북',
     '전남',
     '광주',
-    '강원특별자치도',
-    '세종특별자치시',
+    '강원',
+    '세종',
   ];
 
   const handleSpeciesClick = (speciess: SpeciesType) => {

diff --git a/src/pages/detailPet/components/VDetailPetData.tsx b/src/pages/detailPet/components/VDetailPetData.tsx
@@ -14,11 +14,11 @@ const VDetailPetData = ({
   imageUrl,
 }: VDetailPetDataProps) => {
   return (
-    <div className="flex min-w-[375px] items-center flex-col justify-center md:flex-row">
+    <div className="flex min-w-[375px] p-3 items-center flex-col justify-center md:flex-row">
       <img
-        className="relative w-96 cursor-pointer lg:mr-20 lg:ml-20 lg:w-1/2"
+        className="relative w-96 cursor-pointer p-3 sm:p-10 lg:mr-20 lg:ml-20 lg:w-2/5"
         src={detailPetInfoProps.profileImageUrl}
-        alt="z"
+        alt="유기동물 프로필 사진"
         onClick={handleModalImageClick}
       />
       <ModalPortal>

diff --git a/src/pages/detailPet/components/VDetailPetInfo.tsx b/src/pages/detailPet/components/VDetailPetInfo.tsx
@@ -3,11 +3,11 @@ import { DetailPetInfoProps } from '../detailPetType';
 
 const VDetailPetInfo = (data: DetailPetInfoProps) => {
   return (
-    <div className="flex flex-col items-center">
-      <div className="flex flex-col items-center text-sm md:text-base">
+    <div className="flex flex-col w-full  items-center">
+      <div className="flex flex-col w-full items-center text-sm md:text-base">
         <div className="flex py-7 justify-around">
           <div className="flex">
-            <h2 className="text-3xl w-36 mb-10">{data.name}</h2>
+            <h2 className="text-3xl font-semibold w-32 mb-4">{data.name}</h2>
           </div>
           <div className="flex">
             <span className="w-20 block font-bold"></span>
@@ -21,7 +21,7 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
           </div>
           <div className="flex">
             <span className="w-20 block font-bold">성별</span>
-            <span className="w-36 block">
+            <span className="w-32 block">
               {data.sex === 'MALE' ? '수컷' : '암컷'}
             </span>
           </div>
@@ -35,7 +35,7 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
           <div>
             <div className="flex">
               <span className="w-20 block font-bold">분양지역</span>
-              <span className="w-36 block">{data.shelterInfo.name}</span>
+              <span className="w-32 block">{data.shelterInfo.name}</span>
             </div>
             <span className="text-xs font-bold text-yellow-600">
               {'애니모리에 등록된 보호소입니다. '}
@@ -56,7 +56,7 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
           </div>
           <div className="flex">
             <span className="w-20 block font-bold">중성화</span>
-            <span className="w-36 block">{data.neutralizationStatus}</span>
+            <span className="w-32 block">{data.neutralizationStatus}</span>
           </div>
         </div>
 
@@ -66,15 +66,15 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
             <span className="w-20 block">{data.adoptionStatus}</span>
           </div>
           <div className="flex">
-            <span className="w-20 block font-bold">보호종료일</span>
-            <span className="w-36 block">{data.protectionExpirationDate}</span>
+            <span className=" w-20 block font-bold">보호종료일</span>
+            <span className="w-32 block">{data.protectionExpirationDate}</span>
           </div>
         </div>
 
         <div className="hidden py-7 md:flex justify-around">
           <div className="flex">
             <span className="w-16 block font-bold">연락처</span>
-            <span className="w-36 block">{data.shelterInfo.contact}</span>
+            <span className="w-32 block">{data.shelterInfo.contact}</span>
           </div>
           <div className="flex">
             <span className="w-20 block font-bold"></span>
@@ -83,12 +83,15 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
         </div>
 
         <a href={`tel:${data.shelterInfo.contact}`}>
-          <span className="border-2 border-gray-500 font-bold md:hidden flex w-[22rem] h-10 mb-10 bg-green-500 rounded-md items-center justify-center">
+          <span className="border-2 text-white font-bold md:hidden flex w-[22rem] h-10 mb-10 bg-green-700 rounded-xl items-center justify-center">
             문의하기
           </span>
         </a>
 
-        <div className="w-full">{data.description}</div>
+        <div className="flex">
+          <span className="w-16 block font-bold">상세정보</span>
+          <span className="w-72 mb-5 block">{data.description}</span>
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/home/components/Home.tsx b/src/pages/home/components/Home.tsx
@@ -73,11 +73,13 @@ const Home = () => {
   const categoryAvailable = region !== '전국' || species !== '전체';
 
   return (
-    <div className="overflow-hidden bg-white h-[85vh]">
+    <div className="overflow-auto bg-white h-[85vh]">
       {categoryAvailable && <CategoryBar {...categoryBarProps} />}
       {noData && <HomeNoData species={species} />}
       <VideoMuteIcon muted={muted} opacity={opacity} />
-      <HomeVideoSlider {...homeVideoSliderProps} />
+      <div className="h-[70vh]">
+        <HomeVideoSlider {...homeVideoSliderProps} />
+      </div>
     </div>
   );
 };

diff --git a/src/pages/home/components/HomeVideoSlider.tsx b/src/pages/home/components/HomeVideoSlider.tsx
@@ -49,14 +49,14 @@ const HomeVideoSlider = (props: HomeVideoSliderProps) => {
 
   return (
     <Swiper
+      className="h-[85vh]"
       modules={[A11y, Autoplay, Mousewheel, Keyboard]}
       spaceBetween={10}
       grabCursor={true}
       mousewheel={{
         sensitivity: 100,
         thresholdDelta: 30,
       }}
-      autoHeight={true}
       direction={'vertical'}
       keyboard={{ enabled: true, pageUpDown: true, onlyInViewport: true }}
     >
@@ -69,6 +69,7 @@ const HomeVideoSlider = (props: HomeVideoSliderProps) => {
                   <div ref={nextPageRef}></div>
 
                   <Swiper
+                    className="h-[70vh]"
                     modules={[A11y]}
                     grabCursor={true}
                     autoHeight={true}

diff --git a/src/pages/home/components/VideoInfo.tsx b/src/pages/home/components/VideoInfo.tsx
@@ -1,11 +1,14 @@
 import { ShortForm } from '../homeType';
 
 const VideoInfo = (props: ShortForm) => {
+  const textColor =
+    props.adoptionStatus === '미입양' ? 'text-brand-color' : 'text-blue-700';
+
   return (
     <div className="flex flex-row h-20 w-5/6 px-6 py-2  items-center justify-between">
       <div className="text-lg text-neutral-950">{props.name}</div>
       <div className="flex flex-col h-10 w-fit text-end">
-        <div className=" text-blue-700 font-semibold whitespace-pre-wrap">
+        <div className={`font-semibold  whitespace-pre-wrap ${textColor}`}>
           {props.adoptionStatus}
         </div>
         <div className="text-gray-700 whitespace-nowrap">

diff --git a/src/pages/profileList/components/ProfileCard.tsx b/src/pages/profileList/components/ProfileCard.tsx
@@ -1,33 +1,43 @@
 import { ListProps } from '../profileListType';
 
-const ProfileCard = (vProfileInfoProps: ListProps) => (
-  <div className="flex flex-col items-center justify-center m-1 flex-nowrap">
-    <a
-      href={`/pet/${vProfileInfoProps.petId}`}
-      className="flex items-center justify-start gap-6 w-auto h-24 ml-10"
-    >
-      <div className="flex justify-center w-24 h-full">
-        <img
-          className="flex object-cover w-full h-full cursor-pointer "
-          src={vProfileInfoProps.profileImageUrl}
-          alt=""
-        />
-      </div>
-      <div className=" w-44 whitespace-nowrap">
-        <div className="flex flex-row items-center">
-          {vProfileInfoProps.petName}
-          <div className="flex ml-4 text-sm text-brand-color">
-            {vProfileInfoProps.petAge}
-          </div>
+const ProfileCard = (vProfileInfoProps: ListProps) => {
+  let textColor = 'text-neutral-950';
+  if (vProfileInfoProps.status === '미입양') {
+    textColor = 'text-brand-color'; // 미입양일 때 주황색
+  } else if (vProfileInfoProps.status === '입양 완료') {
+    textColor = 'text-blue-700'; // 입양완료일 때 파란색
+  }
+  return (
+    <div className="flex flex-col items-center justify-center m-1 flex-nowrap">
+      <a
+        href={`/pet/${vProfileInfoProps.petId}`}
+        className="flex items-center justify-start gap-6 w-auto h-24 ml-10"
+      >
+        <div className="flex justify-center w-24 h-full">
+          <img
+            className="flex object-cover w-full h-full cursor-pointer "
+            src={vProfileInfoProps.profileImageUrl}
+            alt="유기동물 사진"
+          />
         </div>
-        <div className="text-sm text-gray-400">
-          {vProfileInfoProps.shelterName}
+        <div className=" w-44 whitespace-nowrap">
+          <div className="flex text-base font-semibold 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-500">
+            {vProfileInfoProps.shelterName}
+          </div>
+          <div className={` text-base mt-2 font-semibold ${textColor}`}>
+            {vProfileInfoProps.status}
+          </div>
         </div>
-        <div className=" text-sm font-semibold">{vProfileInfoProps.status}</div>
-      </div>
-    </a>
-    <hr className=" w-64 h-1 mt-4"></hr>
-  </div>
-);
+      </a>
+      <hr className=" w-64 h-1 mt-4"></hr>
+    </div>
+  );
+};
 
 export default ProfileCard;
diff --git a/src/pages/register/components/FileInput.tsx b/src/pages/register/components/FileInput.tsx
@@ -26,7 +26,7 @@ const FileInput = (props: FileInputProps) => {
           <>
             <img
               src="/assets/images/check.png"
-              alt=""
+              alt="파일 업로드"
               className="w-12 h-12 mb-5"
             />
             <span className="font-bold">
@@ -43,7 +43,7 @@ const FileInput = (props: FileInputProps) => {
           <>
             <img
               src="/assets/images/upload.png"
-              alt=""
+              alt="파일 업로드 완료"
               className="w-12 h-12 mb-5"
             />
             <label

diff --git a/src/recoil/regionState.ts b/src/recoil/regionState.ts
@@ -4,7 +4,7 @@ export type RegionType =
   | '서울'
   | '경기'
   | '인천'
-  | '강원특별자치도'
+  | '강원'
   | '충북'
   | '충남'
   | '대전'
@@ -16,8 +16,8 @@ export type RegionType =
   | '전북'
   | '전남'
   | '광주'
-  | '제주특별자치도'
-  | '세종특별자치시'
+  | '제주'
+  | '세종'
   | '전국';
 
 const regionState = atom<RegionType>({