Add index layout

__tests__/layouts/MainLayout.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import MainLayout from 'layouts/MainLayout';
+
+describe('Home', () => {
+  it('render grid layout', () => {
+    const { container } = render(<MainLayout />);
+
+    const styles = getComputedStyle(container.firstChild as HTMLElement);
+
+    expect(styles.display).toBe('grid');
+  });
+  it('render on mbile', () => {
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      return {
+        matches:
+          query === '(min-width: 240px) and (max-width: 767px)' ? false : true,
+        media: '',
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      };
+    });
+
+    const { container } = render(<MainLayout />);
+    const element = document.querySelector('.container');
+    const styles = getComputedStyle(element!);
+    expect(element).toBeInTheDocument();
+    expect(styles.display).toBe('grid');
+  });
+});

layouts/MainLayout.tsx

@@ -1,7 +1,19 @@
 import { FC } from 'react';
+import cn from 'classnames';
 
-const MainLayout: FC = () => {
-  return <></>;
+const MainLayout: FC = ({ children }) => {
+  return (
+    <>
+      <div
+        className={cn(
+          'grid grid-cols-12 container mx-auto p-2',
+          'md:grid-cols-8'
+        )}
+      >
+        {children}
+      </div>
+    </>
+  );
 };
 
 export default MainLayout;

pages/index.tsx

@@ -1,8 +1,13 @@
-import type { NextPage } from 'next';
 import cn from 'classnames';
+import MainLayout from 'layouts/MainLayout';
+import { ReactElement } from 'react';
 
-const Home: NextPage = () => {
+const Home = () => {
   return <div className={cn('text-red-600')}>Hello</div>;
 };
 
+Home.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
 export default Home;