dotory0829 / youtube-api-project

[🦁 FESP 1기] FESP 8 - YouTubeAPI 

📲 배포주소

주소 : YouTube API

📄 목차

1. 서비스 소개
2. 프로젝트 일정
3. 팀 구성
4. 공통 구현 과제
5. 필수 구현 과제
6. 역할 분담
7. 프로젝트 목표
8. 팀 내 규칙 및 준수 사항
9. 개발 환경 및 기술 스택
10. 결과물
11. 시연 영상
12. 프로젝트 소감
13. 프로젝트 사용법

🐶 1. 소개

• 프로젝트 주제 : YouTube 클론코딩

• YouTube API를 활용한 영상재생 사이트

• 기술 과제 안내 문서

  
  
  

⚡ 2. 프로젝트 일정

프로젝트 기간 : 2023년 11월 20일 ~ 2023년 12월 1일

• 1단계 : 11월 20일(월) 오전 9시 ~ 22일(수) 오후 6시
• 2단계 : 11월 23일(목) 오전 9시 - 26일(일) 오후 6시
• 3단계 : 11월 27일(월) 오전 9시 - 12월 1일(금) 오후 5시
  
  

🐾 3. 팀 구성

안태욱	오나영	이규정

4. 공통 구현 과제

1주차

• 여러 팀원이 일한다는 생각으로 동일한 코드 스타일 작성 할 수 있는 환경을 만들어주세요.
  • lint, prettier 설정
  • import 파일 경로는 절대 경로로 설정해주세요.
  • config 설정
  • 제공되는 비디오 데이터를 사용해주세요.
• 영상 목록 페이지
  • popular.json 파일을 사용해서 만들어주세요.
• 영상 상세 페이지
  • 채널의 관련 영상들은 searchByChannels 폴더의 파일을 사용해서 만들어주세요.
• 데이터에 대한 정보는 유튜브 api 문서를 참고하세요.
  • /videos
  • /search?channelId={id}
• 아래 예시 화면을 참고해서 화면을 제작해주세요.
  • 꼭 동일하게 제작하지 않아도 됩니다.
  • 모든 디자인은 자유롭게 구성 가능하며, 스타일 관련 라이브러리는 자유롭게 선택해주세요.

2주차

• 다크 모드를 적용해주세요.
• 애니메이션 효과를 넣어주세요.(ex. 넥플릭스, 왓차 등등)
• 댓글 API는 supabase를 사용합니다.

3주차

• 운영서버(YOUTUBVE)인지 또는 개발서버(json 데이터)에 따라서 실제 youtube API를 사용해서 만들어주세요. (환경변수에 따라 분기처리 IS_DEV , IS_YOUTUBE_API)
• supabase 또한 비슷한 방식으로 처리해주세요. DEV DB와 PROD DB를 나누어주세요.
• 코드 리팩토링를 진행해주세요.

5. 필수 구현 기능

1주차

• 사용자는 비디오 목록을 확인할 수 있다.
• 사용자는 영상을 클릭하면, 해당 영상의 상세 화면으로 이동할 수 있다.
• 사용자는 비디오 상세 정보를 확인할 수 있다.
• 사용자는 관련 비디오 목록을 확인할 수 있다.
• 사용자는 mobile, tablet, pc 환경에서 사용할 수 있다.

2주차

• 영화 목록 페이지
• 사용자는 원하는 영화를 검색할 수 있어요.
  • popular.json의 title 기준으로 검색이 가능합니다.
  • 뒤로가기 시, 영화 검색 내용이 초기화가 되면 안돼요.
• 영화 상세 페이지
• 사용자는 관련 영상 목록이 많아 스크롤하기 불편해요.
  • 관련 영상 목록을 편하게 볼수 있도록 개선해주세요.

3주차

• 사용자에게 UX를 개선하는 로딩 화면/에러 화면을 보여주세요.
  배민서비스 참고
• 사용자는 모든 데이터를 한번에 보는게 아니라, 스크롤을 할 때마다 데이터를 볼 수 있습니다.
  • 대신, 이 라이브러리를 사용하지 않고 직접 구현합니다.
• 사용자가 보는 화면에서만 이미지가 로드 되어야 합니다.
• 스크롤 마다 보여지는 새 영역에서만 이미지가 로드됩니다.

💻 6. 역할 분담

이름	담당 기능
안태욱	메인페이지, 검색 페이지
오나영	상세페이지, 검색 페이지
이규정	메인페이지 배너

🏅 7. 프로젝트 목표

결과보단 과정!

• 완벽한 결과보단 프로젝트 진행하는 과정에서 많은 지식과 경험을 얻어가는 것에 초점을 두기

필수 구현과제 기능 위주

• 필수 구현과제를 우선적으로 하면서 천천히 깨달음을 얻는다.

본 프로젝트 전 워밍업

• 본 프로젝트 진행 전 예비프로젝트로 많은것을 실험해보고 연구하며 지식을 쌓아간다.
  
  

🙇🏻 8. 팀 내 규칙 및 준수 사항

• 커밋 컨벤션

🎃 9. 개발 환경 및 기술 스택

환경

언어

도구

소통

😻 10. 결과물

Dark Mode

• Recoil을 사용하여 상태관리
  
• Dark Mode 사용으로 인한 색상대비 구현
  

메인 페이지

• 호버 시 영상 재생 : 미리보기 구현
  
• 슬라이드 : 메인페이지 배너 슬라이드 기능 구현 및 이미지 레이지 로딩 구현
  
• 무한 스크롤 : 무한 스크롤 기능 구현
  

- Detail 페이지

• 댓글: SupaBase 연동
  
• 관련 영상 불러오기 : 관련 영상 불러오기
  
  

검색 페이지

• 검색 기능 구현
  

• 무한 스크롤 구현
  

• 검색 결과 없을시 안내 페이지 구현
  

  
  
  

404 페이지 및 검색어 없을시 노출 되는 페이지

🎶 11. 시연 영상

🎥 12. 프로젝트 소감

안태욱	8조 화이팅! 1
오나영	8조 화이팅! 2
이규정	8조 화이팅! 3

🦾 13. 프로젝트 사용법

• 패키지 설치

npm i 또는 npm install

• 개발 서버 실행

npm run start

• 운영 서버 실행

npm run prod