init

src/pages/index.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react'
+
+export const MainPage = lazy(() => import(/* webpackChunkName: 'main' */'./main'))

src/pages/main/index.ts

@@ -0,0 +1,3 @@
+import { MainPage } from './main'
+
+export default MainPage

src/pages/main/main.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Grid, GridItem } from '@chakra-ui/react'
+
+export const MainPage = () => {
+  return (
+    <Grid
+      h="100%"
+      bgColor="gray.300"
+      templateAreas={{
+        md: `"header header"
+        "aside main"
+        "footer footer"`,
+        sm: `"header"
+        "main"
+        "aside"
+        "footer"`,
+      }}
+      gridTemplateRows={{ sm: '1fr', md: '50px 1fr 30px' }}
+      gridTemplateColumns={{ sm: '1fr', md: '150px 1fr' }}
+      gap={4}
+    >
+      <GridItem bgColor="green.100" gridArea="header">header</GridItem>
+      <GridItem bgColor="green.300" gridArea="aside">aside</GridItem>
+      <GridItem bgColor="green.600" gridArea="main" h="100vh">main</GridItem>
+      <GridItem bgColor="green.300" gridArea="footer">footer</GridItem>
+    </Grid>
+  )
+}