생성하기 페이지 구현 (#71)

* refactor: 하단 navbar, 헤더 리팩터링

* 헤더,navbar max-width 삭제
* 헤더 title 위치 중간으로 수정
* 헤더 우측 아이콘 styledComponent 통일

* feat: 생성하기 페이지 구현

* router에 create 부분 교체

* feat: 헤더 수정

* 글로벌스타일 변경
* 헤더 로고 변경
* 헤더 타이틀 일립시스

* feat: navbar 수정

* feat: 레이아웃수정

* fix: layout 적용

Author: 1eecan

src/pages/CreatePage/CreatePage.style.ts

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+export const CreatePageContainer = styled.div`
+  width: 100%;
+  height: 100dvh;
+  background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  ${({ theme }) => theme.STYLES.LAYOUT}
+  padding-top: 3.1rem;
+`;
+
+export const CreatePageCard = styled.div`
+  width: 100%;
+  background-color: white;
+  padding: 1.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;

src/pages/CreatePage/CreatePage.tsx

@@ -0,0 +1,46 @@
+import { useNavigate } from 'react-router-dom';
+
+import { PATH_NAME } from '@/consts/pathName';
+
+import { Header } from '@components/shared/Header';
+import { Text } from '@components/shared/Text';
+
+import { CreatePageCard, CreatePageContainer } from './CreatePage.style';
+
+export const CreatePage = () => {
+  const navigate = useNavigate();
+
+  const moveToCreateGame = () => {
+    navigate(PATH_NAME.CREATE_GAME);
+  };
+
+  const moveToCreateCREW = () => {
+    navigate(PATH_NAME.CREATE_CREW);
+  };
+
+  return (
+    <>
+      <Header title="글 작성" />
+      <CreatePageContainer>
+        <CreatePageCard onClick={() => moveToCreateGame()}>
+          <Text size={'1.5rem'} weight={700}>
+            게스트 모집하기
+          </Text>
+          <Text size={'1rem'} weight={300}>
+            설명입니다. 설명입니다. 설명입니다. 설명입니다. 설명입니다.
+            설명입니다. 설명입니다. 설명입니다. 설명입니다.
+          </Text>
+        </CreatePageCard>
+        <CreatePageCard onClick={() => moveToCreateCREW()}>
+          <Text size={'1.5rem'} weight={700}>
+            크루 만들기
+          </Text>
+          <Text size={'1rem'} weight={300}>
+            설명입니다. 설명입니다. 설명입니다. 설명입니다. 설명입니다.
+            설명입니다. 설명입니다. 설명입니다. 설명입니다.
+          </Text>
+        </CreatePageCard>
+      </CreatePageContainer>
+    </>
+  );
+};

src/pages/CreatePage/index.ts

@@ -0,0 +1 @@
+export { CreatePage } from './CreatePage';

src/routes/router.tsx

@@ -1,13 +1,12 @@
 import { Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
-import { Layout } from '@pages/Layout';
-import { MainPage } from '@pages/MainPage';
 import { CreateGamePage } from '@pages/CreateGamePage';
 import { GamesDetailPage } from '@pages/GamesDetailPage';
 import { GamesNearPage } from '@pages/GamesNearPage';
 import { Layout } from '@pages/Layout';
 import { LoginPage } from '@pages/LoginPage';
+import { MainPage } from '@pages/MainPage';
 import { RegisterPage } from '@pages/RegisterPage';
 
 export const router = createBrowserRouter([
@@ -70,7 +69,7 @@ export const router = createBrowserRouter([
       },
       {
         path: 'create',
-        element: <h3>create</h3>,
+        element: <CreatePage />,
       },
       {
         path: 'create/game',