diff --git a/public/images/landing/landing_mobile.png b/public/images/landing/landing_mobile.png new file mode 100644 index 0000000..14435ae Binary files /dev/null and b/public/images/landing/landing_mobile.png differ diff --git a/public/images/landing/landing_tablet.png b/public/images/landing/landing_tablet.png new file mode 100644 index 0000000..00ee648 Binary files /dev/null and b/public/images/landing/landing_tablet.png differ diff --git a/src/app/_components/common/Header.tsx b/src/app/_components/common/Header.tsx index d9b61c6..50fe38c 100644 --- a/src/app/_components/common/Header.tsx +++ b/src/app/_components/common/Header.tsx @@ -5,6 +5,10 @@ import Logo from '@/assets/icons/logo.svg'; import React, { useState, useEffect } from 'react'; import UploadReportModal from './UploadReportModal'; import LoginModal from './LoginModal'; +import MobileLoginScreen from './MobileLoginScreen'; +import MobileNavAlertModal from './MobileNavAlertModal'; +import MenuIcon from '@/assets/icons/menu.svg'; +import CloseIcon from '@/assets/icons/close_white.svg'; import { useAuthStore } from '@/store/auth.store'; import { useUserStore } from '@/store/user.store'; import Image from 'next/image'; @@ -14,6 +18,9 @@ const Header = () => { const [isProfileOpen, setIsProfileOpen] = useState(false); const [openUpload, setOpenUpload] = useState(false); const [openLogin, setOpenLogin] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [isMobileLoginOpen, setIsMobileLoginOpen] = useState(false); + const [isMobileAlertOpen, setIsMobileAlertOpen] = useState(false); const { isAuthenticated, checkAuth, logout } = useAuthStore(); const router = useRouter(); const { user, fetchUser, clearUser } = useUserStore(); @@ -45,6 +52,18 @@ const Header = () => { return () => window.removeEventListener('click', handleClickOutside); }, [isProfileOpen]); + // 모바일 메뉴 열릴 때 스크롤 방지 + useEffect(() => { + if (isMobileMenuOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => { + document.body.style.overflow = ''; + }; + }, [isMobileMenuOpen]); + // /business 경로에서는 헤더 숨김 if (pathname.startsWith('/business')) { return null; @@ -67,8 +86,7 @@ const Header = () => { 'ds-text px-2 font-medium transition-colors hover:text-primary-500 hover:font-semibold group-hover/nav:text-primary-500 group-hover/nav:font-semibold focus:outline-none'; const menuList = 'invisible opacity-0 scale-95 absolute left-1/2 z-20 mt-3 w-[100px] -translate-x-1/2 overflow-hidden ' + - 'rounded-[8px] bg-white shadow-[0_0_10px_0_rgba(0,0,0,0.10)] transition-all duration-150 ease-in-out ' + - 'group-hover/nav:visible group-hover/nav:opacity-100 group-hover/nav:scale-100'; + 'rounded-[8px] bg-white shadow-[0_0_10px_0_rgba(0,0,0,0.10)] transition-all duration-150 ease-in-out'; const handleAuthClick = () => { if (isAuthenticated) { @@ -84,164 +102,302 @@ const Header = () => { setIsProfileOpen(false); }; - return ( -
-
-
- - - - Starlight - - + const handleMobileLoginClick = () => { + setIsMobileMenuOpen(false); + setIsMobileLoginOpen(true); + }; - -
- -
- {isAuthenticated ? ( -
-
setIsProfileOpen(!isProfileOpen)} - className="flex cursor-pointer items-center justify-center rounded-full" - > - {user?.profileImageUrl ? ( - {user.name} - ) : ( - - {user?.name?.charAt(0)} - - )} -
- - {isProfileOpen && ( -
+
setIsProfileOpen(false)} - className="ds-subtext hover:bg-primary-50 block px-[12px] py-[8px] font-medium text-gray-900 transition-colors" + href="/business" + className={dropdownItem} + role="menuitem" + onClick={(e) => { + if (window.innerWidth < 1024) { + e.preventDefault(); + setIsMobileAlertOpen(true); + } else if (!isAuthenticated) { + e.preventDefault(); + setOpenLogin(true); + } + }} > - 마이페이지 + 작성하기
+
+ + + 전문가 + + + 요금제 + + +
+ + {/* Right side */} +
+ {/* Desktop Auth */} +
+ {isAuthenticated ? ( +
+
setIsProfileOpen(!isProfileOpen)} + className="flex cursor-pointer items-center justify-center rounded-full" + > + {user?.profileImageUrl ? ( + {user.name} + ) : ( + + {user?.name?.charAt(0)} + + )} +
+ + {isProfileOpen && ( +
+ setIsProfileOpen(false)} + className="ds-subtext hover:bg-primary-50 block px-[12px] py-[8px] font-medium text-gray-900 transition-colors" + > + 마이페이지 + + +
+ )} +
+ ) : ( + )}
+ + {/* Mobile Hamburger Button */} + +
+
+ setOpenUpload(false)} + /> + setOpenLogin(false)} /> +
+ + {/* Mobile Menu Full-Screen Overlay */} +
+ {/* Mobile Menu Header */} +
+ setIsMobileMenuOpen(false)} + > + + + Starlight + + + +
+ + {/* Mobile Menu Navigation */} +
- setOpenUpload(false)} + + {/* Mobile Full-Screen Login */} + setIsMobileLoginOpen(false)} + /> + + {/* Mobile Nav Alert Modal */} + setIsMobileAlertOpen(false)} /> - setOpenLogin(false)} /> - + ); }; diff --git a/src/app/_components/common/LoginModal.tsx b/src/app/_components/common/LoginModal.tsx index c7f5894..eff5d9d 100644 --- a/src/app/_components/common/LoginModal.tsx +++ b/src/app/_components/common/LoginModal.tsx @@ -52,7 +52,7 @@ const LoginModal = ({ open, onClose }: LoginModalProps) => { onClick={onClose} aria-hidden="true" /> -
+
+ + {/* Content */} +
+
+ + +
+

+ 로그인/회원가입 +

+

+ 로그인 후 스타라이트의 모든 기능을 이용하세요 +

+
+ +
+
+

+ 서비스 이용약관에 동의합니다.{' '} + + (약관 보기) + +

+ {agreeToTerms1 ? ( +
setAgreeToTerms1(false)} + > + +
+ ) : ( +
setAgreeToTerms1(true)} + /> + )} +
+
+

