[ FEPS 1기 🦁 | 1조 Team477 | 유튜브 클론 프로젝트]

Team477 소개

신은수	윤태현	이보경

목차

1. 목표
2. 프로젝트 소개
   • 개발기간
   • 프로젝트 사용법
3. 기술 스택
4. 화면 구성
5. 주요 기능
6. 컨벤션
7. 디렉토리 구조

1. 목표

• Zustand, TanstackQuery 등 익숙하지 않은 라이브러리 사용 경험
• 운영서버(YOUTUBE)인지 또는 개발서버(json 데이터)에 따라 개발
• 댓글 기능 구현 시 백엔드 없이 Supabase를 사용하여 DB 연동

2. 프로젝트 소개

Zustand, TanstackQuery, Supabase, YouTube Data API 를 활용하여 동영상 시청이 가능한 반응형 웹 사이트 제작

🔗 477Tube 테스트 하러가기

개발 기간

• 1차 개발 : 2023년 11월 20일(월) ~ 2023년 11월 22일(수)
• 2차 개발 : 2023년 11월 23일(목) ~ 2023년 11월 26일(일)
• 3차 개발 : 2023년 11월 27일(월) ~ 2023년 12월 01일(금)

프로젝트 사용법

• 구동법

  $ git clone https://github.com/FESP-TEAM-1/final-project.git
  $ cd final-project
  $ npm install
  $ npm start
  

• .env.develop / .env.production

  REACT_APP_SUPABASE_PROJECT_ID=
  REACT_APP_SUPABASE_PROJECT_API_KEY=REACT_APP_SUPABASE_PROJECT_API_KEY=
  REACT_APP_YOUTUBE_PROJECT_API_KEY=
  

3. 기술 스택

Environment

Package Manager

Development

Communication

4. 화면 구성

[메인페이지]	[상세페이지]	[검색페이지]

5. 주요 기능

• 다크모드
  
• 반응형
  
• 무한 스크롤
  
• 썸네일 영상 자동 재생
  
• 영상 검색 기능
  
• 댓글 추가/삭제 기능
  
  

1) 메인 페이지

2) 상세 페이지

3) 검색, 테마

6. 컨벤션

📕 커밋 컨벤션

📘 코드 컨벤션

7. 디렉토리 구조

📦FESP-FINAL1
 ┣ 📂public
 ┃ ┣ 📂videos
 ┃ ┃ ┣ 📂searchByChannels
 ┃ ┃ ┃ ┣ 📜search-by-channel-id-UC1x03ziDHPct2xTikLyfMDA.json
 ┃ ┃ ┃ ┗  ...
 ┃ ┃ ┗ 📜popular.json
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo-477tube.svg
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂supabase
 ┃ ┃ ┃ ┗ 📜videoComment.ts
 ┃ ┃ ┣ 📜fakeYoutubeClient.ts
 ┃ ┃ ┣ 📜youtube.ts
 ┃ ┃ ┗ 📜youtubeClient.ts
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┣ 📂skeleton
 ┃ ┃ ┃ ┃ ┣ 📜Comment.tsx
 ┃ ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┃ ┣ 📜RelatedVideo.tsx
 ┃ ┃ ┃ ┃ ┗ 📜Video.tsx
 ┃ ┃ ┃ ┣ 📜Comment.tsx
 ┃ ┃ ┃ ┣ 📜CommentForm.tsx
 ┃ ┃ ┃ ┣ 📜CommentSection.tsx
 ┃ ┃ ┃ ┣ 📜RelatedCard.tsx
 ┃ ┃ ┃ ┣ 📜RelatedSection.tsx
 ┃ ┃ ┃ ┣ 📜Video.tsx
 ┃ ┃ ┃ ┗ 📜VideoSection.tsx
 ┃ ┃ ┣ 📂layout
 ┃ ┃ ┃ ┗ 📜Header.tsx
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┃ ┣ 📜Card.tsx
 ┃ ┃ ┃ ┗ 📜MainSkeleton.tsx
 ┃ ┃ ┗ 📂search
 ┃ ┃ ┃ ┣ 📜SearchCard.tsx
 ┃ ┃ ┃ ┗ 📜SearchSkeleton.tsx
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜useHandleHover.tsx
 ┃ ┃ ┣ 📜useHandleMainHover.tsx
 ┃ ┃ ┣ 📜useHandleResizeHeight.tsx
 ┃ ┃ ┣ 📜useHandleScroll.tsx
 ┃ ┃ ┗ 📜useImgLazyLoading.tsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜DetailPage.tsx
 ┃ ┃ ┣ 📜ErrorPage.tsx
 ┃ ┃ ┣ 📜MainPage.tsx
 ┃ ┃ ┗ 📜SearchPage.tsx
 ┃ ┣ 📂stores
 ┃ ┃ ┣ 📜useThemeStore.ts
 ┃ ┃ ┗ 📜useYoutubeApiStore.ts
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┣ 📜Comment.module.css
 ┃ ┃ ┃ ┣ 📜CommentForm.module.css
 ┃ ┃ ┃ ┣ 📜CommentSection.module.css
 ┃ ┃ ┃ ┣ 📜DetailPage.module.css
 ┃ ┃ ┃ ┣ 📜RelatedCard.module.css
 ┃ ┃ ┃ ┣ 📜RelatedSection.module.css
 ┃ ┃ ┃ ┗ 📜Video.module.css
 ┃ ┃ ┣ 📂error
 ┃ ┃ ┃ ┗ 📜ErrorPage.module.css
 ┃ ┃ ┣ 📂layout
 ┃ ┃ ┃ ┗ 📜Header.module.css
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┃ ┣ 📜Card.module.css
 ┃ ┃ ┃ ┗ 📜MainPage.module.css
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┃ ┣ 📜SearchCard.module.css
 ┃ ┃ ┃ ┗ 📜SearchPage.module.css
 ┃ ┃ ┗ 📜GlobalStyle.ts
 ┃ ┣ 📂types
 ┃ ┃ ┣ 📜commentItem.ts
 ┃ ┃ ┣ 📜popularVideo.ts
 ┃ ┃ ┣ 📜relatedVideo.ts
 ┃ ┃ ┗ 📜supabaseComment.ts
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜getElapsedTime.ts
 ┃ ┃ ┗ 📜setDecodeHTMLEntities.ts
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜react-app-env.d.ts
 ┃ ┣ 📜Root.tsx
 ┃ ┗ 📜Router.tsx
 ┣ 📜.env.development
 ┣ 📜.env.production
 ┣ 📜.eslintrc.config.js
 ┣ 📜.prettierrc.config.js
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜tsconfig.json