[SRLT-127] 랜딩페이지 프로모션 실시간 타이머 설정 구현

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 (
-    <div className="w-full bg-black px-[132px] py-40">
-      <div className="flex w-full flex-row gap-[61px]">
+    <div className="w-full bg-black py-40">
+      <div className="mx-auto flex w-full flex-row items-center justify-center gap-[61px]">
         <div className="flex flex-col gap-[100px]">
           <h2 className="text-[42px] leading-[150%] font-bold text-white">
             2026년 지원사업, <br />
@@ -16,16 +19,22 @@ const LandingChecklist = () => {
 
           <div className="flex flex-col gap-6">
             <p className="ds-title font-semibold text-gray-300">
-              2026 지원사업 대비 모든 기능 무료 프로모션 (~1/10)
+              2026 지원사업 대비 모든 기능 무료 프로모션 (~2/28)
             </p>
 
             <div className="flex flex-row items-start gap-3">
-              {['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) => (
                 <div
-                  key={time}
+                  key={index}
                   className="ds-heading flex h-[86px] w-[120px] items-center justify-center rounded-lg bg-gray-900 py-10 font-semibold text-white"
                 >
-                  {time}
+                  {item.value}
+                  {item.label}
                 </div>
               ))}
             </div>

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