diff --git a/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts
new file mode 100644
index 00000000..a16c0e7d
--- /dev/null
+++ b/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;
+`;
diff --git a/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx
new file mode 100644
index 00000000..6b92f249
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/__components__/ItemListPageSkeleton/index.ts b/src/pages/__components__/ItemListPageSkeleton/index.ts
new file mode 100644
index 00000000..6bed982d
--- /dev/null
+++ b/src/pages/__components__/ItemListPageSkeleton/index.ts
@@ -0,0 +1 @@
+export * from './ItemListPageSkeleton';
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 97497bac..4eb8ae4d 100644
--- a/src/routes/router.tsx
+++ b/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: ,
+ element: (
+ }>
+
+
+ ),
},
{
path: 'crews/:id',
@@ -198,7 +203,11 @@ export const router = createBrowserRouter([
},
{
path: 'notification',
- element: ,
+ element: (
+ }>
+
+
+ ),
},
{
path: 'auth/kakao/callback',