feat(web): 部分页面布局更新 使用 wrapper

packages/web/src/pages/bootstrap.tsx

@@ -31,7 +31,7 @@ const Bootstrap = () => {
   }, [session])
 
   return (
-    <Center h="full">
+    <Center h="100vh">
       <Box
         p="3"
         shadow="md"

packages/web/src/pages/create-project.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Center, FormControl, FormErrorMessage, FormLabel, Input, Select } from '@chakra-ui/react'
 import type { Project } from '@prisma/client'
 import { useRouter } from 'next/router'
-import type { FC } from 'react'
+import type { ReactElement } from 'react'
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
 import { useSWRConfig } from 'swr'
@@ -15,7 +15,7 @@ const projectTypes = [
   },
 ]
 
-const CreateProject: FC = () => {
+const CreateProject = () => {
   const router = useRouter()
   const { mutate } = useSWRConfig()
   const { handleSubmit, register, formState: { errors } } = useForm<OmitProject>()
@@ -36,7 +36,7 @@ const CreateProject: FC = () => {
   }, [])
 
   return (
-    <Center h="full">
+    <Center h="100vh">
       <Box
         p="3"
         shadow="md"
@@ -94,4 +94,8 @@ const CreateProject: FC = () => {
   )
 }
 
+CreateProject.getLayout = function getLayout(page: ReactElement) {
+  return page
+}
+
 export default CreateProject

packages/web/src/pages/index.tsx

@@ -2,6 +2,7 @@ import type { Setting } from '@prisma/client'
 import type { GetServerSideProps, NextPage } from 'next'
 import Link from 'next/link'
 import Login from '~/components/loginButton'
+import Wrapper from '~/components/wrapper'
 import { serviceGetSetting } from '~/services/bootstrap'
 import { serviceGetProjects } from '~/services/projects'
 
@@ -33,11 +34,11 @@ export const getServerSideProps: GetServerSideProps<Props> = async() => {
 
 const Home: NextPage<Props> = () => {
   return (
-    <main>
-      <div><Link href="/issues"><a>go to issues</a></Link></div>
+    <Wrapper>
+      <Link href="/issues"><a>go to issues</a></Link>
 
       <Login />
-    </main>
+    </Wrapper>
   )
 }
 

packages/web/src/pages/issues/[id]/events.tsx

@@ -1,9 +1,9 @@
-import { Box } from '@chakra-ui/react'
 import type { GetServerSideProps, NextPage } from 'next'
 import type { Issue } from 'types'
 import IssueDetailEventsList from '~/components/issueDetailEventsList'
 import IssueDetailTabs from '~/components/issueDetailTabs'
 import IssueDetailTitle from '~/components/issueDetailTitle'
+import Wrapper from '~/components/wrapper'
 import { serviceGetIssue } from '~/services/issues'
 
 interface Props {
@@ -18,13 +18,13 @@ export const getServerSideProps: GetServerSideProps<Props> = async(context) => {
 
 const Detail: NextPage<Props> = ({ issue }) => {
   return (
-    <Box>
+    <Wrapper>
       <IssueDetailTitle issue={issue} />
 
       <IssueDetailTabs />
 
       <IssueDetailEventsList events={issue.events} />
-    </Box>
+    </Wrapper>
   )
 }
 

packages/web/src/pages/issues/[id]/index.tsx

@@ -6,6 +6,7 @@ import IssueDetailStack from '~/components/issueDetailStack'
 import IssueDetailTabs from '~/components/issueDetailTabs'
 import IssueDetailTitle from '~/components/issueDetailTitle'
 import IssueDetailTrend from '~/components/issueDetailTrend'
+import Wrapper from '~/components/wrapper'
 import { serviceGetEvent } from '~/services/events'
 import type { IssueTrend } from '~/services/issues'
 import { serviceGetIssue, serviceGetIssuesTrends } from '~/services/issues'
@@ -40,7 +41,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async(context) => {
 
 const Detail: NextPage<Props> = ({ issue, event, trends }) => {
   return (
-    <div>
+    <Wrapper>
       <IssueDetailTitle issue={issue} />
 
       <IssueDetailTabs />
@@ -55,7 +56,7 @@ const Detail: NextPage<Props> = ({ issue, event, trends }) => {
         issue={issue}
         trends={trends}
       />
-    </div>
+    </Wrapper>
   )
 }
 

packages/web/src/pages/issues/index.tsx

@@ -1,6 +1,7 @@
 import type { GetServerSideProps, NextPage } from 'next'
 import type { Issue } from 'types'
 import IssueList from '~/components/issueList'
+import Wrapper from '~/components/wrapper'
 import { serviceGetIssues } from '~/services/issues'
 
 interface Props {
@@ -17,9 +18,11 @@ export const getServerSideProps: GetServerSideProps<Props> = async() => {
 
 const Issues: NextPage<Props> = ({ issues }) => {
   return (
-    <IssueList
-      issues={issues}
-    />
+    <Wrapper>
+      <IssueList
+        issues={issues}
+      />
+    </Wrapper>
   )
 }
 

packages/web/src/pages/projects/index.tsx

@@ -2,6 +2,7 @@ import { SimpleGrid } from '@chakra-ui/react'
 import type { GetServerSideProps, NextPage } from 'next'
 import type { ProjectWithEventCount } from 'types'
 import ProjectCard from '~/components/projectCard'
+import Wrapper from '~/components/wrapper'
 import { serviceGetProjectsWithEventCount } from '~/services/projects'
 
 interface Props {
@@ -15,19 +16,21 @@ export const getServerSideProps: GetServerSideProps<Props> = async() => {
 
 const Projects: NextPage<Props> = ({ projects }) => {
   return (
-    <SimpleGrid
-      columns={3}
-      spacing="8"
-    >
-      {
-        projects.map(project => (
-          <ProjectCard
-            key={project.id}
-            project={project}
-          />
-        ))
-      }
-    </SimpleGrid>
+    <Wrapper>
+      <SimpleGrid
+        columns={3}
+        spacing="8"
+      >
+        {
+          projects.map(project => (
+            <ProjectCard
+              key={project.id}
+              project={project}
+            />
+          ))
+        }
+      </SimpleGrid>
+    </Wrapper>
   )
 }