Issues/18

src/components/member/Card.tsx

@@ -42,7 +42,7 @@ export function MemberCard({
       </Table.Cell>
       <Table.Cell>
         <Text as="div" size="6">
-          {point}
+          {point}pt
         </Text>
       </Table.Cell>
     </TableRow>

src/components/member/RankingCard.tsx

@@ -1,21 +1,21 @@
 import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import styled from "styled-components";
-import SampleMembers from "@/assets/members.json";
-import { type Member } from "@/types/member";
+import { Link } from "@/router";
 
 export function RankingCard({
   memberEmail,
+  memberName,
+  memberIcon,
   index,
   point,
 }: {
   memberEmail: string;
+  memberName: string;
+  memberIcon: string;
   index: number;
   point: number;
 }): ReactElement {
-  const matchMember: Member = SampleMembers.members.find(
-    (member) => member.email === memberEmail,
-  );
 
   const BoxStyle = styled(Box)`
     border-bottom: 1px solid;
@@ -25,26 +25,23 @@ export function RankingCard({
   `;
 
   return (
-    <BoxStyle>
-      <Flex align="center" gap="6" ml="10rem" mr="10rem">
-        <Text mr="3rem" size="8" weight="bold">
-          {index + 1}
-        </Text>
-        <Avatar
-          fallback="T"
-          radius="full"
-          size="8"
-          src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
-        />
-        <Flex align="center" direction="column">
-          <Text as="div" size="7" weight="bold">
-            {matchMember.name}
-          </Text>
-          <Text as="div" color="gray" size="7">
-            {point}pt
+    <Link params={{ id: memberEmail }} to="/members/:id">
+      <BoxStyle>
+        <Flex align="center" gap="6" ml="10rem" mr="10rem">
+          <Text mr="3rem" size="8" weight="bold">
+            {index + 1}
           </Text>
+          <Avatar fallback="T" radius="full" size="8" src={memberIcon} />
+          <Flex align="center" direction="column">
+            <Text as="div" size="7" weight="bold">
+              {memberName}
+            </Text>
+            <Text as="div" color="gray" size="7">
+              {point}pt
+            </Text>
+          </Flex>
         </Flex>
-      </Flex>
-    </BoxStyle>
+      </BoxStyle>
+    </Link>
   );
 }

src/pages/members/index.tsx

@@ -29,7 +29,7 @@ export default function Page(): ReactElement {
 
         {SampleMember.members.map((e: any) => {
           const member: Member = e as Member;
-
+          point = 0;
           SampleUnlockedAchievements.unlockedAchievements.forEach((unlockedAchievement)=>{
             if(unlockedAchievement.memberEmail === member.email){
               point += 1;

src/pages/ranking/index.tsx

@@ -1,10 +1,18 @@
 import { Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import styled from "styled-components";
-import SampleUnlockedAchievements from "@/assets/unlockedAchievements.json";
+import members from "@/assets/members.json";
+import UnlockedAchievements from "@/assets/unlockedAchievements.json";
 import { RankingCard } from "@/components/member/RankingCard";
 import { LogRecentUnlocked } from "@/components/ranking/LogRecentUnlocked";
 import { esaClient } from "@/lib/services/esa";
+import { type Member } from "@/types/member";
+
+type MembersWithUnlockedCount = Array<
+  Member & {
+    unlockedCount: number;
+  }
+>;
 
 export default function Page(): ReactElement {
   const RankingCardStyle = styled.div`
@@ -64,28 +72,44 @@ export default function Page(): ReactElement {
       },
     },
   });
+
+  const memberList: MembersWithUnlockedCount = members.members.map((m) => {
+    const unlockedArchievements =
+      UnlockedAchievements.unlockedAchievements.filter(
+        (u) => u.memberEmail === m.email,
+      );
+    return {
+      ...m,
+      unlockedCount: unlockedArchievements.length,
+    };
+  });
+
+  memberList.sort((a, b) => b.unlockedCount - a.unlockedCount);
+
   return (
     <div>
       <TitleStyle size="7" weight="bold">
         実績解除ランキング
       </TitleStyle>
       <RankingCardStyle>
-        {members.map((member, index) => (
+        {memberList.map((member, index) => (
           <RankingCard
-            key={member.memberEmail}
+            key={member.email}
             index={index}
-            memberEmail={member.memberEmail}
-            point={member.point}
+            memberEmail={member.email}
+            memberIcon={member.icon}
+            memberName={member.name}
+            point={member.unlockedCount}
           />
         ))}
       </RankingCardStyle>
 
       <SideBar>
         <LogTitleStyle size="7" weight="bold">
-          テスト　　　　　　　　
+          テスト
         </LogTitleStyle>
         <LogRecentUnlockedStyle>
-          {SampleUnlockedAchievements.unlockedAchievements.map(
+          {UnlockedAchievements.unlockedAchievements.map(
             (unlockedAchievements) => (
               <LogRecentUnlocked
                 key={unlockedAchievements.achievementID}