[SRLT-142] 랜딩페이지 반응형 수정

src/app/_components/common/Header.tsx

@@ -20,7 +20,7 @@ const Header = () => {
   const [openLogin, setOpenLogin] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isMobileLoginOpen, setIsMobileLoginOpen] = useState(false);
-  const [isMobileAlertOpen, setIsMobileAlertOpen] = useState(false);
+  const [mobileAlertType, setMobileAlertType] = useState<'business' | 'price' | null>(null);
   const { isAuthenticated, checkAuth, logout } = useAuthStore();
   const router = useRouter();
   const { user, fetchUser, clearUser } = useUserStore();
@@ -110,7 +110,7 @@ const Header = () => {
   const handleNavClick = (e: React.MouseEvent) => {
     if (window.innerWidth < 1024) {
       e.preventDefault();
-      setIsMobileAlertOpen(true);
+      setMobileAlertType('business');
     }
   };
 
@@ -171,7 +171,7 @@ const Header = () => {
                     onClick={(e) => {
                       if (window.innerWidth < 1024) {
                         e.preventDefault();
-                        setIsMobileAlertOpen(true);
+                        setMobileAlertType('business');
                       } else if (!isAuthenticated) {
                         e.preventDefault();
                         setOpenLogin(true);
@@ -184,7 +184,7 @@ const Header = () => {
                     type="button"
                     onClick={() => {
                       if (window.innerWidth < 1024) {
-                        setIsMobileAlertOpen(true);
+                        setMobileAlertType('price');
                       } else if (!isAuthenticated) {
                         setOpenLogin(true);
                       } else {
@@ -207,7 +207,6 @@ const Header = () => {
                     ? 'text-white'
                     : 'text-gray-900'
                   }`}
-                onClick={handleNavClick}
               >
                 전문가
               </Link>
@@ -219,7 +218,12 @@ const Header = () => {
                     ? 'text-white'
                     : 'text-gray-900'
                   }`}
-                onClick={handleNavClick}
+                onClick={(e) => {
+                  if (window.innerWidth < 1024) {
+                    e.preventDefault();
+                    setMobileAlertType('price');
+                  }
+                }}
               >
                 요금제
               </Link>
@@ -339,7 +343,7 @@ const Header = () => {
           <button
             type="button"
             className={mobileNavLink}
-            onClick={() => setIsMobileAlertOpen(true)}
+            onClick={() => setMobileAlertType('business')}
           >
             사업계획서
           </button>
@@ -358,7 +362,7 @@ const Header = () => {
           <button
             type="button"
             className={mobileNavLink}
-            onClick={() => setIsMobileAlertOpen(true)}
+            onClick={() => setMobileAlertType('price')}
           >
             요금제
           </button>
@@ -397,8 +401,9 @@ const Header = () => {
 
       {/* Mobile Nav Alert Modal */}
       <MobileNavAlertModal
-        open={isMobileAlertOpen}
-        onClose={() => setIsMobileAlertOpen(false)}
+        open={mobileAlertType !== null}
+        onClose={() => setMobileAlertType(null)}
+        showBackground={mobileAlertType === 'business'}
       />
     </>
   );

src/app/_components/common/MobileNavAlertModal.tsx

@@ -1,17 +1,41 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import ErrorIcon from '@/assets/icons/error.svg';
 
 type MobileNavAlertModalProps = {
   open: boolean;
   onClose: () => void;
+  showBackground?: boolean;
 };
 
-const MobileNavAlertModal = ({ open, onClose }: MobileNavAlertModalProps) => {
+const MobileNavAlertModal = ({ open, onClose, showBackground = false }: MobileNavAlertModalProps) => {
   if (!open) return null;
 
   return (
     <div className="fixed inset-0 z-[200] lg:[display:none]">
+      {showBackground && (
+        <>
+          <Image
+            src="/images/bussiness_mobile.png"
+            alt="사업계획서 배경"
+            fill
+            className="object-cover md:hidden"
+            quality={100}
+            unoptimized
+            priority
+          />
+          <Image
+            src="/images/bussiness_tablet.png"
+            alt="사업계획서 배경"
+            fill
+            className="hidden object-cover md:block"
+            quality={100}
+            unoptimized
+            priority
+          />
+        </>
+      )}
       <div
         className="absolute inset-0 bg-black/20"
         onClick={onClose}
@@ -25,8 +49,8 @@ const MobileNavAlertModal = ({ open, onClose }: MobileNavAlertModalProps) => {
               PC환경에서 서비스를 이용해주세요
             </p>
             <div className="flex flex-col items-center text-[14px] font-medium leading-[1.5] text-gray-600">
-              <p>모바일 환경에서는 지원되지 않습니다.</p>
-              <p>안정적인 경험을 위해 데스크탑 환경을 권장해요!</p>
+              <p>해당 기능은 모바일을 지원하지 않아요.</p>
+              <p>데스크탑에서 접속해주세요.</p>
             </div>
           </div>
           <button

src/app/_components/landing/Landing.tsx

@@ -14,6 +14,7 @@ const Landing = () => {
   const router = useRouter();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const [alertShowBackground, setAlertShowBackground] = useState(false);
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const { isAuthenticated, checkAuth } = useAuthStore();
 
@@ -38,6 +39,7 @@ const Landing = () => {
             className="bg-primary-500 ds-subtext hover:bg-primary-600 active:bg-primary-700 h-[44px] w-full cursor-pointer rounded-full px-6 font-medium text-white md:ds-text md:h-[50px] md:w-[220px] md:px-8"
             onClick={() => {
               if (window.innerWidth < 1024) {
+                setAlertShowBackground(true);
                 setIsAlertOpen(true);
               } else if (isAuthenticated) {
                 router.push('/business');
@@ -52,6 +54,7 @@ const Landing = () => {
             className="ds-subtext h-[44px] w-full cursor-pointer rounded-full bg-white px-6 font-semibold text-gray-900 hover:bg-gray-100 active:bg-gray-200 md:ds-text md:h-[50px] md:w-auto md:px-8"
             onClick={() => {
               if (window.innerWidth < 1024) {
+                setAlertShowBackground(false);
                 setIsAlertOpen(true);
               } else if (isAuthenticated) {
                 setIsModalOpen(true);
@@ -87,6 +90,7 @@ const Landing = () => {
       <MobileNavAlertModal
         open={isAlertOpen}
         onClose={() => setIsAlertOpen(false)}
+        showBackground={alertShowBackground}
       />
 
       <StickyBar show={showSticky} />

src/app/_components/landing/LandingChecklist.tsx

@@ -70,7 +70,7 @@ const LandingChecklist = () => {
           unoptimized={true}
         />
       </div>
-      <MobileNavAlertModal open={isAlertOpen} onClose={() => setIsAlertOpen(false)} />
+      <MobileNavAlertModal open={isAlertOpen} onClose={() => setIsAlertOpen(false)} showBackground />
     </div>
   );
 };

src/app/_components/landing/LandingPaySection.tsx

@@ -140,6 +140,7 @@ const LandingPaySection = () => {
       <MobileNavAlertModal
         open={isAlertOpen}
         onClose={() => setIsAlertOpen(false)}
+        showBackground
       />
 
       <div className="mt-[30px] flex flex-col px-2 md:mt-12 lg:mt-12 lg:px-0">

src/hooks/useCountdown.ts

@@ -1,10 +1,6 @@
 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;
@@ -21,10 +17,14 @@ const calculateTimeLeft = (targetDate: string) => {
   return { days: 0, hours: 0, minutes: 0, seconds: 0 };
 };
 
+const initialTimeLeft = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+
 export const useCountdown = (targetDate: string) => {
-  const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(targetDate));
+  const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
     const updateTimer = () => {
       setTimeLeft(calculateTimeLeft(targetDate));
     };
@@ -35,5 +35,7 @@ export const useCountdown = (targetDate: string) => {
     return () => clearInterval(interval);
   }, [targetDate]);
 
+  if (!mounted) return initialTimeLeft;
+
   return timeLeft;
 };