크루생성, 게스트 모집 글 작성 페이지 스켈레톤 구현 (#385)

* feat: CreateCrewPageSkeleton 구현

* feat: CreateGamePageSkeleton 구현

* feat: 크루 생성, 게스트 모집글 작성 페이지 Suspense 적용

src/pages/CreateCrewPage/CreateCrewPageSkeleton/CreateCrewPageSkeleton.styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+
+export const PageWrapper = styled.div`
+  ${({ theme }) => theme.STYLES.LAYOUT}
+  min-height: 100dvh;
+  background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
+`;
+
+export const PageContent = styled(Flex)`
+  margin: 10px 0;
+`;

src/pages/CreateCrewPage/CreateCrewPageSkeleton/CreateCrewPageSkeleton.tsx

@@ -0,0 +1,55 @@
+import { Header } from '@components/Header';
+import { Skeleton } from '@components/Skeleton';
+
+import { theme } from '@styles/theme';
+
+import { PageContent, PageWrapper } from './CreateCrewPageSkeleton.styles';
+
+export const CreateCrewPageSkeleton = () => {
+  return (
+    <PageWrapper>
+      <Header />
+      <PageContent gap={10} direction="column">
+        <Skeleton
+          width="100%"
+          height="30px"
+          radius="5px"
+          defaultColor="white"
+          gradientColor={theme.PALETTE.GRAY_100}
+        >
+          <Skeleton.Item
+            width="200px"
+            height="40px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+
+          <Skeleton.Item
+            width="200px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+          <Skeleton.Item />
+          <Skeleton.Item
+            width="200px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+          <Skeleton.Item />
+          <Skeleton.Item
+            width="200px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+          <Skeleton.Item width="100px" />
+          <Skeleton.Item
+            width="200px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+          <Skeleton.Item height="300px" />
+        </Skeleton>
+      </PageContent>
+    </PageWrapper>
+  );
+};

src/pages/CreateCrewPage/CreateCrewPageSkeleton/index.ts

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

src/pages/CreateCrewPage/index.ts

@@ -1 +1,2 @@
 export * from './CreateCrewPage';
+export * from './CreateCrewPageSkeleton';

src/pages/CreateGamePage/CreateGamePageSkeleton/CreateGamePageSkeleton.styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+
+export const PageWrapper = styled.div`
+  ${({ theme }) => theme.STYLES.LAYOUT}
+  min-height: 100dvh;
+  background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
+`;
+
+export const PageContent = styled(Flex)`
+  margin: 10px 0;
+`;

src/pages/CreateGamePage/CreateGamePageSkeleton/CreateGamePageSkeleton.tsx

@@ -0,0 +1,42 @@
+import { Header } from '@components/Header';
+import { Skeleton } from '@components/Skeleton';
+
+import { theme } from '@styles/theme';
+
+import { PageContent, PageWrapper } from './CreateGamePageSkeleton.styles';
+
+export const CreateGamePageSkeleton = () => {
+  return (
+    <PageWrapper>
+      <Header />
+      <PageContent gap={10} direction="column">
+        <Skeleton
+          width="100%"
+          height="30px"
+          radius="5px"
+          defaultColor="white"
+          gradientColor={theme.PALETTE.GRAY_100}
+        >
+          <Skeleton.Item
+            width="200px"
+            height="40px"
+            defaultColor={theme.PALETTE.GRAY_200}
+            gradientColor={theme.PALETTE.GRAY_300}
+          />
+          {Array(10)
+            .fill(null)
+            .map(() => (
+              <>
+                <Skeleton.Item
+                  width="200px"
+                  defaultColor={theme.PALETTE.GRAY_200}
+                  gradientColor={theme.PALETTE.GRAY_300}
+                />
+                <Skeleton.Item />
+              </>
+            ))}
+        </Skeleton>
+      </PageContent>
+    </PageWrapper>
+  );
+};

src/pages/CreateGamePage/CreateGamePageSkeleton/index.ts

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

src/pages/CreateGamePage/index.ts

@@ -1 +1,2 @@
 export * from './CreateGamePage';
+export * from './CreateGamePageSkeleton';

src/routes/router.tsx

@@ -4,6 +4,8 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import { AllServicesPage } from '@pages/AllServicesPage';
 import { AuthErrorPage } from '@pages/AuthErrorPage';
+import { CreateCrewPageSkeleton } from '@pages/CreateCrewPage';
+import { CreateGamePageSkeleton } from '@pages/CreateGamePage';
 import { CreatePage } from '@pages/CreatePage';
 import { CrewsDetailPageLoading } from '@pages/CrewsDetailPage';
 import { ErrorPage } from '@pages/ErrorPage';
@@ -173,15 +175,21 @@ export const router = createBrowserRouter([
         path: 'create',
         element: <CreatePage />,
       },
-      /** TODO 스켈레톤 만들어야 함 */
       {
         path: 'create/game',
-        element: <CreateGamePage />,
+        element: (
+          <Suspense fallback={<CreateGamePageSkeleton />}>
+            <CreateGamePage />
+          </Suspense>
+        ),
       },
-      /** TODO 스켈레톤 만들어야 함 */
       {
         path: 'create/crew',
-        element: <CreateCrewPage />,
+        element: (
+          <Suspense fallback={<CreateCrewPageSkeleton />}>
+            <CreateCrewPage />
+          </Suspense>
+        ),
       },
       {
         path: 'profile/:id',