Merge pull request #41 from SystemEngineeringTeam/issue/10

Issue/10

.eslintrc.json

@@ -58,12 +58,9 @@
       }
     ],
     "react/function-component-definition": [
-      2,
-      {
-        "namedComponents": "arrow-function"
-      }
+      2
     ],
     "unused-imports/no-unused-imports": "error",
-    "react-refresh/only-export-components": "warn",
+    "react-refresh/only-export-components": "warn"
   }
 }

src/assets/unlockedAchievements.json

@@ -1,19 +1,31 @@
 {
   "unlockedAchievements": [
     {
+<<<<<<< issue/10
+      "achievementID": "1",
+      "userEmail": "xxxxxx",
+      "unlockedAt": "2017-01-01T00:00:00Z"
+=======
       "achievementID": 1,
       "memberEmail": "xxxxxx",
       "createdAt": "2017-01-01T00:00:00Z"
+>>>>>>> main
     },
     {
       "achievementID": 2,
       "memberEmail": "yyyyyy",
       "createdAt": "2017-01-01T00:00:00Z"
     },
     {
+<<<<<<< issue/10
+      "achievementID": "3",
+      "userEmail": "xxxxxx",
+      "unlockedAt": "2017-01-01T00:00:00Z"
+=======
       "achievementID": 3,
       "memberEmail": "xxxx",
       "createdAt": "2017-01-01T00:00:00Z"
+>>>>>>> main
     },
     {
       "achievementID": 4,

src/components/member/Card.tsx

@@ -1,41 +1,30 @@
-import { Member } from "@/types/member";
-import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
+import { Avatar, Flex, Table, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import { type Member } from "@/types/member";
 
-export function MemberCard({ member }: { member: Member }): ReactElement {
-  //仮の情報を表示
-  //icon,name,screen_name,post_count,role
+export function MemberCard({ member,point }: { member: Member,point:number }): ReactElement {
   return (
-    <>
-      <Flex gap="4" align="center" height="80px">
+      <Table.Row>
+        <Table.RowHeaderCell>
+        <Flex gap="2">
           <Avatar
-            size="5"
-            src = {member.icon}
+            fallback="A"
             radius="full"
-            fallback="T"
+            size="6"
+            src={member.icon}
           />
-          <Box width="300px" >
-            <Text as="div" size="7" weight="bold">
-              {member.name}
-            </Text>
-          </Box>
-          <Box width="60px">
-            <Text as="div" size="5" color="gray" align="center">
-              {member.screen_name}
-            </Text>
-          </Box>
-          <Box width="60px">
-            <Text as="div" size="5" color="gray" align="center">
-              {member.posts_count}
-            </Text>
-          </Box>
-          <Box width="60px">
-            <Text as="div" size="5" color="gray" align="center">
-              {member.role}
-            </Text>
-          </Box>
-      </Flex>
-      <Separator my="1" size="4" />
-    </>
+        </Flex>
+        </Table.RowHeaderCell>
+        <Table.Cell>
+          <Text as="div" size="8" weight="bold">
+          {member.name}
+          </Text>
+        </Table.Cell>
+        <Table.Cell>
+          <Text as="div" size="6">
+            {point}        
+          </Text>
+        </Table.Cell>
+      </Table.Row>
   );
 }

src/pages/members/index.tsx

@@ -1,15 +1,36 @@
+import { Table } from "@radix-ui/themes";
 import { type ReactElement } from "react";
-import { MemberCard } from "@/components/member/Card";
 import SampleMember from "@/assets/members.json";
-import { Member } from "@/types/member";
+import SampleUnlockedAchievements from '@/assets/unlockedAchievements.json'
+import { MemberCard } from "@/components/member/Card";
+import { type Member } from "@/types/member";
 
 export default function Page(): ReactElement {
+  let point:number = 0;
   return (
-    <>
-      {SampleMember.members.map((e: any) => {
-        const member = e as Member;
-        <MemberCard member={member}></MemberCard>;
-      })}
-    </>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell> </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>名前</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>ポイント</Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+
+
+        {SampleMember.members.map((e: any) => {
+          const member: Member = e as Member;
+
+          SampleUnlockedAchievements.unlockedAchievements.forEach((unlockedAchievement)=>{
+            if(unlockedAchievement.userEmail === member.email){
+              point += 1;
+            }
+          })
+          return <MemberCard key="index" member={member} point={point} />
+        })}
+        </Table.Body>
+      </Table.Root>
   );
 }