크루 랭킹 페에지, 알림 페이지 스켈레톤 UI 추가 (#381)

* feat: ItemListPageSkeleton 구현

* feat: 크루 랭킹 페이지, 알림 페이지 스켈레톤 ui 구현

src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+
+export const PageContent = styled(Flex)`
+  padding: 10px 0 70px 0;
+`;

src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx

@@ -0,0 +1,37 @@
+import { Header } from '@components/Header';
+import { ManageContainer } from '@components/Participation';
+import { Skeleton } from '@components/Skeleton';
+
+import { theme } from '@styles/theme';
+
+import { PageContent } from './ItemListPageSkeleton.styles';
+
+type ItemListPageSkeletonProps = {
+  name: string;
+};
+
+export const ItemListPageSkeleton = ({ name }: ItemListPageSkeletonProps) => {
+  return (
+    <Skeleton
+      width="100%"
+      height="60px"
+      radius="5px"
+      defaultColor={theme.PALETTE.GRAY_200}
+      gradientColor={theme.PALETTE.GRAY_300}
+    >
+      <ManageContainer>
+        <Header title={name} />
+        <PageContent direction="column" gap={10}>
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+        </PageContent>
+      </ManageContainer>
+    </Skeleton>
+  );
+};

src/pages/__components__/ItemListPageSkeleton/index.ts

@@ -0,0 +1 @@
+export * from './ItemListPageSkeleton';

src/routes/router.tsx

@@ -8,6 +8,7 @@ import { Layout } from '@pages/Layout';
 import { MainPageLoading } from '@pages/MainPage';
 import { ProfilePageSkeleton } from '@pages/ProfilePage';
 import { CardListPageSkeleton } from '@pages/__components__/CardListPageSkeleton';
+import { ItemListPageSkeleton } from '@pages/__components__/ItemListPageSkeleton';
 import { ManagePageSkeleton } from '@pages/__components__/ManagePageSkeleton';
 
 import { LoginRequireBoundary } from './LoginRequireBoundary';
@@ -145,7 +146,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'crews/ranking',
-        element: <CrewsRankingPage />,
+        element: (
+          <Suspense fallback={<ItemListPageSkeleton name="크루 랭킹" />}>
+            <CrewsRankingPage />
+          </Suspense>
+        ),
       },
       {
         path: 'crews/:id',
@@ -198,7 +203,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'notification',
-        element: <NotificationPage />,
+        element: (
+          <Suspense fallback={<ItemListPageSkeleton name="알림" />}>
+            <NotificationPage />
+          </Suspense>
+        ),
       },
       {
         path: 'auth/kakao/callback',