[FE] 24시간 이하로 남으면 디데이 말고 시간 보여주기(#598)

.github/workflows/frontend-ci.yml

@@ -29,6 +29,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set timezone to Asia/Seoul
+        run: sudo timedatectl set-timezone Asia/Seoul
+
       # 노드 설치
       - name: Install Nodejs
         uses: actions/setup-node@v4

frontend/jest.setup.js

@@ -1,5 +1,8 @@
 const { server } = require("@/mocks/server");
 
+jest.mock("@/assets", () => "");
+process.env.TZ = "Asia/Seoul";
+
 // 모든 테스트 전에 MSW 서버를 시작합니다.
 beforeAll(() => server.listen());
 

frontend/public/index.html

@@ -8,16 +8,18 @@
       name="description"
       content="주니어 개발자들이 서로 코드리뷰하고 피드백 받을 수 있는 플랫폼"
     />
-    <title>CoReA</title>
+    <title>CoReA(Code Review Area) - 코드리뷰 매칭 플랫폼</title>
     <link rel="stylesheet" href="./fonts.css" />
     <link rel="icon" href="./favicon.ico" />
-    <meta property="og:title" content="CoReA" />
+    <meta property="og:title" content="CoReA - 코드리뷰 매칭 플랫폼" />
     <meta
       property="og:description"
       content="주니어 개발자들이 서로 코드리뷰하고 피드백 받을 수 있는 플랫폼"
     />
     <meta property="og:image" content="./logo.webp" />
     <meta property="og:url" content="https://code-review-area.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ko_KR" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

frontend/src/components/common/calendar/Calendar.tsx

@@ -2,7 +2,7 @@ import * as S from "./Calendar.style";
 import useCalendar from "@/hooks/common/useCalendar";
 import Icon from "@/components/common/icon/Icon";
 import DAYS from "@/constants/days";
-import areDatesEqual from "@/utils/areDatesEqual";
+import { areDatesEqual } from "@/utils/dateFormatter";
 
 export interface CalendarProps {
   selectedDate: Date;

frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx

@@ -0,0 +1,171 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import RoomInfoCard from "@/components/roomDetailPage/roomInfoCard/RoomInfoCard";
+import { RoomInfo } from "@/@types/roomInfo";
+import { theme } from "@/styles/theme";
+
+const mockBaseRoomInfo: RoomInfo = {
+  id: 1,
+  manager: "darr",
+  currentParticipants: 5,
+  roomStatus: "OPEN",
+  participationStatus: "PARTICIPATED",
+  memberRole: "BOTH",
+  title: "테스트 제목",
+  content: "테스트 본문",
+  repositoryLink: "테스트 링크",
+  thumbnailLink: "테스트 썸네일",
+  matchingSize: 5,
+  keywords: ["테스트"],
+  limitedParticipants: 10,
+  recruitmentDeadline: "2024-10-05T10:30:00+09:00",
+  reviewDeadline: "2024-10-08T10:30:00+09:00",
+};
+
+describe("RoomInfoCard 컴포넌트 테스트", () => {
+  beforeAll(() => {
+    const mockDate = new Date("2024-10-02T10:30:00+09:00");
+    const OriginalDate = Date;
+
+    jest.spyOn(global, "Date").mockImplementation((value) => {
+      return value ? new OriginalDate(value) : new OriginalDate(mockDate);
+    });
+  });
+
+  it("'모집'중인 방에 2일 이상 남으면 '리뷰 마감까지 남은 일', '모집 마감까지 남은 일'이 보인다", async () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockBaseRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("D-3");
+    expect(reviewLeftDay).toHaveTextContent("D-6");
+  });
+
+  it("'모집'이 24시간 미만, '리뷰'가 24시간 이상 남은 경우 '모집 마감까지 남은 시간', '리뷰 마감까지 남은 일'이 보인다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      recruitmentDeadline: "2024-10-03T00:30:00+09:00",
+      reviewDeadline: "2024-10-05T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("14시간 0분 전");
+    expect(reviewLeftDay).toHaveTextContent("D-2");
+  });
+
+  it("'모집'이 24시간 미만, '리뷰'가 24시간 미만인 경우 '모집 마감까지 남은 시간', '리뷰 마감까지 남은 시간'이 보인다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      recruitmentDeadline: "2024-10-02T12:30:00+09:00",
+      reviewDeadline: "2024-10-03T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("2시간 0분 전");
+    expect(reviewLeftDay).toHaveTextContent("14시간 0분 전");
+  });
+
+  it("'모집'완료 후 '진행 중'으로 바뀌었을 때 '리뷰'가 24시간 이상인 경우 '리뷰 마감까지 남은 일'이 보인다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      recruitmentDeadline: "2024-10-01T12:30:00+09:00",
+      reviewDeadline: "2024-10-04T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("");
+    expect(reviewLeftDay).toHaveTextContent("D-1");
+  });
+
+  it("'모집'완료 후 '진행 중'으로 바뀌었을 때 '리뷰'가 24시간 미만인 경우 '리뷰 마감까지 남은 시간'이 보인다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      recruitmentDeadline: "2024-10-01T12:30:00+09:00",
+      reviewDeadline: "2024-10-03T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("");
+    expect(reviewLeftDay).toHaveTextContent("14시간 0분 전");
+  });
+
+  it("'종료됨' 상태인 방에서는 남은 기간이 보이지 않는다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      roomStatus: "CLOSE",
+      recruitmentDeadline: "2024-10-01T12:30:00+09:00",
+      reviewDeadline: "2024-10-03T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("");
+    expect(reviewLeftDay).toHaveTextContent("");
+  });
+
+  it("'실패' 상태인 방에서는 남은 기간이 보이지 않는다", async () => {
+    const mockRoomInfo: RoomInfo = {
+      ...mockBaseRoomInfo,
+      roomStatus: "FAIL",
+      recruitmentDeadline: "2024-10-01T12:30:00+09:00",
+      reviewDeadline: "2024-10-03T00:30:00+09:00",
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <RoomInfoCard roomInfo={mockRoomInfo} />
+      </ThemeProvider>,
+    );
+
+    const recruitLeftDay = screen.getByTestId("recruitLeftTime");
+    const reviewLeftDay = screen.getByTestId("reviewLeftTime");
+
+    expect(recruitLeftDay).toHaveTextContent("");
+    expect(reviewLeftDay).toHaveTextContent("");
+  });
+});

frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx

@@ -64,7 +64,7 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
                 <S.DateTimeText>
                   {formatDateTimeString(roomInfo.recruitmentDeadline)}
                 </S.DateTimeText>
-                <S.StyledDday>
+                <S.StyledDday data-testid="recruitLeftTime">
                   {roomInfo.roomStatus === "OPEN" &&
                     formatDday(roomInfo.recruitmentDeadline) !== "종료됨" &&
                     displayLeftTime(roomInfo.recruitmentDeadline)}
@@ -80,8 +80,9 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
               </S.RoomContentSmall>
               <div>
                 <S.DateTimeText>{formatDateTimeString(roomInfo.reviewDeadline)}</S.DateTimeText>
-                <S.StyledDday>
-                  {formatDday(roomInfo.reviewDeadline) !== "종료됨" &&
+                <S.StyledDday data-testid="reviewLeftTime">
+                  {(roomInfo.roomStatus === "OPEN" || roomInfo.roomStatus === "PROGRESS") &&
+                    formatDday(roomInfo.reviewDeadline) !== "종료됨" &&
                     displayLeftTime(roomInfo.reviewDeadline)}
                 </S.StyledDday>
               </div>