diff --git a/src/app/_components/landing/LandingChecklist.tsx b/src/app/_components/landing/LandingChecklist.tsx index e87109d..ac72c9c 100644 --- a/src/app/_components/landing/LandingChecklist.tsx +++ b/src/app/_components/landing/LandingChecklist.tsx @@ -2,12 +2,15 @@ import Image from 'next/image'; import ArrowIcon from '@/assets/icons/chevron_right.svg'; import { useRouter } from 'next/navigation'; +import { useCountdown } from '@/hooks/useCountdown'; const LandingChecklist = () => { const router = useRouter(); + const timeLeft = useCountdown('2026-02-28T23:59:59'); + return ( -
-
+
+

2026년 지원사업,
@@ -16,16 +19,22 @@ const LandingChecklist = () => {

- 2026 지원사업 대비 모든 기능 무료 프로모션 (~1/10) + 2026 지원사업 대비 모든 기능 무료 프로모션 (~2/28)

- {['10일', '4시간', '19분', '20초'].map((time) => ( + {[ + { value: timeLeft.days, label: '일' }, + { value: timeLeft.hours, label: '시간' }, + { value: timeLeft.minutes, label: '분' }, + { value: timeLeft.seconds, label: '초' }, + ].map((item, index) => (
- {time} + {item.value} + {item.label}
))}
diff --git a/src/hooks/useCountdown.ts b/src/hooks/useCountdown.ts new file mode 100644 index 0000000..ea9b1bc --- /dev/null +++ b/src/hooks/useCountdown.ts @@ -0,0 +1,39 @@ +import { useState, useEffect } from 'react'; + +const calculateTimeLeft = (targetDate: string) => { + if (typeof window === 'undefined') { + return { days: 0, hours: 0, minutes: 0, seconds: 0 }; + } + + const target = new Date(targetDate).getTime(); + const now = Date.now(); + const diff = target - now; + + if (diff > 0) { + return { + days: Math.floor(diff / (1000 * 60 * 60 * 24)), + hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), + minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)), + seconds: Math.floor((diff % (1000 * 60)) / 1000), + }; + } + + return { days: 0, hours: 0, minutes: 0, seconds: 0 }; +}; + +export const useCountdown = (targetDate: string) => { + const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(targetDate)); + + useEffect(() => { + const updateTimer = () => { + setTimeLeft(calculateTimeLeft(targetDate)); + }; + + updateTimer(); + const interval = setInterval(updateTimer, 1000); + + return () => clearInterval(interval); + }, [targetDate]); + + return timeLeft; +};