Youtube-ari

유튜브(Youtube) 사이트를 클론코딩한 개인 프로젝트.

프로젝트 기간 : 2025.05.29 ~ 2025.08.28

URL : https://youtube-ari.netlify.app/

🎯 구현 목표

• React를 활용한 반응형 웹 제작
• 공공 API 활용 능력 향상
  • YouTube Data API
  • Google 로그인 API
• Tailwind CSS를 이용한 UI 스타일링
• 무한 스크롤 기능 구현

⚒️ 기술 스택

🗂️ 파일 구조

📋구현 기능 & 화면

홈 화면 & 검색 결과 화면

인기 영상 목록 표시 (YouTube Data API)

키워드 검색 결과 표시 (YouTube Data API)

공통 기능 & 동영상 상세 페이지

로딩 스켈레톤 UI (react-loading-skeleton) 무한 스크롤 (react-intersection-observer) 다크/라이트 모드 반응형 레이아웃

Video Player 재생 영상 데이터 표시 영상 설명 영역 + 더보기 / 접기 토글 추천 영상 사이드바

로그인 & 마이페이지

구글 로그인 / 로그아웃 (Firebase) 로그인 상태 전역 관리 (React Context API)

로그인 버튼 (미로그인 상태일 때 노출) 최근 본 영상 기록 (localStorage 기반) 영상 클릭 시 상세 페이지 이동

📌 개선 사항

• 음성 검색 기능
• 홈 화면의 카테고리 필터 기능
• 채널 이미지 미제공 시, 채널명 기반의 이미지 자동 생성 기능