feat: 試合表用のカードコンポーネントの再実装

src/components/matchCard.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { screen } from "@testing-library/react";
+import { render } from "../../test";
+import { MatchCard } from "./matchCard.tsx";
+
+describe("matchList", () => {
+  it("試合/コースが表示できる", async () => {
+    render(<MatchCard
+      id={"10"}
+      courseIndex={0}
+      matchIndex={0}
+      isFinished={false}
+      matchType={"primary"}
+      teams={{
+        right: {
+          id: "1",
+          teamName: "右のチーム",
+          isMultiWalk: false,
+          category: "elementary",
+        },
+        left: {
+          id: "2",
+          teamName: "左のチーム",
+          isMultiWalk: false,
+          category: "elementary",
+        },
+      }}
+    />);
+
+    expect(screen.findByText("第1試合 1コース")).toBeTruthy();
+    expect(screen.findByText("左のチーム")).toBeTruthy();
+    expect(screen.findByText("右のチーム")).toBeTruthy();
+  });
+
+});
+

src/components/matchCard.tsx

@@ -1,6 +1,5 @@
-import { Card, SimpleGrid, Text } from "@mantine/core";
-import { IconChecks } from "@tabler/icons-react";
-import { LinkToMatch } from "./linkToMatch";
+import { Card, Divider, Group, Text } from "@mantine/core";
+
 interface MatchCardProps {
   id: string;
   matchType: "primary" | "final";
@@ -19,75 +18,48 @@ interface MatchCardProps {
     };
   };
   isFinished: boolean;
+  courseIndex: number;
+  matchIndex: number;
 }
+
+const MatchCardTeam = (props: {teamName: string, courseType: "左" | "右"}) => {
+  return (
+    <Group style={{display: "flex", fontSize: "2rem"}}>
+      <Text size={"20px"} fw={800} truncate={"end"}>{props.courseType}</Text>
+      <Text
+        size={"32px"}
+        fw={800}
+      >
+        {props.teamName}
+      </Text>
+    </Group>
+  )
+}
+
 export const MatchCard = (props: MatchCardProps) => {
   return (
-    <LinkToMatch
-      info={{
-        id: props.id,
-        teams: props.teams,
-        matchType: props.matchType,
+    <Card
+      shadow="none"
+      padding="sm"
+      radius="md"
+      m={"md"}
+      withBorder
+      variant={"outline"}
+      style={{
+        width: "20rem",
+        height: "10rem",
+        textAlign: "left"
       }}
-      style={{ pointerEvents: props.isFinished ? "none" : "auto" }}
     >
-      <Card
-        shadow={props.isFinished ? "none" : "sm"}
-        padding="sm"
-        radius="md"
-        m={"md"}
-        withBorder
-        variant={"outline"}
-        style={{
-          display: "flex",
-          width: "15rem",
-          height: "8rem",
-          alignItems: "center",
-        }}
-      >
-        {props.isFinished ? (
-          <IconChecks
-            size={30}
-            color={"#00FF00"}
-            style={{
-              position: "absolute",
-              top: "0.5rem",
-              right: "0.5rem",
-            }}
-          />
-        ) : (
-          <></>
-        )}
-        <SimpleGrid
-          cols={1}
-          style={{
-            color: "black",
-            textAlign: "center",
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          <Text
-            size={"1rem"}
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Text size="xl">右: {props.teams["right"].teamName}</Text>
-          </Text>
-          <Text
-            size={"1rem"}
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Text size="xl">左: {props.teams["left"].teamName}</Text>
-          </Text>
-        </SimpleGrid>
-      </Card>
-    </LinkToMatch>
+      <div>
+        <Text fw={"800"} size={"md"} mb={".6rem"}>第{props.matchIndex+1}試合 {props.courseIndex+1}コース</Text>
+
+        <MatchCardTeam teamName={props.teams["left"].teamName} courseType={"左"} />
+
+        <Divider my={"sm"} variant={"dashed"} />
+
+        <MatchCardTeam teamName={props.teams["right"].teamName} courseType={"右"} />
+      </div>
+    </Card>
   );
 };

src/pages/matchList.tsx

@@ -45,7 +45,7 @@ export const MatchList = () => {
             acc[coat].push(match);
             return acc;
           },
-          {}
+          {},
         );
         setPrimaryMatches(separatedData);
       });
@@ -65,7 +65,7 @@ export const MatchList = () => {
             acc[coat].push(match);
             return acc;
           },
-          {}
+          {},
         );
         setFinalMatches(separatedData);
       });
@@ -83,15 +83,17 @@ export const MatchList = () => {
               key={coat}
               style={{ backgroundColor: "#e0f0e0", borderRadius: "0.5rem" }}
             >
-              <Title order={3}>{parseInt(coat) + 1}コート</Title>
-              {matches.map((match) => {
+              <Title order={3}>{parseInt(coat) + 1}コース</Title>
+              {matches.map((match,i ) => {
                 return (
                   <MatchCard
                     key={match.id}
                     id={match.id}
                     matchType={match.matchType}
                     teams={match.teams}
                     isFinished={match.results != null}
+                    courseIndex={match.courseIndex}
+                    matchIndex={i}
                   />
                 );
               })}
@@ -113,15 +115,17 @@ export const MatchList = () => {
               key={coat}
               style={{ backgroundColor: "#e0f0e0", borderRadius: "0.5rem" }}
             >
-              <Title order={3}>{parseInt(coat) + 1}コート</Title>
-              {matches.map((match) => {
+              <Title order={3}>{parseInt(coat) + 1}コース</Title>
+              {matches.map((match, i) => {
                 return (
                   <MatchCard
                     key={match.id}
                     id={match.id}
                     matchType={match.matchType}
                     teams={match.teams}
                     isFinished={match.results != null}
+                    courseIndex={match.courseIndex}
+                    matchIndex={i}
                   />
                 );
               })}