Merge pull request #121 from sipe-team/develop

fix: 메인페이지 현황 컴포넌트에 CSR과 skeleton 적용 (resolves both CLS, hydration issue)

Author: ProdMoon

src/components/atoms/Timer/index.tsx

@@ -14,19 +14,19 @@ function Timer({ dates, hours, minutes, seconds, isRecruiting }: Props) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.time}>
-        {isRecruiting ? formattedTime(dates) : 0}
+        {isRecruiting ? formattedTime(dates) : ''}
       </div>
       <div className={styles.text}>일</div>
       <div className={styles.time}>
-        {isRecruiting ? formattedTime(hours) : 0}
+        {isRecruiting ? formattedTime(hours) : ''}
       </div>
       <div className={styles.text}>시간</div>
       <div className={styles.time}>
-        {isRecruiting ? formattedTime(minutes) : 0}
+        {isRecruiting ? formattedTime(minutes) : ''}
       </div>
       <div className={styles.text}>분</div>
       <div className={styles.time}>
-        {isRecruiting ? formattedTime(seconds) : 0}
+        {isRecruiting ? formattedTime(seconds) : ''}
       </div>
       <div className={styles.text}>초</div>
     </div>

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

@@ -1,16 +1,29 @@
 '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 RecruitmentSummarySkeleton from '@/components/organisms/home/RecruitmentSummarySkeleton';
 import useCopy from '@/hook/useCopyToClipboard';
 import { displayApplication, getCurrentStatus } from '@/libs/utils/recruit';
 
 import styles from './index.module.scss';
 
+const now = Date.now();
+
+const RecruitmentSummary = dynamic(
+  () => import('@/components/organisms/home/RecruitmentSummary'),
+  {
+    ssr: false,
+    loading: () => (
+      <RecruitmentSummarySkeleton currentStatus={getCurrentStatus(now)} />
+    ),
+  },
+);
+
 function RecruitmentStatusSection() {
-  const now = Date.now();
   const currentStatus = getCurrentStatus(now);
   const currentApplicationDetail = displayApplication[currentStatus];
   const { copyToClipboard } = useCopy();

src/components/organisms/home/RecruitmentSummarySkeleton/index.module.scss

@@ -0,0 +1,12 @@
+.timerWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .timerDescription {
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: #fff;
+    }
+}

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

@@ -0,0 +1,42 @@
+import Timer from '@/components/atoms/Timer';
+import SummaryCard from '@/components/organisms/home/SummaryCards';
+
+import styles from './index.module.scss';
+
+type Props = {
+  currentStatus: 'before' | 'ongoing' | 'after';
+};
+
+function RecruitmentSummary({ currentStatus }: Props) {
+  const elements = {
+    before: () => (
+      <div className={styles.timerWrapper}>
+        <div className={styles.timerDescription}>모집 시작까지</div>
+        <Timer
+          dates={0}
+          hours={0}
+          minutes={0}
+          seconds={0}
+          isRecruiting={false}
+        />
+      </div>
+    ),
+    ongoing: () => (
+      <div className={styles.timerWrapper}>
+        <div className={styles.timerDescription}>모집 마감까지</div>
+        <Timer
+          dates={0}
+          hours={0}
+          minutes={0}
+          seconds={0}
+          isRecruiting={false}
+        />
+      </div>
+    ),
+    after: () => <SummaryCard />,
+  };
+
+  return elements[currentStatus]();
+}
+
+export default RecruitmentSummary;