[FE][FEAT] 비디오 자동 전환 애니메이션 구현

[pillow12360]

비디오 자동 전환 애니메이션 구현

목표

연속적인 슬라이드 전환을 지원하는 비디오 배너 시스템 구현

핵심 구현사항

1. 비디오 슬라이더 컴포넌트

• CSS transform 기반 연속 슬라이드 전환 구현
• 비디오 자동재생 및 음소거 처리
• 반응형 레이아웃 지원

2. 인터랙션 기능

• 좌우 네비게이션 버튼
• 마우스 호버시 자동재생 일시정지
• 드래그 제스처 지원
• 자동 슬라이드 기능
  • 설정 가능한 전환 간격 (기본값: 5000ms)
  • 마우스 호버시 일시정지
  • 마지막 슬라이드에서 처음으로 자연스러운 순환

3. 애니메이션 처리

• translateX 기반 슬라이드 전환
• 비디오 전환시 페이드 효과
• 부드러운 전환을 위한 타이밍 조정

4. 성능 최적화

• 비디오 프리로딩 구현
• 불필요한 리렌더링 방지
• 메모리 누수 방지

기술 스택

• React
• styled-components
• Framer Motion

자동 슬라이드 로직

useEffect(() => {
  if (!isPaused && autoPlayInterval) {
    const interval = setInterval(() => {
      if (currentIndex >= maxIndex) {
        setCurrentIndex(0); // 처음으로 순환
      } else {
        handleNext();
      }
    }, autoPlayInterval);

    return () => clearInterval(interval);
  }
}, [currentIndex, maxIndex, isPaused, autoPlayInterval]);

Props 인터페이스

interface VideoBannerProps {
  videos: Array<{
    id: string;
    src: string;
    title: string[];
  }>;
  autoPlayInterval?: number;
}

참고사항

• NewsSlider 컴포넌트의 슬라이드 로직 재사용
• 비디오 전환시 부드러운 UX 고려
• 모바일 환경 대응 필수