[✅ test] getServerSideProps 내에서 new Date() 사용 테스트

- 서버에서의 new Date() 값과 Hydration 도중 클라이언트의 new Date() 값이 변화하는 것을 에러의 주 요인으로 추측
- 데이터가 변화하는 것을 막기 위해 getServerSideProps 내에서 날짜 데이터를 생성하고 이를 props로 내려주는 방식으로 테스트. 어차피 SSR 페이지이기 때문에 client에서 실시간으로 값을 바꿔줄 필요성은 없다고 판단

src/components/home/RecruitingChallengeCard.tsx

@@ -4,22 +4,18 @@ import Link from 'next/link';
 import IRecruitingChallenge from '@/types/recruitingChallenge';
 import VERIFICATION_TYPE from '@/constants/verificationType';
 import screenSize from '@/constants/screenSize';
-import calculatePeriod from '@/utils/calculatePeriod';
-import calculateDDay from '@/utils/calculateDDay';
 
 export default function RecruitingChallengeCard({
   challengeGroupId,
   groupTitle,
   imageUrl,
   verificationType,
   participantCount,
-  startDate,
-  endDate,
   isFree,
+  dateDiff,
 }: IRecruitingChallenge) {
-  const caculateRecruitDDay = (date: string) => {
-    let dDay = -1;
-    dDay = calculateDDay(date) - 1;
+  const calculateRecruitDDay = (day: number) => {
+    const dDay = day - 1;
     let dDayStr;
     if (dDay < 0) {
       dDayStr = '모집 마감';
@@ -28,6 +24,16 @@ export default function RecruitingChallengeCard({
     }
     return dDayStr;
   };
+  const calculateProgressePeroid = (day: number) => {
+    const days = Math.abs(day) + 1;
+    let periodStr = '';
+    if (days % 7 === 0) {
+      periodStr = `${days / 7}주`;
+    } else {
+      periodStr = `${days}일`;
+    }
+    return periodStr;
+  };
   return (
     <SChallengeCard>
       <Link href={`/challenge/${challengeGroupId}`}>
@@ -41,14 +47,16 @@ export default function RecruitingChallengeCard({
             priority
           />
           <SParticipant>{participantCount}</SParticipant>
-          <SRecruitDDay>{caculateRecruitDDay(startDate)}</SRecruitDDay>
+          <SRecruitDDay>
+            {calculateRecruitDDay(dateDiff.startToToday)}
+          </SRecruitDDay>
         </SThumbnail>
         <STitle>{groupTitle}</STitle>
         <SChips>
           <dt className="a11yHidden">챌린지 인증 빈도</dt>
           <dd>매일</dd>
           <dt className="a11yHidden">챌린지 진행 기한</dt>
-          <dd>{calculatePeriod(startDate, endDate)}</dd>
+          <dd>{calculateProgressePeroid(dateDiff.startToEnd)}</dd>
           <dt className="a11yHidden">챌린지 인증 방식</dt>
           <dd>{VERIFICATION_TYPE[verificationType]}</dd>
           {isFree && (

src/pages/home/index.tsx

@@ -19,6 +19,7 @@ import getRecruitingChallengeApi from '@/lib/axios/home/api';
 import createServerInstance from '@/lib/axios/serverInstance';
 import serverErrorCatch from '@/lib/axios/serverErrorCatch';
 import { IAuthResponse } from '@/lib/axios/instance';
+import calculateDDay from '@/utils/calculateDDay';
 
 RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
 
@@ -232,9 +233,17 @@ async function getServerSidePropsFunction(
     return response.data;
   };
   const recruitingChallenges = await fetchRecruitingChallenges();
+  const enhancedChallenges = recruitingChallenges.map((challenge) => ({
+    ...challenge,
+    dateDiff: {
+      startToToday: calculateDDay(challenge.startDate),
+      startToEnd: calculateDDay(challenge.startDate, challenge.endDate),
+    },
+  }));
+
   return {
     props: {
-      recruitingChallenges,
+      recruitingChallenges: enhancedChallenges,
       isLogined,
     },
   };

src/types/recruitingChallenge.ts

@@ -9,6 +9,10 @@ interface IRecruitingChallenge {
   participantCount: number;
   startDate: string;
   endDate: string;
+  dateDiff: {
+    startToToday: number;
+    startToEnd: number;
+  };
 }
 
 export default IRecruitingChallenge;