- 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;
+};