feat-fe: QA목록 3가지 (#593)

Co-authored-by: Jeongwoo Park <[email protected]>

frontend/src/components/dashboard/DashboardSidebar/index.tsx

@@ -27,7 +27,7 @@ export default function DashboardSidebar({ options }: DashboardSidebarProps) {
       </Link>
 
       <S.Contents>
-        <Accordion title={<Link to="/dashboard/1/posts">공고</Link>}>
+        <Accordion title={<Link to={`/dashboard/${dashboardId}/posts`}>공고</Link>}>
           {options.map(({ text, isSelected, postId }, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <Accordion.ListItem key={index}>

frontend/src/components/recruitment/RecruitmentCard/index.tsx

@@ -1,7 +1,7 @@
 import { HiOutlineClock } from 'react-icons/hi';
 import { RecruitmentStatusType } from '@customTypes/recruitment';
-import { useGetRecruitmentStatus } from '@hooks/useRecruitment';
 import formatDate from '@utils/formatDate';
+import { getTimeStatus } from '@utils/compareTime';
 
 import RecruitmentCardStat from '../RecruitmentCardStat';
 import S from './style';
@@ -30,9 +30,9 @@ const POST_STATS_KEY: Record<string, string> = {
 } as const;
 
 const RECRUITMENT_STATUS: Record<RecruitmentStatusType, string> = {
-  planned: '모집 예정',
-  inProgress: '모집 진행 중',
-  closed: '모집 마감',
+  Pending: '모집 예정',
+  Ongoing: '모집 진행 중',
+  Closed: '모집 마감',
 };
 
 export default function RecruitmentCard({
@@ -43,7 +43,7 @@ export default function RecruitmentCard({
   endDate,
   onClick,
 }: RecruitmentCardProps) {
-  const status = useGetRecruitmentStatus({ startDate, endDate });
+  const { status } = getTimeStatus({ startDate, endDate });
 
   const postStatsMap: [string, number][] = [
     [POST_STATS_KEY.total, postStats.total],

frontend/src/components/recruitment/RecruitmentCard/style.ts

@@ -47,14 +47,14 @@ const RecruitmentStatusFlag = styled.div<{ status: RecruitmentStatusType }>`
   ${({ theme }) => theme.typography.common.small};
 
   ${({ theme, status }) => {
-    if (status === 'planned') {
+    if (status === 'Pending') {
       return css`
         border: 1px solid ${theme.baseColors.bluescale[100]};
         background: ${theme.baseColors.bluescale[50]};
         color: ${theme.baseColors.bluescale[500]};
       `;
     }
-    if (status === 'inProgress') {
+    if (status === 'Ongoing') {
       return css`
         border: 1px solid ${theme.baseColors.purplescale[100]};
         background: ${theme.baseColors.purplescale[50]};

frontend/src/hooks/apply.ts

@@ -2,6 +2,7 @@ import applyApis from '@api/domain/apply/apply';
 import { ApplyRequestBody } from '@customTypes/apply';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import { getTimeStatus } from '@utils/compareTime';
 import QUERY_KEYS from './queryKeys';
 
 const useGetRecruitmentInfo = ({ postId }: { postId: string }) => {
@@ -19,11 +20,7 @@ export const applyQueries = {
     const { data, ...restQueryObj } = useGetRecruitmentInfo({ postId });
 
     const { startDate, endDate } = data?.recruitmentPost ?? { startDate: '', endDate: '' };
-    const start = new Date(startDate as string).getTime();
-    const end = new Date(endDate as string).getTime();
-    const now = new Date().getTime();
-
-    const isClosed = !data || end < now || start > now;
+    const isClosed = !getTimeStatus({ startDate, endDate }).isOngoing;
 
     return {
       isClosed,

frontend/src/mocks/dashboardList.json

@@ -12,7 +12,7 @@
       },
       "postUrl": "www.cruru.kr/123543920/recruit",
       "startDate": "1900-01-21T00:00:00",
-      "endDate": "2024-07-24T18:00:00"
+      "endDate": "2024-09-24T18:00:00"
     },
     {
       "dashboardId": "2",
@@ -24,8 +24,8 @@
         "total": 15
       },
       "postUrl": "www.cruru.kr/98765101/recruit",
-      "startDate": "1900-01-21T00:00:00",
-      "endDate": "2024-07-24T20:30:00"
+      "startDate": "2024-12-21T00:00:00",
+      "endDate": "2024-12-24T20:30:00"
     },
     {
       "dashboardId": "3",

frontend/src/pages/SignIn/index.tsx

@@ -19,8 +19,14 @@ export default function SignIn() {
     <S.Layout>
       <S.SignUpContainer onSubmit={handleSignIn}>
         <S.Title>로그인</S.Title>
-        <InputField {...register('email', { placeholder: '이메일', type: 'email' })} />
-        <InputField {...register('password', { placeholder: '비밀번호', type: 'password' })} />
+        <InputField
+          {...register('email', { placeholder: '이메일', type: 'email' })}
+          required
+        />
+        <InputField
+          {...register('password', { placeholder: '비밀번호', type: 'password' })}
+          required
+        />
         <S.ButtonContainer>
           <Button
             size="fillContainer"

frontend/src/types/recruitment.ts

@@ -1 +1 @@
-export type RecruitmentStatusType = 'planned' | 'inProgress' | 'closed';
+export type RecruitmentStatusType = 'Pending' | 'Ongoing' | 'Closed';

frontend/src/utils/compareTime.test.ts

@@ -0,0 +1,51 @@
+import { getTimeStatus } from './compareTime';
+
+describe('getTimeStatus 테스트', () => {
+  beforeEach(() => {
+    // 모든 테스트에서 시스템 시간을 동일한 날짜로 고정합니다.
+    const mockCurrentDate = new Date('2024-08-21T00:00:00Z');
+    jest.useFakeTimers();
+    jest.setSystemTime(mockCurrentDate);
+  });
+
+  afterEach(() => {
+    // 테스트 후 원래의 시스템 시간으로 복원합니다.
+    jest.useRealTimers();
+  });
+
+  it('현재 날짜가 시작 날짜 이전이면 Pending을 반환해야 한다', () => {
+    const result = getTimeStatus({
+      startDate: '2024-08-22T00:00:00Z',
+      endDate: '2024-08-25T00:00:00Z',
+    });
+
+    expect(result.status).toBe('Pending');
+    expect(result.isPending).toBe(true);
+    expect(result.isOngoing).toBe(false);
+    expect(result.isClosed).toBe(false);
+  });
+
+  it('현재 날짜가 시작일과 종료일 사이에 있으면 Ongoing를 반환해야 한다', () => {
+    const result = getTimeStatus({
+      startDate: '2024-08-20T00:00:00Z',
+      endDate: '2024-08-23T00:00:00Z',
+    });
+
+    expect(result.status).toBe('Ongoing');
+    expect(result.isPending).toBe(false);
+    expect(result.isOngoing).toBe(true);
+    expect(result.isClosed).toBe(false);
+  });
+
+  it('현재 날짜가 종료 날짜 이후이면 Closed를 반환해야 한다', () => {
+    const result = getTimeStatus({
+      startDate: '2024-08-18T00:00:00Z',
+      endDate: '2024-08-20T00:00:00Z',
+    });
+
+    expect(result.status).toBe('Closed');
+    expect(result.isPending).toBe(false);
+    expect(result.isOngoing).toBe(false);
+    expect(result.isClosed).toBe(true);
+  });
+});

frontend/src/utils/compareTime.ts

@@ -0,0 +1,30 @@
+import { RecruitmentStatusType } from '@customTypes/recruitment';
+import { getCleanDateString } from './formatDate';
+
+interface GetRecruitmentStatusProps {
+  startDate: string;
+  endDate: string;
+}
+
+interface RecruitmentStatusObject {
+  status: RecruitmentStatusType;
+  isPending: boolean;
+  isOngoing: boolean;
+  isClosed: boolean;
+}
+
+export function getTimeStatus({ startDate, endDate }: GetRecruitmentStatusProps): RecruitmentStatusObject {
+  const currentDate = getCleanDateString();
+
+  // TODO: 시간 지정 기능이 추가될 시 +24 로직은 사라져야 합니다.
+  const endDatePlus24Hours = getCleanDateString(endDate);
+  endDatePlus24Hours.setHours(endDatePlus24Hours.getHours() + 24);
+
+  if (getCleanDateString(startDate) > currentDate) {
+    return { status: 'Pending', isPending: true, isOngoing: false, isClosed: false };
+  }
+  if (currentDate < endDatePlus24Hours) {
+    return { status: 'Ongoing', isPending: false, isOngoing: true, isClosed: false };
+  }
+  return { status: 'Closed', isPending: false, isOngoing: false, isClosed: true };
+}