From e1b1f3c5d4d7a99e75804ceba3359c6526e5163d Mon Sep 17 00:00:00 2001
From: d0dam <smallkdb@gmail.com>
Date: Sat, 29 Jul 2023 22:19:12 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=9D=8C=EC=8B=9D=EC=A0=90=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC,=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80=20(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/@types/api.types.ts              |  9 ++++
 frontend/src/components/@common/Map/Map.tsx   |  2 +-
 .../RestaurantCardList/RestaurantCardList.tsx | 49 +++++++++++++++++++
 .../components/RestaurantCardList/index.tsx   |  3 ++
 frontend/src/pages/MainPage.tsx               | 41 ++++------------
 5 files changed, 71 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/RestaurantCardList/RestaurantCardList.tsx
 create mode 100644 frontend/src/components/RestaurantCardList/index.tsx

diff --git a/frontend/src/@types/api.types.ts b/frontend/src/@types/api.types.ts
index 92975dd42..e773b993a 100644
--- a/frontend/src/@types/api.types.ts
+++ b/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;
diff --git a/frontend/src/components/@common/Map/Map.tsx b/frontend/src/components/@common/Map/Map.tsx
index 0e9912a69..048c7899b 100644
--- a/frontend/src/components/@common/Map/Map.tsx
+++ b/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
diff --git a/frontend/src/components/RestaurantCardList/RestaurantCardList.tsx b/frontend/src/components/RestaurantCardList/RestaurantCardList.tsx
new file mode 100644
index 000000000..1656e1366
--- /dev/null
+++ b/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;
+  }
+`;
diff --git a/frontend/src/components/RestaurantCardList/index.tsx b/frontend/src/components/RestaurantCardList/index.tsx
new file mode 100644
index 000000000..0f31b4b56
--- /dev/null
+++ b/frontend/src/components/RestaurantCardList/index.tsx
@@ -0,0 +1,3 @@
+import RestaurantCardList from './RestaurantCardList';
+
+export default RestaurantCardList;
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index 100d0f2a0..d41dd62e6 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -5,20 +5,20 @@ 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>('전체');
@@ -26,10 +26,12 @@ function MainPage() {
 
   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;