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 (
;
+
+ const { content, totalElementsCount } = restaurantDataList;
+
+ return (
+
+ 음식점 수 {totalElementsCount} 개
+
+ {content?.map(({ celebs, ...restaurant }: RestaurantData) => (
+ {}} />
+ ))}
+
+
+ );
+}
+
+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([]);
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
const [boundary, setBoundary] = useState();
const [celebId, setCelebId] = useState(-1);
const [restaurantCategory, setRestaurantCategory] = useState('전체');
@@ -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() {
- 음식점 수 {data.length} 개
-
- {data?.map(({ celebs, ...restaurant }: RestaurantData) => (
- {}} />
- ))}
-
+
-
+
@@ -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;