/achievements/[id]の引数受け渡し

src/components/achievements/Info.tsx

@@ -58,11 +58,7 @@ export function Info({
   return (
     <InfoBox direction="column">
       <Flex align="center" direction="column">
-        <Avatar
-          fallback="T"
-          size="9"
-          src={icon}
-        />
+        <Avatar fallback="T" size="9" src={icon} />
 
         <Text mt="1rem" size="8" weight="bold">
           {name}

src/components/member/Card.tsx

@@ -45,7 +45,7 @@ export function MemberCard({
   point,
 }: {
   member: Member;
-  point: number;
+  point?: number;
 }): ReactElement {
   const navigate = useNavigate();
 
@@ -74,10 +74,11 @@ export function MemberCard({
       />
 
       <NameStyle as="div">{member.name}</NameStyle>
-
-      <PointStyle as="div" size="6">
-        {point}pt
-      </PointStyle>
+      {point == null ? null : (
+        <PointStyle as="div" size="6">
+          {point}pt
+        </PointStyle>
+      )}
     </CardStyle>
   );
 }

src/pages/achievements/[id]/index.tsx

@@ -1,16 +1,24 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import { useParams } from "react-router-dom";
+import styled from "styled-components";
 import useSWRImmutable from "swr/immutable";
 import { match } from "ts-pattern";
 import { ErrorScreen } from "@/components/ErrorScreen";
 import { Info } from "@/components/achievements/Info";
+import { MemberCard } from "@/components/member/Card";
 import { useAchievements } from "@/hooks/db/achievements";
 import { useUnlockedAchievements } from "@/hooks/db/unlocked-achievements";
 import { useTeam } from "@/hooks/teams";
 import { S } from "@/lib/consts";
 import { fetchMembersAndUnlockedAchievementsAndAchievements } from "@/lib/utils/fetchers";
 import { handleSWRError } from "@/lib/utils/swr";
-import { RecentUnlockedCard } from "@/components/achievements/RecentUnlockedCard";
+
+const BoxStyle = styled(Box)`
+  margin: 0 auto;
+  height: 80vh;
+  overflow: scroll;
+`;
 
 export default function Page(): ReactElement {
   const { id } = useParams();
@@ -38,14 +46,35 @@ export default function Page(): ReactElement {
               const rateOfUnlocked = unlockedAchievements.filter(
                 (ua) => ua.achievementID === a.id,
               ).length;
+
+              const thisAchievementUnlockedMembers = members.filter((m) =>
+                unlockedAchievements.some(
+                  (ua) =>
+                    ua.achievementID === a.id && ua.memberEmail === m.email,
+                ),
+              );
               return (
-                <Info
-                  key={a.id}
-                  icon={a.icon}
-                  name={a.name}
-                  rateOfUnlocked={rateOfUnlocked}
-                  tags={a.tags}
-                />
+                <Flex key={a.id} gap="9">
+                  <Info
+                    key={a.id}
+                    icon={a.icon}
+                    name={a.name}
+                    rateOfUnlocked={rateOfUnlocked}
+                    tags={a.tags}
+                  />
+                  <div>
+                    <Box mt="20vh" />
+                    <BoxStyle>
+                      <Text size="8" weight="bold">
+                        最近解除したメンバー
+                      </Text>
+                      <Box mt="1rem" />
+                      {thisAchievementUnlockedMembers.map((m) => (
+                        <MemberCard key={m.email} member={m} />
+                      ))}
+                    </BoxStyle>
+                  </div>
+                </Flex>
               );
             }
             return null;