feat: 메인 페이지에 skeleton UI 추가

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 = () => {
         <h1>지금 뜨고 있는 여행기</h1>
         <p>다른 이들의 여행을 한 번 구경해보세요.</p>
       </S.MainPageHeaderContainer>
-      {status === "pending" && <>로딩 ...</>}
+      {status === "pending" && (
+        <S.MainPageTraveloguesList>
+          {Array.from({ length: SKELETON_COUNT }, () => (
+            <TravelogueCardSkeleton />
+          ))}
+        </S.MainPageTraveloguesList>
+      )}
       <S.MainPageTraveloguesList>
         {travelogues.map(({ userAvatar, id, title, thumbnail, likes }) => (
           <TravelogueCard