Post周りのコンポーネント作成

src/components/common/atoms/FavoriteButton.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { IconButton, styled } from '@mui/material';
+import { Star } from '@mui/icons-material';
+
+const Icon = styled(Star)<{ active: boolean }>`
+  color: ${({ theme, active }) =>
+    active ? theme.palette.favorite.main : theme.palette.action.active};
+`;
+
+type Props = {
+  active?: boolean;
+  count: number;
+};
+
+export default function FavoriteButton({ active = false, count }: Props) {
+  return (
+    <div aria-label={`${count}件のお気に入り。お気に入りに追加する`}>
+      <IconButton
+        color="favorite"
+        aria-label="お気に入りに追加"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <Icon active={active} />
+      </IconButton>
+    </div>
+  );
+}

src/components/common/atoms/RePostButton.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { IconButton, styled } from '@mui/material';
+import { Sync } from '@mui/icons-material';
+
+const Icon = styled(Sync)<{ active: boolean }>`
+  color: ${({ theme, active }) =>
+    active ? theme.palette.repost.main : theme.palette.action.active};
+`;
+
+type Props = {
+  active?: boolean;
+  count: number;
+};
+
+export default function RePostButton({ active = false, count }: Props) {
+  return (
+    <div aria-label={`${count}件のリポスト。リポストする`}>
+      <IconButton
+        color="repost"
+        aria-label="リポスト"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <Icon active={active} />
+      </IconButton>
+    </div>
+  );
+}

src/components/common/atoms/ReplyButton.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { IconButton } from '@mui/material';
+import { ChatBubbleOutline } from '@mui/icons-material';
+
+type Props = {
+  count: number;
+};
+export default function ReplyButton({ count }: Props) {
+  return (
+    <div aria-label={`${count}件の返信。返信する`}>
+      <IconButton
+        color="more"
+        aria-label="リプライ"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <ChatBubbleOutline />
+      </IconButton>
+    </div>
+  );
+}

src/components/common/atoms/ShareButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { IconButton } from '@mui/material';
+import { IosShare } from '@mui/icons-material';
+
+export default function ShareButton() {
+  return (
+    <div aria-label={`共有する`}>
+      <IconButton
+        color="more"
+        aria-label="共有"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <IosShare />
+      </IconButton>
+    </div>
+  );
+}

src/components/theme/theme.ts

@@ -9,6 +9,17 @@ const theme = createTheme({
       desktop: 1200,
     },
   },
+  palette: {
+    favorite: {
+      main: '#ffac33',
+    },
+    repost: {
+      main: '#5c913b',
+    },
+    more: {
+      main: '#30F',
+    },
+  },
 });
 
 export default theme;

src/components/timeline/Post.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import {
-  Avatar,
-  CardActionArea,
-  IconButton,
-  styled,
-  Typography,
-} from '@mui/material';
+import { Avatar, CardActionArea, styled, Typography } from '@mui/material';
 import Link from 'next/link';
-import { Star, Sync, ChatBubbleOutline, IosShare } from '@mui/icons-material';
 import { useRouter } from 'next/router';
+import FavoriteButton from '@/components/common/atoms/FavoriteButton';
+import RePostButton from '@/components/common/atoms/RePostButton';
+import ReplyButton from '@/components/common/atoms/ReplyButton';
+import ShareButton from '@/components/common/atoms/ShareButton';
 
 const Article = styled('article')`
   border-bottom: 1px solid rgb(239, 243, 244);
@@ -96,30 +93,10 @@ export default function Post({ displayName, userName, text, postId }: Props) {
                 {text}
               </Typography>
               <Footer>
-                <IconButton
-                  aria-label="リプライ"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <ChatBubbleOutline />
-                </IconButton>
-                <IconButton
-                  aria-label="リポスト"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <Sync />
-                </IconButton>
-                <IconButton
-                  aria-label="お気に入りに追加"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <Star />
-                </IconButton>
-                <IconButton
-                  aria-label="共有"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <IosShare />
-                </IconButton>
+                <ReplyButton count={0} />
+                <RePostButton count={0} active />
+                <FavoriteButton count={0} active />
+                <ShareButton />
               </Footer>
             </Content>
           </Original>

src/types/mui.d.ts

@@ -14,6 +14,14 @@ declare module '@mui/system/createTheme/createBreakpoints' {
   }
 }
 
+declare module '@mui/material/IconButton' {
+  interface IconButtonPropsColorOverrides {
+    favorite: true;
+    repost: true;
+    more: true;
+  }
+}
+
 declare module '@mui/material/styles' {
   interface BreakpointOverrides {
     xs: false;
@@ -26,4 +34,28 @@ declare module '@mui/material/styles' {
     laptop: true;
     desktop: true;
   }
+
+  interface Palette {
+    favorite: {
+      main: string;
+    };
+    repost: {
+      main: string;
+    };
+    more: {
+      main: string;
+    };
+  }
+
+  interface PaletteOptions {
+    favorite: {
+      main: string;
+    };
+    repost: {
+      main: string;
+    };
+    more: {
+      main: string;
+    };
+  }
 }