レイアウト調整

src/app/(menu)/home/page.tsx

@@ -1,19 +1,14 @@
 'use client';
 
-import Post from '@/components/timeline/Post';
+import PrimaryColumn from '@/components/PrimaryColumn';
+import Timeline from '@/components/timeline/Timeline';
 
 export default function page() {
   return (
-    <main style={{ height: '2000px' }}>
-      <Post
-        displayName={'ククルス'}
-        userName={'cuculus'}
-        profileImageUrl={'/'}
-        text={'あああああああああああああああああああ'}
-        postId={1}
-        postedAt={new Date()}
-        replyCount={0}
-      />
+    <main>
+      <PrimaryColumn columnName={'ホーム'}>
+        <Timeline />
+      </PrimaryColumn>
     </main>
   );
 }

src/app/(menu)/layout.tsx

@@ -2,32 +2,40 @@
 
 import { styled } from '@mui/material';
 import SideMenu from '@/components/menu/SideMenu';
+import { ReactNode } from 'react';
 
 const Layout = styled('div')`
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: minmax(275px, 6fr) minmax(600px, 600px) minmax(
+      275px,
+      7fr
+    );
+  margin: 0 auto;
   min-height: 100vh;
+  background-color: ${({ theme }) => theme.palette.background.paper};
 
   ${({ theme }) => theme.breakpoints.down('desktop')} {
-    // モバイル
-    grid-template-columns: 1fr 9fr;
+    grid-template-columns: minmax(75px, 75px) minmax(600px, 600px) minmax(
+        275px,
+        auto
+      );
+  }
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    grid-template-columns: minmax(75px, 1fr) 5fr;
   }
 
   ${({ theme }) => theme.breakpoints.down('tablet')} {
-    // モバイル
     grid-template-columns: 1fr;
   }
 `;
 
-export default function MenuLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function MenuLayout({ children }: { children: ReactNode }) {
   return (
     <Layout>
       <SideMenu />
       {children}
+      <div></div>
     </Layout>
   );
 }

src/components/PrimaryColumn.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { styled } from '@mui/material';
+import { ReactNode } from 'react';
+
+const Main = styled('div')`
+  border-left: 1px solid ${({ theme }) => theme.palette.grey[100]};
+  border-right: 1px solid ${({ theme }) => theme.palette.grey[100]};
+  max-width: 640px;
+  min-height: 100vh;
+`;
+
+const Header = styled('header')`
+  top: 0;
+  position: sticky;
+  border-style: solid;
+  border-color: ${({ theme }) => theme.palette.grey[100]};
+  border-width: 0;
+  border-bottom-width: 1px;
+  background-color: rgba(255, 255, 255, 0.6);
+  color: ${({ theme }) => theme.palette.grey[800]};
+  z-index: ${({ theme }) => theme.zIndex.appBar};
+`;
+
+type Props = {
+  columnName: string;
+  tabs?: string[];
+  children?: ReactNode;
+};
+
+export default function PrimaryColumn({ columnName, children }: Props) {
+  return (
+    <Main>
+      <Header>{columnName}</Header>
+      {children}
+    </Main>
+  );
+}

src/components/timeline/Post.tsx

@@ -17,8 +17,8 @@ import MomentAgo from '@/components/timeline/atoms/MomentAgo';
 import { format } from 'date-fns';
 
 const Article = styled('article')`
-  border-bottom: 1px solid rgb(239, 243, 244);
-  max-width: 600px;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[100]};
+  max-width: 640px;
   background-color: ${({ theme }) => theme.palette.background.paper};
   color: rgba(0, 0, 0, 0.87);
 `;

src/components/timeline/Timeline.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import Post from '@/components/timeline/Post';
+
+/**
+ * FIXME THIS IS MOCK
+ * @constructor
+ */
+export default function Timeline() {
+  const posts: ReactNode[] = [];
+  for (let i = 0; i < 100; i++) {
+    posts.push(
+      <Post
+        displayName={'ククルス'}
+        userName={'cuculus'}
+        profileImageUrl={'/'}
+        text={'あああああああああああああああああああ'}
+        postId={1}
+        postedAt={new Date()}
+        replyCount={0}
+      />,
+    );
+  }
+  return <div>{posts}</div>;
+}