YouTube Shortener Frontend

YouTube 영상의 heatmap 데이터를 기반으로 인기 구간만 빠르게 탐색하고, 자동 스킵과 임계값 조절로 더 짧게 시청할 수 있게 해 주는 프론트엔드 애플리케이션입니다.

백엔드 레포지토리:

• https://github.com/yuyeol3/youtube-shortener-backend

데모

• URL 입력 후 heatmap 데이터를 불러옵니다.
• 임계값을 조절해 "볼 구간"만 남길 수 있습니다.
• 자동 스킵을 켜면 비인기 구간을 건너뜁니다.
• 공유 링크 또는 PWA 공유 타겟으로 /watch-video?url=... 형태 진입을 지원합니다.

주요 기능

• YouTube URL 기반 heatmap 조회
• 인기 구간 카드형 탐색 UI
• heat threshold 수동 조절
• k-means 기반 자동 threshold 계산
• 재생 중 비인기 구간 자동 점프
• 최근 조회 영상 목록
• 공유용 링크 생성
• PWA manifest 기반 share target 지원

프로젝트 구조

src/
  components/   UI 컴포넌트
  contexts/     전역 메시지 컨텍스트
  pages/        라우트 페이지
  utils/        heatmap/skip/threshold 로직
  consts/       API 경로 상수
public/
  manifest.json PWA 설정

핵심 파일:

• src/pages/WatchVideoPage.jsx: 영상 조회, threshold, player 상태를 오케스트레이션
• src/utils/playerSkipController.js: 현재 재생 시간을 기준으로 자동 스킵 제어
• src/utils/heatmap.js: heat marker를 threshold 기반 구간 큐로 변환
• src/utils/thresholdSchemes.js: 자동 threshold 계산

개발 과정

1. Install

npm install

2. Run frontend

npm run dev

기본 Vite 개발 서버가 실행됩니다.

3. Run backend

백엔드를 별도로 실행해야 /api 요청이 정상 동작합니다.

백엔드 레포:

• https://github.com/yuyeol3/youtube-shortener-backend

현재 프론트엔드는 Vite dev server에서 아래 프록시를 사용합니다.

• /api -> http://localhost:8080

즉, 로컬 개발 기준으로 백엔드는 localhost:8080에서 실행되어야 합니다.

스크립트

• npm run dev: 개발 서버 실행
• npm run build: 프로덕션 빌드
• npm run preview: 빌드 결과 미리보기
• npm run lint: ESLint 실행

경로

• /: 홈
• /about: 소개
• /watch-video: 공유 진입 또는 URL 쿼리 기반 조회
• /watch-video/:vidId: 비디오 ID 기반 조회
• /watch-video/:vidId/:threshold: threshold를 포함한 공유 링크

Share Target

설치된 PWA 환경에서는 Web Share Target을 통해 공유를 받을 수 있습니다.

지원 형태:

• /watch-video?url={shared_url}
• /watch-video?text={shared_text_with_url}

프론트엔드는 url 파라미터를 우선 사용하고, 없으면 text 안에서 URL을 추출해 처리합니다.

빌드

현재 Vite 설정에서 빌드 결과물은 기본 dist/가 아니라 아래 경로로 출력됩니다.

../deploy/frontend

배포 환경에서는 SPA 라우팅을 위해 다음 경로들이 모두 index.html로 리라이트되어야 합니다.

• /
• /about
• /watch-video
• /watch-video/*

기타

• YouTube heatmap 데이터는 백엔드에서 수집/가공된 결과를 사용합니다.
• Chart.js와 yt-player가 포함되어 있어 번들 크기가 비교적 큰 편입니다.