diff --git a/frontend/src/components/pages/main/MainPage.tsx b/frontend/src/components/pages/main/MainPage.tsx index 65884814..903b0fd6 100644 --- a/frontend/src/components/pages/main/MainPage.tsx +++ b/frontend/src/components/pages/main/MainPage.tsx @@ -8,8 +8,10 @@ import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard import useIntersectionObserver from "@hooks/useIntersectionObserver"; import * as S from "./MainPage.styled"; +import TravelogueCardSkeleton from "./TravelogueCard/skeleton/TravelogueCardSkeleton"; const MainPage = () => { + const SKELETON_COUNT = 5; const { travelogues, status, fetchNextPage } = useInfiniteTravelogues(); const { lastElementRef } = useIntersectionObserver(fetchNextPage); @@ -20,7 +22,13 @@ const MainPage = () => {

지금 뜨고 있는 여행기

다른 이들의 여행을 한 번 구경해보세요.

- {status === "pending" && <>로딩 ...} + {status === "pending" && ( + + {Array.from({ length: SKELETON_COUNT }, () => ( + + ))} + + )} {travelogues.map(({ userAvatar, id, title, thumbnail, likes }) => (