From 4e48303df742ae608216fb5528a39d9e8009b56b Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 02:14:23 +0900
Subject: [PATCH 1/9] =?UTF-8?q?RankingCard=E3=81=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/member/RankingCard.tsx

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
new file mode 100644
index 0000000..e69de29

From 3b039537a586aa0ff3892ec36c519982ce7f082b Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 02:26:38 +0900
Subject: [PATCH 2/9] =?UTF-8?q?pages=E3=83=95=E3=82=A9=E3=83=AB=E3=83=80?=
 =?UTF-8?q?=E3=82=92export=20default=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/achievements/index.tsx | 2 +-
 src/pages/members/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/achievements/index.tsx b/src/pages/achievements/index.tsx
index 6c46cf4..fd20390 100644
--- a/src/pages/achievements/index.tsx
+++ b/src/pages/achievements/index.tsx
@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import { MemberCard } from "@/components/member/Card";
 
-export function Page(): ReactElement {
+export default function Page(): ReactElement {
   const achievementsTestData = [
     {
       id: 1,
diff --git a/src/pages/members/index.tsx b/src/pages/members/index.tsx
index 9331fa4..5dfa0b6 100644
--- a/src/pages/members/index.tsx
+++ b/src/pages/members/index.tsx
@@ -3,7 +3,7 @@ import { MemberCard } from "@/components/member/Card";
 import SampleMember from "@/assets/members.json";
 import { Member } from "@/types/member";
 
-export function Page(): ReactElement {
+export default function Page(): ReactElement {
   const teto = SampleMember.members.at(-1) as Member;
 
   return <MemberCard member={teto}></MemberCard>;

From 5cc240f19d85fdd967fa4066caefc94089a9d2ef Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 02:33:09 +0900
Subject: [PATCH 3/9] =?UTF-8?q?RankingCard=E3=81=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 13 +++++++++++++
 src/pages/ranking/index.tsx           |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index e69de29..bdb68f8 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -0,0 +1,13 @@
+import { Member } from "@/types/member";
+import { Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+
+export function MemberCard({ member }: { member: Member }): ReactElement {
+  return (
+    <>
+      <Text>Hello This page is memberCard</Text>
+      <Text>{member.name}</Text>
+      <Text>{member.email}</Text>
+    </>
+  );
+}
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
index 59b61d3..c827046 100644
--- a/src/pages/ranking/index.tsx
+++ b/src/pages/ranking/index.tsx
@@ -1,4 +1,4 @@
-import { MemberCard } from "@/components/member/Card";
+import { MemberCard } from "@/components/member/RankingCard";
 import { ReactElement } from "react";
 import SampleMember from "@/assets/members.json";
 import members from "@/assets/members.json";

From 3c0a473947e3ce667c5f9ef776f6ec9727b0813b Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 02:38:23 +0900
Subject: [PATCH 4/9] =?UTF-8?q?RankingCard=E3=81=AE=E6=83=85=E5=A0=B1?=
 =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index bdb68f8..49530d2 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -1,13 +1,28 @@
 import { Member } from "@/types/member";
-import { Text } from "@radix-ui/themes";
+import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 
 export function MemberCard({ member }: { member: Member }): ReactElement {
   return (
     <>
-      <Text>Hello This page is memberCard</Text>
-      <Text>{member.name}</Text>
-      <Text>{member.email}</Text>
+      <Box maxWidth="240px">
+        <Flex gap="3" align="center">
+          <Avatar
+            size="3"
+            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"
+            radius="full"
+            fallback="T"
+          />
+          <Box>
+            <Text as="div" size="2" weight="bold">
+              {member.name}
+            </Text>
+            <Text as="div" size="2" color="gray">
+              Engineering
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
     </>
   );
 }

From 1ebd2cf80659dbe4cfeff5ebeaaf856069c28ca5 Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 02:43:45 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=5Fapp=E3=81=AEbackground=E3=81=AE=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/_app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a79a25a..5c07d51 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,7 +18,6 @@ export function Catch(): ReactElement {
 export default function Layout(): ReactElement {
   const Main = styled.main`
     font-family: "Noto Sans JP Variable";
-    background-color: #aaa;
     word-break: keep-all;
   `;
 

From bbe33f12cef7f2c2d56f89da0f2c265559447b24 Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 11:42:35 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E3=83=9D=E3=82=A4=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E8=A8=88=E7=AE=97=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 9 ++++++++-
 src/pages/ranking/index.tsx           | 1 -
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index 49530d2..d95d019 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -1,8 +1,15 @@
 import { Member } from "@/types/member";
 import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import unlockedAchievements from "@/assets/unlockedAchievements.json";
 
 export function MemberCard({ member }: { member: Member }): ReactElement {
+  const userPoint = unlockedAchievements.unlockedAchievements.filter(
+    (achievements) => {
+      return achievements.userEmail == "xxxxxx";
+    },
+  );
+
   return (
     <>
       <Box maxWidth="240px">
@@ -18,7 +25,7 @@ export function MemberCard({ member }: { member: Member }): ReactElement {
               {member.name}
             </Text>
             <Text as="div" size="2" color="gray">
-              Engineering
+              {userPoint.length}pt
             </Text>
           </Box>
         </Flex>
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
index c827046..c07b8db 100644
--- a/src/pages/ranking/index.tsx
+++ b/src/pages/ranking/index.tsx
@@ -1,7 +1,6 @@
 import { MemberCard } from "@/components/member/RankingCard";
 import { ReactElement } from "react";
 import SampleMember from "@/assets/members.json";
-import members from "@/assets/members.json";
 import { Member } from "@/types/member";
 
 export default function Page(): ReactElement {

From 156fc8a6e20d46e91cabb603f4800409e7ac0949 Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Fri, 14 Jun 2024 12:58:24 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E3=83=A9=E3=83=B3=E3=82=AD=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0=E3=82=AB=E3=83=BC=E3=83=89=E3=81=AE=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=81=AE=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 22 +++++++++++++---------
 vite.config.mts                       |  3 +++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index d95d019..463aa8c 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -1,34 +1,38 @@
 import { Member } from "@/types/member";
-import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
+import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import unlockedAchievements from "@/assets/unlockedAchievements.json";
 
 export function MemberCard({ member }: { member: Member }): ReactElement {
   const userPoint = unlockedAchievements.unlockedAchievements.filter(
     (achievements) => {
-      return achievements.userEmail == "xxxxxx";
+      return achievements.userEmail == "xxxxx";
     },
   );
 
   return (
     <>
-      <Box maxWidth="240px">
-        <Flex gap="3" align="center">
+      <Box maxWidth="50rem">
+        <Flex gap="6" align="center" ml="14rem">
+          <Text size="8" mr="3rem">
+            1
+          </Text>
           <Avatar
-            size="3"
+            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"
             radius="full"
             fallback="T"
           />
-          <Box>
-            <Text as="div" size="2" weight="bold">
+          <Flex direction="column" align="center">
+            <Text as="div" size="7" weight="bold">
               {member.name}
             </Text>
-            <Text as="div" size="2" color="gray">
+            <Text as="div" size="7" color="gray">
               {userPoint.length}pt
             </Text>
-          </Box>
+          </Flex>
         </Flex>
+        <Separator my="3" size="4" />
       </Box>
     </>
   );
diff --git a/vite.config.mts b/vite.config.mts
index ab9eeb1..0dc569a 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -5,4 +5,7 @@ import generouted from "@generouted/react-router/plugin";
 
 export default defineConfig({
   plugins: [react(), paths(), generouted()],
+  server: {
+    port: 8080,
+  },
 });

From 014cd27844653485acd9e0ed61fc977f50c1d2ad Mon Sep 17 00:00:00 2001
From: kinako1415 <Owata09@outlook.jp>
Date: Sat, 15 Jun 2024 14:19:54 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E3=83=A9=E3=83=B3=E3=82=AD=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E5=BC=95=E6=95=B0=E3=81=A7=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member/RankingCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index 463aa8c..31cd80c 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -15,7 +15,7 @@ export function MemberCard({ member }: { member: Member }): ReactElement {
       <Box maxWidth="50rem">
         <Flex gap="6" align="center" ml="14rem">
           <Text size="8" mr="3rem">
-            1
+            {member.posts_count}
           </Text>
           <Avatar
             size="8"

From dd944b9791237b6672ffc5100e66ba9279508495 Mon Sep 17 00:00:00 2001
From: nasubi <r916nis@gmail.com>
Date: Sat, 15 Jun 2024 14:59:52 +0900
Subject: [PATCH 9/9] =?UTF-8?q?/ranking=E3=81=A7=E3=83=A9=E3=83=B3?=
 =?UTF-8?q?=E3=82=AD=E3=83=B3=E3=82=B0=E8=A1=A8=E7=A4=BA=E7=94=A8=E3=81=AE?=
 =?UTF-8?q?=E9=85=8D=E5=88=97=E3=82=92=E4=BD=9C=E6=88=90=EF=BD=A4RankingCa?=
 =?UTF-8?q?rd=E3=81=AF=E8=A1=A8=E7=A4=BA=E6=A9=9F=E8=83=BD=E3=81=A0?=
 =?UTF-8?q?=E3=81=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/members.json               |  6 ++---
 src/components/member/RankingCard.tsx | 31 +++++++++++++++++--------
 src/pages/ranking/index.tsx           | 33 ++++++++++++++++++++++-----
 3 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/src/assets/members.json b/src/assets/members.json
index 5f6c126..c560632 100644
--- a/src/assets/members.json
+++ b/src/assets/members.json
@@ -3,18 +3,18 @@
     {
       "myself": false,
       "name": "苗字 名前",
-      "screen_name": "xxxxxx",
+      "screen_name": "myouji namae",
       "icon": "https://placehold.jp/150x150.png",
       "role": "member",
       "posts_count": 0,
       "joined_at": "2019-01-01T00:00:00Z",
       "last_posted_at": "2019-01-01T00:00:00Z",
-      "email": "xxxxxx"
+      "email": "yyyyyy"
     },
     {
       "myself": true,
       "name": "重音 テト",
-      "screen_name": "xxxxxx",
+      "screen_name": "ju-on teto",
       "icon": "https://placehold.jp/150x150.png",
       "role": "owner",
       "posts_count": 0,
diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index 31cd80c..fd45203 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -1,21 +1,32 @@
 import { Member } from "@/types/member";
 import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
-import unlockedAchievements from "@/assets/unlockedAchievements.json";
+import SampleMembers from "@/assets/members.json";
 
-export function MemberCard({ member }: { member: Member }): ReactElement {
-  const userPoint = unlockedAchievements.unlockedAchievements.filter(
-    (achievements) => {
-      return achievements.userEmail == "xxxxx";
-    },
-  );
+export function MemberCard({
+  memberEmail,
+  index,
+  point,
+}: {
+  memberEmail: string;
+  index: number;
+  point: number;
+}): ReactElement {
+  // const userPoint = unlockedAchievements.unlockedAchievements.filter(
+  //   (achievements) => {
+  //     return achievements.userEmail == "xxxxx";
+  //   },
+  // );
+  const user: Member = SampleMembers.members.find(
+    (member) => member.email === memberEmail,
+  )!;
 
   return (
     <>
       <Box maxWidth="50rem">
         <Flex gap="6" align="center" ml="14rem">
           <Text size="8" mr="3rem">
-            {member.posts_count}
+            {index + 1}
           </Text>
           <Avatar
             size="8"
@@ -25,10 +36,10 @@ export function MemberCard({ member }: { member: Member }): ReactElement {
           />
           <Flex direction="column" align="center">
             <Text as="div" size="7" weight="bold">
-              {member.name}
+              {user.name}
             </Text>
             <Text as="div" size="7" color="gray">
-              {userPoint.length}pt
+              {point}pt
             </Text>
           </Flex>
         </Flex>
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
index c07b8db..ac92834 100644
--- a/src/pages/ranking/index.tsx
+++ b/src/pages/ranking/index.tsx
@@ -1,12 +1,33 @@
 import { MemberCard } from "@/components/member/RankingCard";
 import { ReactElement } from "react";
-import SampleMember from "@/assets/members.json";
-import { Member } from "@/types/member";
+import unlockedAchievements from "@/assets/unlockedAchievements.json";
 
 export default function Page(): ReactElement {
-  const teto = SampleMember.members.at(-1) as Member;
+  // 仮のデータ(unlockedAchievements)からfilterでpointを取得する
+  const members = [
+    {
+      memberEmail: "xxxxxx",
+      point: 100,
+    },
+    {
+      memberEmail: "yyyyyy",
+      point: 200,
+    },
+  ];
 
-  if (teto == null) throw new Error("Teto not found!");
-
-  return <MemberCard member={teto}></MemberCard>;
+  return (
+    <div>
+      {members.map((member, index) => {
+        return (
+          <MemberCard
+            key={index}
+            memberEmail={member.memberEmail}
+            index={index}
+            point={member.point}
+          />
+        );
+      })}
+    </div>
+  );
 }
+