fix: resolved CLS issue at the main page RecruitmentStatus

Author: ProdMoon

src/components/organisms/home/RecruitmentStatusSection/index.tsx

@@ -1,20 +1,14 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-
 import { sendGAEvent } from '@next/third-parties/google';
 
 import Button from '@/components/molecules/Button';
+import RecruitmentSummary from '@/components/organisms/home/RecruitmentSummary';
 import useCopy from '@/hook/useCopyToClipboard';
 import { displayApplication, getCurrentStatus } from '@/libs/utils/recruit';
 
 import styles from './index.module.scss';
 
-const RecruitmentSummary = dynamic(
-  () => import('@/components/organisms/home/RecruitmentSummary'),
-  { ssr: false },
-);
-
 function RecruitmentStatusSection() {
   const now = Date.now();
   const currentStatus = getCurrentStatus(now);

src/components/organisms/home/RecruitmentSummary/index.tsx

@@ -10,34 +10,41 @@ type Props = {
 };
 
 function RecruitmentSummary({ currentStatus }: Props) {
-  const isRecruiting = currentStatus !== 'after';
   const currentApplicationDetail = displayApplication[currentStatus];
-
   const { dates, hours, minutes, seconds } = useTimer(
     currentApplicationDetail?.dueDate,
-    isRecruiting ? 1000 : null,
+    1000,
   );
 
-  return (
-    <>
-      {currentStatus === 'after' ? (
-        <SummaryCard />
-      ) : (
-        <div className={styles.timerWrapper}>
-          <div className={styles.timerDescription}>
-            {currentStatus === 'before' ? '모집 시작까지' : '모집 마감까지'}
-          </div>
-          <Timer
-            dates={dates}
-            hours={hours}
-            minutes={minutes}
-            seconds={seconds}
-            isRecruiting={isRecruiting}
-          />
-        </div>
-      )}
-    </>
-  );
+  const elements = {
+    before: () => (
+      <div className={styles.timerWrapper}>
+        <div className={styles.timerDescription}>모집 시작까지</div>
+        <Timer
+          dates={dates}
+          hours={hours}
+          minutes={minutes}
+          seconds={seconds}
+          isRecruiting={true}
+        />
+      </div>
+    ),
+    ongoing: () => (
+      <div className={styles.timerWrapper}>
+        <div className={styles.timerDescription}>모집 마감까지</div>
+        <Timer
+          dates={dates}
+          hours={hours}
+          minutes={minutes}
+          seconds={seconds}
+          isRecruiting={true}
+        />
+      </div>
+    ),
+    after: () => <SummaryCard />,
+  };
+
+  return elements[currentStatus]();
 }
 
 export default RecruitmentSummary;