+ 개인정보 처리방침에 동의합니다.{' '} + + (약관 보기) + +

+ {agreeToTerms2 ? ( +
setAgreeToTerms2(false)} + > + +
+ ) : ( +
setAgreeToTerms2(true)} + /> + )} +
+
+ +
+ + + +
+
+
+
+ ); +}; + +export default MobileLoginScreen; diff --git a/src/app/_components/common/MobileNavAlertModal.tsx b/src/app/_components/common/MobileNavAlertModal.tsx new file mode 100644 index 0000000..e534831 --- /dev/null +++ b/src/app/_components/common/MobileNavAlertModal.tsx @@ -0,0 +1,45 @@ +'use client'; +import React from 'react'; +import ErrorIcon from '@/assets/icons/error.svg'; + +type MobileNavAlertModalProps = { + open: boolean; + onClose: () => void; +}; + +const MobileNavAlertModal = ({ open, onClose }: MobileNavAlertModalProps) => { + if (!open) return null; + + return ( +
+ + ); +}; + +export default MobileNavAlertModal; diff --git a/src/app/_components/landing/Landing.tsx b/src/app/_components/landing/Landing.tsx index 80e176c..c80626b 100644 --- a/src/app/_components/landing/Landing.tsx +++ b/src/app/_components/landing/Landing.tsx @@ -21,16 +21,19 @@ const Landing = () => { return ( <> -
-

막막한 사업계획서 작성,

-

스타라이트와 함께 하세요

-
+
+

+ 막막한 사업계획서 작성, +
+ 스타라이트와 함께 하세요 +

+
AI와 전문가가 함께하는 사업계획서 플랫폼
-
+
- -
+
홈화면 이미지 diff --git a/src/app/_components/landing/LandingBlackSection.tsx b/src/app/_components/landing/LandingBlackSection.tsx index 5ac32db..c86d7b7 100644 --- a/src/app/_components/landing/LandingBlackSection.tsx +++ b/src/app/_components/landing/LandingBlackSection.tsx @@ -4,16 +4,18 @@ import React from 'react'; const LandingBlackSection = () => { return (
-
-
+ {/* 항목별 체크리스트 */} +
+
항목별 체크리스트{' '}
-
- 심사위원의 관점에서 구성된 항목별 체크리스트 +
+ 심사위원의 관점에서 구성된
항목별 체크리스트
-
- 정량·정성 평가 요소를 기반으로 한 실전형 진단 가이드 +
+ 정량·정성 평가 요소를 기반으로 한{' '} + 실전형 진단 가이드
{ alt="홈화면 이미지" width={912} height={593} - className="mt-[60px] h-auto w-full max-w-[912px]" + className="mt-8 h-auto w-full max-w-[912px] md:mt-10 lg:mt-[60px]" priority unoptimized={true} />
-
-
+ {/* 맞춤형 피드백 */} +
+
맞춤형 피드백{' '}
-
- 내 사업계획서에 딱 맞춘 피드백 제공 +
+ 내 사업계획서에
딱 맞춘 피드백 제공
-
- AI 진단 기반으로 내 사업계획서의 강·약점을 정확하게 분석 +
+ AI 진단 기반으로 내 사업계획서의 강·약점을 정확하게 분석
{ alt="피드백 이미지" width={1124} height={651} - className="mt-[60px] h-auto w-full" + className="mt-8 h-auto w-full md:mt-10 lg:mt-[60px]" priority quality={100} unoptimized={true} />
-
-
+ {/* 전문가 연결 */} +
+
전문가 연결{' '}
-
- 현 심사위원들의 시선을 반영해 실전에서 통하는 리포트 완성 +
+ 현 심사위원들의 시선을 반영해
실전에서 통하는 리포트 완성
-
+
+ 전문가 피드백을 통한 개선 방향 제시 +
+
검증된 전문가에게 직접 피드백을 받아 개선 방향을 명확히 제시
-
+
랜딩 전문가 이미지 { alt="랜딩 전문가 이미지" width={1176} height={200} - className="h-auto max-w-[1176px]" + className="h-auto w-full max-w-[1176px]" style={{ height: 'auto' }} priority unoptimized={true} @@ -90,7 +97,7 @@ const LandingBlackSection = () => { alt="랜딩 전문가 이미지" width={1176} height={200} - className="h-auto max-w-[1176px]" + className="h-auto w-full max-w-[1176px]" style={{ height: 'auto' }} priority unoptimized={true} diff --git a/src/app/_components/landing/LandingChecklist.tsx b/src/app/_components/landing/LandingChecklist.tsx index ac72c9c..73d660b 100644 --- a/src/app/_components/landing/LandingChecklist.tsx +++ b/src/app/_components/landing/LandingChecklist.tsx @@ -1,6 +1,7 @@ 'use client'; import Image from 'next/image'; import ArrowIcon from '@/assets/icons/chevron_right.svg'; +import ArrowSmallIcon from '@/assets/icons/arrow_right_small.svg'; import { useRouter } from 'next/navigation'; import { useCountdown } from '@/hooks/useCountdown'; @@ -9,20 +10,20 @@ const LandingChecklist = () => { const timeLeft = useCountdown('2026-02-28T23:59:59'); return ( -
-
-
-

+
+
+
+

2026년 지원사업,
사업계획서에서 탈락하지 않게 만드는 방법

-
-

+

+

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

-
+
{[ { value: timeLeft.days, label: '일' }, { value: timeLeft.hours, label: '시간' }, @@ -31,7 +32,7 @@ const LandingChecklist = () => { ].map((item, index) => (
{item.value} {item.label} @@ -39,11 +40,12 @@ const LandingChecklist = () => { ))}
@@ -53,7 +55,7 @@ const LandingChecklist = () => { alt="프로모션 이미지" width={479} height={412} - className="h-[412px] w-[479px]" + className="hidden h-auto w-full max-w-[360px] lg:block lg:h-[412px] lg:w-[479px] lg:max-w-none" priority quality={100} unoptimized={true} diff --git a/src/app/_components/landing/LandingPaySection.tsx b/src/app/_components/landing/LandingPaySection.tsx index 0af2b37..4241988 100644 --- a/src/app/_components/landing/LandingPaySection.tsx +++ b/src/app/_components/landing/LandingPaySection.tsx @@ -2,7 +2,9 @@ import Check from '@/assets/icons/big_check.svg'; import BCheck from '@/assets/icons/black_check.svg'; import RightIcon from '@/assets/icons/white_right.svg'; +import ArrowWhiteSmall from '@/assets/icons/arrow_white_small.svg'; import Polygon from '@/assets/icons/polygon.svg'; +import PolygonSmall from '@/assets/icons/polygon_small.svg'; import { useRouter } from 'next/navigation'; import { useState, useEffect } from 'react'; import LoginModal from '../common/LoginModal'; @@ -17,76 +19,91 @@ const LandingPaySection = () => { checkAuth(); }, [checkAuth]); return ( -
-
- +
+
+ 멘토링 비용{' '} - - 30만 원짜리 멘토링, 80% 비용 - 절감 + + 30만 원짜리 멘토링, +
+ 80% 비용 절감 - + + 시간당 30만원이던 멘토링을 비대면 구조로 +
+ 전환해 비용을 합리적으로 개선 + + 시간당 30만원이던 멘토링을 비대면 구조로 전환해 비용을 합리적으로 만들었어요.
-
-
-
-

+

+
+
+

시간당 대면 멘토링

-
-

+

+

300,000원 - + / 1회

-
+
-

- 전문가 비대면 멘토링 1회 +

+ 전문가 대면 멘토링 1회

-
-
  • 멘토의 사전 문서 검토 부족으로 인한 시간 소요
    • +
    +
  • 멘토의 사전 문서 검토 부족
  • 멘토링 시간 대비 핵심 피드백 시간 부족
    • -
  • 높은 비용 대비 얻는 피드백의 효율이 낮음
    • +
  • 높은 비용 대비 얻는 피드백의 낮은 퀄리티
    • - -
    -
    -

    +

    + +
    +
    + +
    + +
    +
    +

    스타라이트의 비대면 멘토링

    -
    -

    +

    +

    0원 - - / 1회 49,000원 + + / 1회{' '} + 49,000원

    -
    +
    -

    전문가 비대면 멘토링 1회

    +

    + 전문가 대면 멘토링 1회 +

    -
    +
  • 사업계획서 PDF/텍스트 기반 심층 검토
  • 강·약점 구체 코멘트
  • AI 리포트 무제한 포함
    • @@ -96,7 +113,7 @@ const LandingPaySection = () => {
    { onClose={() => setIsLoginModalOpen(false)} /> -
    -

    +

    +

    *전문가 대면 멘토링 평균 약 30만 원 수준에서 구조 개선을 통해 최대 약 4.9만 원대까지 절감했습니다.

    -

    +

    *전문가 대면 멘토링 평균 비용은 1시간 기준 일반적인 시장 시세를 참고하였습니다.

    diff --git a/src/app/_components/landing/LandingRelation.tsx b/src/app/_components/landing/LandingRelation.tsx index b431e85..556617f 100644 --- a/src/app/_components/landing/LandingRelation.tsx +++ b/src/app/_components/landing/LandingRelation.tsx @@ -39,21 +39,36 @@ const LandingRelation = () => { return (
    + {/* Mobile */} + 랜딩 관련기관 + {/* Tablet */} + 랜딩 관련기관 + {/* Desktop */} 랜딩 관련기관 - -
    -
    +
    +
    관련 기관
    -
      +
        {logos.map((logo) => (
      • { aria-label={`${logo.alt} 공식 사이트로 이동 (새 창)`} className="block" > -
        +
        {logo.alt}
        diff --git a/src/app/_components/landing/StickyBar.tsx b/src/app/_components/landing/StickyBar.tsx index 5e15984..7b6709b 100644 --- a/src/app/_components/landing/StickyBar.tsx +++ b/src/app/_components/landing/StickyBar.tsx @@ -22,14 +22,14 @@ const StickyBar = ({ show }: StickyBarProps) => { return ( <>