07월 14일 해당 날짜 지날 시 타이머 내용 및 타이머 바뀌도록 수정 (#124)

* Chore: uuid 라이브러리 추가

* Feat: 07월 14일 마감 날짜 지날 시 바로 타이머 내용 바뀌도록 수정

* Fix: 새로고침없이 timer가 지났을 경우 글귀 변경

* Fix: React.FC 제거

* Comment: Hackathon 신청페이지 주석처리

package.json

@@ -76,6 +76,7 @@
         "@types/react-datepicker": "^4.19.5",
         "@types/react-dom": "^18.2.7",
         "@types/react-js-pagination": "^3.0.7",
-        "@types/styled-components": "^5.1.26"
+        "@types/styled-components": "^5.1.26",
+        "@types/uuid": "^10.0.0"
     }
 }

src/Router.tsx

@@ -34,7 +34,7 @@ import ProjectRegisterWrapper from './pages/project/register/ProjectRegisterWrap
 import ProjectUpdateWrapper from './pages/project/update/ProjectUpdateWrapper';
 import UnivRecruit from './pages/univRecruit/UnivRecruit';
 import HackathonPage from './pages/admin/components/hackathon/hackathonPage';
-import HackathonsApplication from './routes/HackathonsApplicationPage';
+// import HackathonsApplication from './routes/HackathonsApplicationPage';
 import HackathonsApplicationPage from './routes/HackathonsModifyPage';
 
 const router = createBrowserRouter([
@@ -189,10 +189,10 @@ const router = createBrowserRouter([
                 path: '*',
                 element: <NotFound />,
             },
-            {
-                path: 'hackathons',
-                element: <HackathonsApplication />,
-            },
+            // {
+            //     path: 'hackathons',
+            //     element: <HackathonsApplication />,
+            // },
             {
                 path: 'hackathons/:hackathonId',
                 element: <HackathonsApplicationPage />,

src/atoms/HackathonDeadline.ts

@@ -0,0 +1,34 @@
+import { atom } from 'recoil';
+import { v1 } from 'uuid';
+
+interface TimeLeft {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+
+export const deadlineTextState = atom<string>({
+    key: `deadlineTextState/${v1()}`,
+    default: '7월 14일 일요일 23시 59분 참가 신청 마감',
+});
+
+export const infoTextState = atom<string>({
+    key: `infoTextState/${v1()}`,
+    default: '참가 신청 마감까지 남은 시간',
+});
+
+export const timeLeftState = atom<TimeLeft>({
+    key: `timeLeftState/${v1()}`,
+    default: {
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+    },
+});
+
+export const deadlineState = atom<string>({
+    key: `deadlineState/${v1()}`,
+    default: '2024-07-14 23:59:59',
+});

src/pages/landing/components/hackathon/HackathonPart.tsx

@@ -2,12 +2,21 @@ import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import arrow from '../../../../img/landing/longrightarrow_s.png';
 import { startTransition } from 'react';
+import dayjs from 'dayjs';
 
 const HackathonPart = () => {
     const navigate = useNavigate();
 
     const handleClick = () => {
         const access_token = localStorage.getItem('access_token');
+
+        const deadline = dayjs('2024-07-14 23:59:59');
+
+        if (dayjs().isAfter(deadline)) {
+            alert('신청 마감되었습니다.');
+            return;
+        }
+
         if (access_token) {
             startTransition(() => {
                 navigate('/hackathons');

src/pages/landing/components/hackathon/HackathonTimer.tsx

@@ -1,49 +1,49 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { styled } from 'styled-components';
+import dayjs from 'dayjs';
+import { useRecoilState } from 'recoil';
+import {
+    deadlineState,
+    timeLeftState,
+} from '../../../../atoms/HackathonDeadline';
+
+const calculateTimeLeft = (deadline: string) => {
+    const now = dayjs();
+    const target = dayjs(deadline);
+    const difference = target.diff(now);
+
+    if (difference <= 0) {
+        return {
+            days: 0,
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+        };
+    }
 
-interface TimeLeft {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-}
-
-const HackathonTimer: React.FC = () => {
-    const deadline = new Date('2024-07-14T23:59:00');
-
-    const calculateTimeLeft = (): TimeLeft => {
-        const now = new Date();
-        const difference = deadline.getTime() - now.getTime();
-        let timeLeft: TimeLeft;
-
-        if (difference > 0) {
-            timeLeft = {
-                days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-                hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
-                minutes: Math.floor((difference / 1000 / 60) % 60),
-                seconds: Math.floor((difference / 1000) % 60),
-            };
-        } else {
-            timeLeft = {
-                days: 0,
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
-            };
-        }
-
-        return timeLeft;
+    return {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
     };
+};
 
-    const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft());
+const HackathonTimer = () => {
+    const [timeLeft, setTimeLeft] = useRecoilState(timeLeftState);
+    const [deadline, setDeadline] = useRecoilState(deadlineState);
 
     useEffect(() => {
         const timer = setInterval(() => {
-            setTimeLeft(calculateTimeLeft());
+            const now = dayjs();
+            if (now.isAfter(dayjs(deadline))) {
+                setDeadline('2024-08-06 14:00:00');
+            }
+            setTimeLeft(calculateTimeLeft(deadline));
         }, 1000);
 
         return () => clearInterval(timer);
-    }, []);
+    }, [deadline, setDeadline, setTimeLeft]);
 
     const formatTime = (time: number): string => {
         return time.toString().padStart(2, '0');
@@ -52,25 +52,15 @@ const HackathonTimer: React.FC = () => {
     return (
         <TimerContainer>
             <DateContainer>
-                <DateBox>
-                    <DateType>DAYS</DateType>
-                    <DateNum>{formatTime(timeLeft.days)}</DateNum>
-                </DateBox>
-                <BlankBox>:</BlankBox>
-                <DateBox>
-                    <DateType>HOURS</DateType>
-                    <DateNum>{formatTime(timeLeft.hours)}</DateNum>
-                </DateBox>
-                <BlankBox>:</BlankBox>
-                <DateBox>
-                    <DateType>MINS</DateType>
-                    <DateNum>{formatTime(timeLeft.minutes)}</DateNum>
-                </DateBox>
-                <BlankBox>:</BlankBox>
-                <DateBox>
-                    <DateType>SECS</DateType>
-                    <DateNum>{formatTime(timeLeft.seconds)}</DateNum>
-                </DateBox>
+                {Object.entries(timeLeft).map(([unit, value]) => (
+                    <React.Fragment key={unit}>
+                        <DateBox>
+                            <DateType>{unit.toUpperCase()}</DateType>
+                            <DateNum>{formatTime(value)}</DateNum>
+                        </DateBox>
+                        {unit !== 'seconds' && <BlankBox>:</BlankBox>}
+                    </React.Fragment>
+                ))}
             </DateContainer>
         </TimerContainer>
     );
@@ -149,6 +139,7 @@ const DateBox = styled.div`
 const DateType = styled.div`
     display: inline-block;
     font-family: Pretendard;
+    color: #d1d4d8;
     font-size: 18px;
     font-style: normal;
     font-weight: 500;

src/pages/landing/components/hackathon/TimeInfo.tsx

@@ -2,16 +2,41 @@ import { styled } from 'styled-components';
 import HackathonTimer from './HackathonTimer';
 
 import notice from '../../../../img/landing/notice.png';
+import dayjs from 'dayjs';
+import { useRecoilState } from 'recoil';
+import {
+    deadlineTextState,
+    infoTextState,
+} from '../../../../atoms/HackathonDeadline';
+import { useEffect } from 'react';
 
 const TimeInfo = () => {
+    const [deadlineText, setDeadlineText] = useRecoilState(deadlineTextState);
+    const [infoText, setInfoText] = useRecoilState(infoTextState);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const currentDate = dayjs();
+            const registrationDeadline = dayjs('2024-07-14 23:59:59');
+
+            if (currentDate.isBefore(registrationDeadline)) {
+                setDeadlineText('7월 14일 일요일 23시 59분 참가 신청 마감');
+                setInfoText('참가 신청 마감까지 남은 시간');
+            } else {
+                setDeadlineText('8월 6일 화요일 ~ 8월 7일 수요일');
+                setInfoText('중앙 해커톤 본선까지 남은 시간');
+            }
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [setDeadlineText, setInfoText]);
+
     return (
         <TimerWrapper>
             <TimerInfo>
                 <NoticeImg src={notice} />
-                <DeadlineInfo>
-                    7월 14일 일요일 23시 59분 참가 신청 마감
-                </DeadlineInfo>
-                <Info>참가 신청 마감까지 남은 시간</Info>
+                <DeadlineInfo>{deadlineText}</DeadlineInfo>
+                <Info>{infoText}</Info>
             </TimerInfo>
             <HackathonTimer />
         </TimerWrapper>