refactor: 음식점 카드 리스트 컴포넌트 분리, 로딩 상태 추가 (#199)

frontend/src/@types/api.types.ts

@@ -1,3 +1,12 @@
+export interface RestaurantListData {
+  content: RestaurantData[];
+  currentElementsCount: number;
+  currentPage: number;
+  pageSize: number;
+  totalElementsCount: number;
+  totalPage: number;
+}
+
 export interface RestaurantData {
   id: number;
   name: string;

frontend/src/components/@common/Map/Map.tsx

@@ -82,7 +82,7 @@ function Map({ data, setBoundary, toggleMapExpand }: MapProps) {
         zoom={zoom}
         center={center}
       >
-        {data.map(({ celebs, ...restaurant }) => {
+        {data?.map(({ celebs, ...restaurant }) => {
           const { lat, lng } = restaurant;
           return (
             <OverlayMarker

frontend/src/components/RestaurantCardList/RestaurantCardList.tsx

@@ -0,0 +1,49 @@
+import { styled } from 'styled-components';
+import RestaurantCard from '../RestaurantCard/RestaurantCard';
+import type { RestaurantData, RestaurantListData } from '~/@types/api.types';
+import { FONT_SIZE } from '~/styles/common';
+import RestaurantCardListSkeleton from './RestaurantCardListSkeleton';
+
+interface RestaurantCardListProps {
+  restaurantDataList: RestaurantListData | null;
+  loading: boolean;
+}
+
+function RestaurantCardList({ restaurantDataList, loading }: RestaurantCardListProps) {
+  if (!restaurantDataList || loading) return <RestaurantCardListSkeleton />;
+
+  const { content, totalElementsCount } = restaurantDataList;
+
+  return (
+    <div>
+      <StyledCardListHeader>음식점 수 {totalElementsCount} 개</StyledCardListHeader>
+      <StyledRestaurantCardList>
+        {content?.map(({ celebs, ...restaurant }: RestaurantData) => (
+          <RestaurantCard restaurant={restaurant} celebs={celebs} size={42} onClick={() => {}} />
+        ))}
+      </StyledRestaurantCardList>
+    </div>
+  );
+}
+
+export default RestaurantCardList;
+
+const StyledCardListHeader = styled.p`
+  margin: 3.2rem 2.4rem;
+
+  font-size: ${FONT_SIZE.md};
+`;
+
+const StyledRestaurantCardList = styled.div`
+  display: grid;
+  gap: 4rem 2.4rem;
+
+  height: 100%;
+
+  margin: 0 2.4rem;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  @media screen and (width <= 1240px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`;

frontend/src/components/RestaurantCardList/index.tsx

@@ -0,0 +1,3 @@
+import RestaurantCardList from './RestaurantCardList';
+
+export default RestaurantCardList;

frontend/src/pages/MainPage.tsx

@@ -5,31 +5,33 @@ import Header from '~/components/@common/Header';
 import Map from '~/components/@common/Map';
 import CategoryNavbar from '~/components/CategoryNavbar';
 import CelebDropDown from '~/components/CelebDropDown/CelebDropDown';
-import RestaurantCard from '~/components/RestaurantCard';
 import RESTAURANT_CATEGORY from '~/constants/restaurantCategory';
 import { CELEBS_OPTIONS } from '~/constants/celebs';
 import useFetch from '~/hooks/useFetch';
 import getQueryString from '~/utils/getQueryString';
-import { FONT_SIZE } from '~/styles/common';
 import type { Celeb } from '~/@types/celeb.types';
-import type { RestaurantData } from '~/@types/api.types';
+import type { RestaurantListData } from '~/@types/api.types';
 import type { CoordinateBoundary } from '~/@types/map.types';
 import type { RestaurantCategory } from '~/@types/restaurant.types';
+import RestaurantCardList from '~/components/RestaurantCardList';
 
 function MainPage() {
   const [isMapExpanded, setIsMapExpanded] = useState(false);
-  const [data, setData] = useState<RestaurantData[]>([]);
+  const [data, setData] = useState<RestaurantListData>(null);
+  const [loading, setLoading] = useState(false);
   const [boundary, setBoundary] = useState<CoordinateBoundary>();
   const [celebId, setCelebId] = useState<Celeb['id']>(-1);
   const [restaurantCategory, setRestaurantCategory] = useState<RestaurantCategory>('전체');
   const { handleFetch } = useFetch('restaurants');
 
   const fetchRestaurants = useCallback(
     async (queryObject: { boundary: CoordinateBoundary; celebId: number; category: RestaurantCategory }) => {
+      setLoading(true);
       const queryString = getQueryString(queryObject);
       const response = await handleFetch({ queryString });
 
-      setData(response.content);
+      setData(response);
+      setLoading(false);
     },
     [boundary, celebId, restaurantCategory],
   );
@@ -66,15 +68,10 @@ function MainPage() {
       </StyledNavBar>
       <StyledLayout isMapExpanded={isMapExpanded}>
         <StyledLeftSide isMapExpanded={isMapExpanded}>
-          <StyledCardListHeader>음식점 수 {data.length} 개</StyledCardListHeader>
-          <StyledRestaurantCardList>
-            {data?.map(({ celebs, ...restaurant }: RestaurantData) => (
-              <RestaurantCard restaurant={restaurant} celebs={celebs} size={42} onClick={() => {}} />
-            ))}
-          </StyledRestaurantCardList>
+          <RestaurantCardList restaurantDataList={data} loading={loading} />
         </StyledLeftSide>
         <StyledRightSide>
-          <Map setBoundary={setBoundary} data={data} toggleMapExpand={toggleMapExpand} />
+          <Map setBoundary={setBoundary} data={data?.content} toggleMapExpand={toggleMapExpand} />
         </StyledRightSide>
       </StyledLayout>
       <Footer />
@@ -154,26 +151,6 @@ const StyledLeftSide = styled.div<{ isMapExpanded: boolean }>`
     `}
 `;
 
-const StyledCardListHeader = styled.p`
-  margin: 3.2rem 2.4rem;
-
-  font-size: ${FONT_SIZE.md};
-`;
-
-const StyledRestaurantCardList = styled.div`
-  display: grid;
-  gap: 4rem 2.4rem;
-
-  height: 100%;
-
-  margin: 0 2.4rem;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  @media screen and (width <= 1240px) {
-    grid-template-columns: 1fr 1fr;
-  }
-`;
-
 const StyledRightSide = styled.div`
   position: sticky;
   top: 160px;