ReelYoon

TMDB API를 활용해 영화 · TV 정보를 조회할 수 있는 토이 프로젝트.

TMDB API 기반으로 영화 · TV 정보 검색, 상세조회, 정렬, 필터링 기능을 제공하는 반응형 콘텐츠 탐색 서비스입니다.

프로젝트 기간 : 2025.10.03 ~ 2025.11.17

URL : https://reelyoon-app.vercel.app/

🎯 구현 목표

• React를 활용한 반응형 웹 제작
• TMDB API를 활용해 영화/TV 콘텐츠를 탐색할 수 있는 웹 서비스 구현
• Skeleton UI와 반응형 레이아웃을 통한 사용자 경험(UX) 개선

⚒️ Skill

🗂️ 파일 구조

📋구현 기능 & 화면

🏠 홈 화면 - 배너	🏠 홈 화면 - 콘텐츠 리스트
- 영화 정보 (Popular)	- 영화/tv 프로그램 정보 (Trending, Top Rated, Popular)

🔍 검색 결과 화면	🔍 콘텐츠 상세 화면
- 페이지네이션 (모바일 5 단위, pc 10 단위) - 탭 전환 (전체, 영화, tv) - 인기/최신/오래된/평점순 정렬	- 감독 및 출연진 정보 (Credits) - 컬렉션 정보 (Collection) - 추천 콘텐츠 정보 (Recommendations)

🗃️ 장르 콘텐츠 화면	📁 전체보기 화면
- 페이지네이션 (모바일 5 단위, pc 10 단위) - 탭 전환 (영화, tv) - 인기/최신/오래된/평점순 정렬	- 페이지네이션 (모바일 5 단위, pc 10 단위) - 탭 전환 (영화, tv)

📺 미디어 화면	📐 반응형 화면
- 해당 탭 미디어 타입의 리스트 렌더링 (Trending, Top Rated, Popular)	- 반응형 UI

▶️ 트레일러 모달창	⬆️ 맨 위로 이동
- 자동재생 & 음소거	- 모든 화면에 적용