매치 상세내역 firebase 연동

src/components/MatchDetail.test.tsx

@@ -1,13 +1,42 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import MatchDetail from "./MatchDetail";
+import firebase from "firebase";
 
 describe("Test", () => {
+  beforeEach(() => {
+    ((firebase.firestore as unknown) as jest.Mock).mockReturnValue({
+      collection: jest.fn().mockReturnValue({
+        doc: jest.fn().mockReturnValue({
+          get: jest.fn().mockResolvedValue({
+            exists: {},
+            data: jest.fn().mockReturnValue({
+              dateTime: { toDate: jest.fn().mockReturnValue(new Date()) },
+              place: "용산 더베이스",
+              memberCount: 15,
+              teamCount: 3,
+              gender: "여성",
+              level: "초급",
+              link: "www.naver.com",
+              gameType: "match",
+              fee: 20000,
+              canPark: true,
+              canRentShoes: true,
+              manager: "배성진",
+            }),
+            id: "test12345",
+          }),
+        }),
+      }),
+    });
+  });
+
   test("renders MatchDetail", async () => {
     render(<MatchDetail />);
+
     await waitFor(async () => {
       //더미데이터 제대로 나오는지 확인
       expect(screen.getByText(/초급레벨/i)).toBeInTheDocument();
-      expect(screen.getByText(/풋살화 대여 불가능/i)).toBeInTheDocument();
+      expect(screen.getByText(/풋살화 대여 가능/i)).toBeInTheDocument();
       expect(screen.getByText(/주차 가능/i)).toBeInTheDocument();
       expect(screen.getByText(/20,000원/i)).toBeInTheDocument();
     });

src/components/MatchDetail.tsx

@@ -1,27 +1,40 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Divider, Button, Tag } from "antd";
 import "antd/dist/antd.css";
 import "./MatchDetail.css";
 import { Match } from "../types";
 import Label from "./Label";
-
-const match: Match = {
-  dateTime: new Date(),
-  place: "용산",
-  memberCount: 15,
-  teamCount: 3,
-  gender: "여성",
-  level: "초급",
-  link: "www.naver.com",
-  gameType: "gx+match",
-  fee: 20000,
-  canPark: true,
-  canRentShoes: false,
-  manager: "배성진",
-};
+import { useHistory, useParams } from "react-router-dom";
+import firebase from "firebase";
 
 const MatchDetail = (): JSX.Element => {
-  return (
+  const history = useHistory();
+  const [match, setMatch] = useState<Match | null>(null);
+  const { id } = useParams<{ id: string }>();
+
+  useEffect(() => {
+    getMatch();
+  }, [id]);
+
+  const getMatch = async () => {
+    const db = firebase.firestore();
+    const doc = await db.collection("matches").doc(id).get();
+    if (!doc.exists) {
+      window.alert("잘못된 접근입니다. 목록페이지로 돌아갑니다.");
+      history.push("/");
+      return;
+    }
+    const match = doc.data();
+    if (match) {
+      match.dateTime = match.dateTime.toDate();
+      match.id = doc.id;
+      setMatch(match as Match);
+    }
+  };
+
+  return !match ? (
+    <div></div>
+  ) : (
     <div className="matchDetail">
       <a href="/">목록으로 돌아가기</a>
       <Divider className="divider" />

src/setupTests.ts

@@ -27,6 +27,7 @@ const mockHistory = {
 
 jest.mock("react-router-dom", () => ({
   useHistory: () => mockHistory,
+  useParams: () => jest.fn(),
 }));
 
 export const fireAntEvent = {