✨ feat: 소개 페이지 구현

[junyeokk]

🔨 테스크

Issue

• close [FE] 소개 페이지 구현 #175

컴포넌트 구조 설계

• 페이지를 여러 섹션으로 나누어 모듈화
• 각 섹션(Hero, Feature, ExtraFeature)을 독립적인 컴포넌트로 분리
• 공통 타입과 상수 분리

UI/UX 개선 포인트

• 스크롤 진행 상태를 상단 프로그레스 바로 표시
• useInView 훅을 사용한 섹션별 애니메이션 적용
• 반응형 디자인 적용 (모바일, 태블릿, 데스크톱)
• 짝수/홀수 섹션에 다른 배경색 적용으로 시각적으로 구분되게 함

📋 작업 내용

페이지 레이아웃 구현

• HeroSection: 서비스 메인 타이틀과 소개
• FeatureSection: 주요 기능 소개
• ExtraFeatureSection: 추가 기능 소개
• Footer: 팀 정보 및 프로젝트 링크

스크롤 인터랙션 구현

• 사용자 경험 향상을 위해 두 가지 스크롤 관련 기능 추가

  1. 스크롤 프로그레스 표시

     • useScrollProgress 커스텀 훅 구현
     • 전체 스크롤 대비 현재 위치를 상단에 바로 시각화

  2. 요소별 등장 애니메이션

     • useInView 커스텀 훅으로 뷰포트 진입 감지
     • Intersection Observer API 활용
     • 한 번만 실행되는 애니메이션으로 불필요한 리렌더링 방지

     const { ref, isInView } = useInView<HTMLDivElement>({ once: true });

     • 섹션별로 아래에서 위로 자연스럽게 등장하는 애니메이션 적용

     className={cn(
       "transition-all duration-1000 ease-out",
       isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
     )}

📷 스크린 샷

스크롤 맨 위

Feature 소개

서비스 바로가기

Footer

[jungmyunggi]

p5) 혹시 첫 페이지에 바로가기 버튼이랑 사진 간격 조금만 줄일수있을까요? 너무 공백이 많아보이는 느낌이네요

[jungmyunggi]

코멘트 남긴거 제외하고는 다 괜찮은거 같습니다. 코멘트 남긴것도 준혁님 판단 하에 처리해주세요