New title

src/components/AddMatch.test.tsx

@@ -23,6 +23,7 @@ describe("Test", () => {
     render(<AddMatch />);
 
     await fireAntEvent.actAndSetDate(screen.getByTestId("gameDate"), "Now");
+    await fireAntEvent.actAndInput("제목을 입력해주세요.", "1자리 남음");
     await fireAntEvent.actAndInput("경기장을 입력해주세요.", "용산 더베이스");
     await fireAntEvent.actAndInput("멤버수를 입력해주세요.", "20");
     await fireAntEvent.actAndSelect(screen.getByTestId("genderSelect"), "혼성");
@@ -43,6 +44,7 @@ describe("Test", () => {
     const match = firebase
       .firestore()
       .collection(CollectionName.matchesCollectionName).add.mock.calls[0][0];
+    expect(match.title).toBe("1자리 남음"); // 장소가 "1자리 남음"이 맞는지 확인
     expect(match.place).toBe("용산 더베이스"); // 장소가 "용산 더베이스"이 맞는지 확인
     expect(match.memberCount).toBe(20); // 인원수가 20이 맞는지 확인
     expect(match.gender).toBe("혼성"); // 성별이 혼성이 맞는지 확인
@@ -66,6 +68,7 @@ describe("Test", () => {
                 dateTime: {
                   toDate: jest.fn().mockReturnValue(new Date("2021-01-01")),
                 },
+                title: "1자리 남음",
                 place: "용산 더베이스",
                 memberCount: 15,
                 gender: "여성",
@@ -113,6 +116,7 @@ describe("Test", () => {
                 dateTime: {
                   toDate: jest.fn().mockReturnValue(new Date("2021-01-01")),
                 },
+                title: "1자리 남음",
                 place: "용산 더베이스",
                 memberCount: 15,
                 gender: "여성",

src/components/AddMatch.tsx

@@ -25,6 +25,7 @@ const AddMatch = (props: { id: string }): JSX.Element => {
   const history = useHistory();
 
   const [gameDate, setGameDate] = useState<Moment | null>(null);
+  const [title, setTitle] = useState("");
   const [place, setPlace] = useState("");
   const [memberCount, setMemberCount] = useState(18);
   const [gender, setGender] = useState<Gender>("남성");
@@ -52,6 +53,7 @@ const AddMatch = (props: { id: string }): JSX.Element => {
       const match = doc.data();
       if (!match) return;
       setGameDate(moment(match.dateTime.toDate()));
+      setTitle(match.title);
       setPlace(match.place);
       setMemberCount(match.memberCount);
       setGender(match.gender);
@@ -64,6 +66,10 @@ const AddMatch = (props: { id: string }): JSX.Element => {
     })();
   }, [history, id]);
 
+  const changeTitle = (e: React.FormEvent<HTMLInputElement>) => {
+    setTitle(e.currentTarget.value);
+  };
+
   const changePlace = (e: React.FormEvent<HTMLInputElement>) => {
     setPlace(e.currentTarget.value);
   };
@@ -139,13 +145,18 @@ const AddMatch = (props: { id: string }): JSX.Element => {
       window.alert("매치 일시를 선택해주세요.");
       return null;
     }
+    if (title.length < 1) {
+      window.alert("제목을 입력해주세요.");
+      return null;
+    }
     if (place.length < 1) {
       window.alert("매치 장소를 입력해주세요.");
       return null;
     }
 
     const match: Match = {
       dateTime: gameDate.toDate(),
+      title,
       place,
       memberCount,
       gender,
@@ -177,6 +188,18 @@ const AddMatch = (props: { id: string }): JSX.Element => {
             />
           </Col>
         </Row>
+        <Row align="middle" className="row">
+          <Col span={6} className="addMatchSubtitle">
+            제목
+          </Col>
+          <Col span={18}>
+            <Input
+              onChange={changeTitle}
+              value={title}
+              placeholder="제목을 입력해주세요."
+            />
+          </Col>
+        </Row>
         <Row align="middle" className="row">
           <Col span={6} className="addMatchSubtitle">
             경기장

src/components/MatchList.test.tsx

@@ -52,6 +52,7 @@ describe("Test", () => {
                           .fn()
                           .mockReturnValue(new Date("2021-12-01")),
                       },
+                      title: "1자리 남음",
                       place: "용산 더베이스",
                       memberCount: 15,
                       gender: "여성",
@@ -74,7 +75,7 @@ describe("Test", () => {
 
     render(<MatchList recurringClasses={false} />);
     await waitFor(async () => {
-      expect(screen.getByText(/용산 더베이스/i)).toBeInTheDocument();
+      expect(screen.getByText(/1자리 남음/i)).toBeInTheDocument();
       expect(screen.getByText(/여성/i)).toBeInTheDocument();
       //jsdom toLocaleDateString issue - https://github.com/jsdom/jsdom/issues/1489
       //jest 테스트환경 브라우저에서는 toLocaleDateString(ko-KR) 지원하지 않아서 테스트에서 영어로 확인해야됨.
@@ -124,6 +125,7 @@ describe("Test", () => {
                           .fn()
                           .mockReturnValue(new Date("2021-12-01")),
                       },
+                      title: "1자리 남음",
                       place: "신사 누리",
                       memberCount: 15,
                       gender: "혼성원팀",

src/components/MatchListItem.css

@@ -7,7 +7,7 @@
   color: var(--black-color);
   font-size: 18px;
 }
-.place {
+.infoTitle {
   color: var(--black-color);
   font-size: 14px;
   margin-bottom: 4px;
@@ -18,9 +18,12 @@
   color: var(--grey-color);
 }
 .info {
-  margin-right: 4px;
+  margin-right: 8px;
   font-size: 12px;
 }
+.highlight {
+  color: var(--orange-color);
+}
 .alignRight {
   display: flex;
   justify-content: flex-end;

src/components/MatchListItem.tsx

@@ -42,9 +42,12 @@ const MatchListItem = (matchProps: {
             </div>
           </Col>
           <Col span={12}>
-            <div className="place">{match.place}</div>
+            <div className="infoTitle">{match.title}</div>
             <div className="infoContainer">
               <div className="info">{match.gender}</div>
+              {match.isRecurringClass && (
+                <div className="info highlight">{match.place}</div>
+              )}
             </div>
           </Col>
           <Col span={6} className="alignRight">

src/types.ts

@@ -5,6 +5,7 @@ export type Status = "신청가능" | "예약신청" | "취소신청" | "확정"
 export interface Match {
   id?: string;
   dateTime: Date | null;
+  title: string;
   place: string;
   memberCount: number;
   gender: Gender;