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

ui 수정

src/App.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import DetailPetPage from 'pages/detailPet/DetailPetPage';
-import ProfileListPage from 'pages/profileList/ProfileListPage';
+import ProfileListPage from 'pages/profileList/profileListHome/ProfileListPage';
 import LoginPage from 'pages/login/LoginPage';
 import MapPage from 'pages/map/MapPage';
 import NewListPage from 'pages/profileList/newList/NewListPage';
@@ -46,7 +46,8 @@ const routes = [
           },
           {
             path: '/profile',
-            lazy: () => import('pages/profileList/ProfileListPage'),
+            lazy: () =>
+              import('pages/profileList/profileListHome/ProfileListPage'),
             element: <ProfileListPage />,
           },
           {

src/pages/home/components/Home.tsx

@@ -16,27 +16,19 @@ const Home = () => {
   const [opacity, setOpacity] = useState(0);
   const [species, setSpecies] = useRecoilState<SpeciesType>(speciesState);
   const [region, setRegion] = useRecoilState<RegionType>(regionState);
+  const SPECIES_TYPES = {
+    강아지: 'DOG',
+    고양이: 'CAT',
+    기타: 'ETC',
+    전체: '',
+  };
+  const type = SPECIES_TYPES[species] ?? '';
+
+  const area = region === '전국' ? '' : region;
   const { data, fetchNextPage } = useInfiniteQuery(
     ['home', 1, region, species],
     ({ pageParam = 1 }) => {
-      const SPECIES_TYPES = {
-        강아지: 'DOG',
-        고양이: 'CAT',
-        기타: 'ETC',
-        전체: '',
-      };
-      const type = SPECIES_TYPES[species] ?? '';
-
-      let area = '';
-      if (region === '전국') {
-        area = '';
-      } else {
-        area = region;
-      }
-      const apiUrl =
-        region !== '전국' || species !== '전체'
-          ? `${process.env.REACT_APP_URI}/short-forms?type=${type}&area=${area}&page=${pageParam}&size=5`
-          : `${process.env.REACT_APP_URI}/short-forms/home?page=${pageParam}&size=5`;
+      const apiUrl = `${process.env.REACT_APP_URI}/short-forms?type=${type}&area=${area}&page=${pageParam}&size=5`;
       return fetch(apiUrl, {
         method: 'GET',
         headers: {

src/pages/profileList/components/ProfileCard.tsx

@@ -1,6 +1,6 @@
-import { VProfileInfoProps } from '../profileListType';
+import { ListProps } from '../profileListType';
 
-const ProfileCard = (vProfileInfoProps: VProfileInfoProps) => (
+const ProfileCard = (vProfileInfoProps: ListProps) => (
   <div className="flex flex-col items-center justify-center m-1 flex-nowrap">
     <a
       href={`/pet/${vProfileInfoProps.petId}`}
@@ -23,12 +23,10 @@ const ProfileCard = (vProfileInfoProps: VProfileInfoProps) => (
         <div className="text-sm text-gray-400">
           {vProfileInfoProps.shelterName}
         </div>
-        <div className=" text-sm font-semibold">
-          {vProfileInfoProps.adoptionStatus}
-        </div>
+        <div className=" text-sm font-semibold">{vProfileInfoProps.status}</div>
       </div>
     </a>
-    <hr className=" w-9/12 h-1 mt-4"></hr>
+    <hr className=" w-64 h-1 mt-4"></hr>
   </div>
 );
 

src/pages/profileList/components/ProfileList.tsx

@@ -0,0 +1,63 @@
+import { useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import useFetch from 'commons/apis/useFetch';
+import { ProfileListProps } from '../profileListType';
+import ProfileListSkeleton from './ProfileListSkeleton';
+import VProfileList from './VProfileList';
+
+const ProfileList = (prop: { prop: string }) => {
+  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const navigate = useNavigate();
+  // 페이지 변경 함수
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    navigate(`/profile/${prop.prop}/${page}`);
+  };
+  const word = prop.prop === 'urgent' ? 'sos' : prop.prop;
+  console.log(word);
+
+  const [list, setList] = useState<ProfileListProps | null>(null);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['list', currentPage],
+    queryFn: () => useFetch(`/pet/profiles/${word}?page=${currentPage}`),
+  });
+
+  useEffect(() => {
+    if (!isLoading && !isError && data) {
+      const pageData = {
+        currentPage: data.pageNumber, // 현재 페이지 상태를 전달
+        lastPage: data.totalPages,
+        maxLength: 7,
+        setCurrentPage: handlePageChange,
+      };
+
+      const listData = data.sosList ? data.sosList : data.newList;
+
+      const listProps: ProfileListProps = {
+        pageProps: pageData,
+        listProps: listData,
+      };
+
+      setList(listProps);
+    }
+  }, [data, isLoading, isError]);
+
+  if (isLoading) {
+    return <ProfileListSkeleton prop={prop.prop} />;
+  }
+
+  if (isError) {
+    return <div>Error: {isError}</div>;
+  }
+
+  if (list) {
+    const title =
+      prop.prop === 'urgent' ? '긴급 도움이 필요해요' : '신규 애니모리 친구들';
+    return <VProfileList profileProps={list} title={title} />;
+  }
+
+  return null;
+};
+export default ProfileList;

src/pages/profileList/components/ProfileListSkeleton.tsx

@@ -0,0 +1,41 @@
+const ProfileListSkeleton = ({ prop }: { prop: string }) => {
+  const title =
+    prop === 'urgent' ? '긴급 도움이 필요해요' : '신규 애니모리 친구들';
+  const num = prop === 'home' ? '4' : '8';
+  return (
+    <div className="mx-16 sm:mx-32 lg:mx-64 my-14">
+      <h2 className="flex w-full font-bold text-xl sm:text-2xl items-center whitespace-nowrap">
+        {title}
+      </h2>
+      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-3 w-full whitespace-nowrap">
+        {[...Array(parseInt(num, 10))].map((n, index) => {
+          return (
+            <div
+              key={index}
+              className="w-64 h-28 bg-gray-200 m-2 flex items-center gap-6 ml-20"
+            />
+          );
+        })}
+      </div>
+      {prop === 'home' && (
+        <>
+          <h2 className="flex w-full font-bold text-xl sm:text-2xl mt-10 mb-5 items-center whitespace-nowrap">
+            {title}
+          </h2>
+          <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-3 w-full whitespace-nowrap">
+            {[...Array(parseInt(num, 10))].map((n, index) => {
+              return (
+                <div
+                  key={index}
+                  className="w-64 h-28 bg-gray-200 m-2 flex items-center gap-6 ml-20"
+                />
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ProfileListSkeleton;

src/pages/profileList/components/VProfileList.tsx

@@ -0,0 +1,42 @@
+import Pagination from 'commons/components/VPagenation';
+import ProfileCard from './ProfileCard';
+import { ProfileListProps } from '../profileListType';
+
+const VProfileList = ({
+  profileProps,
+  title,
+}: {
+  profileProps: ProfileListProps;
+  title: string;
+}) => {
+  return (
+    <div className="mx-16 sm:mx-32 lg:mx-64 my-14">
+      <h2 className="flex w-full font-bold text-xl sm:text-2xl mb-5 items-center whitespace-nowrap">
+        {title}
+      </h2>
+      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-1 w-full whitespace-nowrap">
+        {profileProps.listProps.map((item, index) => (
+          <ProfileCard
+            key={index}
+            status={
+              item.adoptionStatus
+                ? item.adoptionStatus
+                : item.protectionExpirationDate
+            }
+            {...item}
+          />
+        ))}
+      </div>
+      <div className="flex justify-center mt-7 mb-11 sm:mb-28">
+        <Pagination
+          currentPage={profileProps.pageProps.currentPage}
+          lastPage={profileProps.pageProps.lastPage}
+          maxLength={7}
+          setCurrentPage={profileProps.pageProps.setCurrentPage}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default VProfileList;

src/pages/profileList/newList/NewListPage.tsx

@@ -1,10 +1,11 @@
-import NewList from 'pages/profileList/newList/NewList';
+import ErrorBoundary from 'layouts/ErrorBoundary';
+import ProfileList from '../components/ProfileList';
 
 const NewListPage = () => {
   return (
-    <>
-      <NewList />
-    </>
+    <ErrorBoundary>
+      <ProfileList prop="new" />
+    </ErrorBoundary>
   );
 };