Merge pull request #115 from sipe-team/feat/main-for-4th

Feat/main for 4th

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.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/RecruitmentSummary/index.tsx

@@ -3,34 +3,48 @@ import SummaryCard from '@/components/organisms/home/SummaryCards';
 import useTimer from '@/hook/useTimer';
 import { displayApplication } from '@/libs/utils/recruit';
 
+import styles from './index.module.scss';
+
 type Props = {
   currentStatus: 'before' | 'ongoing' | 'after';
 };
 
 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 />
-      ) : (
+  const elements = {
+    before: () => (
+      <div className={styles.timerWrapper}>
+        <div className={styles.timerDescription}>모집 시작까지</div>
         <Timer
           dates={dates}
           hours={hours}
           minutes={minutes}
           seconds={seconds}
-          isRecruiting={isRecruiting}
+          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;

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

@@ -2,8 +2,8 @@ import styles from './index.module.scss';
 
 const summaryData = [
   { title: '누적 지원자 수', value: '400+' },
-  { title: '총 참여자 수', value: '60+' },
-  { title: '누적 미션 수', value: '30+' },
+  { title: '총 참여자 수', value: '101' },
+  { title: '누적 미션 수', value: '51' },
 ];
 
 function SummaryCards() {

src/libs/constants/recruit.ts

@@ -1,10 +1,10 @@
-export const CURRENT_GENERATION = 3;
-export const APPLICATION_START_DATE = new Date('2024-09-08 00:00:00');
-export const APPLICATION_DUE_DATE = new Date('2024-09-22 23:59:59');
+export const CURRENT_GENERATION = 4;
+export const APPLICATION_START_DATE = new Date('2025-03-11 00:00:00');
+export const APPLICATION_DUE_DATE = new Date('2025-03-23 23:59:59');
 
-export const JOIN_FORM_URL = 'https://forms.gle/D1ZsAb48whk1HB8J7';
-export const JOIN_ALARM_FORM_URL = 'https://forms.gle/K2DiBkmJbhSM7MAx9';
-export const JOIN_NEXT_ALARM_FORM_URL = 'https://forms.gle/vgvMiG2pkoJvWfbZA';
+export const JOIN_FORM_URL = 'https://forms.gle/SPM3xXTVrnvupcLDA';
+export const JOIN_ALARM_FORM_URL = 'https://forms.gle/q9wdvKhEyZmTZGS97';
+export const JOIN_NEXT_ALARM_FORM_URL = 'https://forms.gle/VS7Ap4xfSyf2qYqQ6';
 
 export const Applicants = [
   {