4조 과제 제출(유지석, 소재헌, 윤준수, 우지수, 임예지)

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "singleQuote": false,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}

README.md

@@ -1,77 +1,86 @@
-유튜브 앱 작성
+[![Netlify Status](https://api.netlify.com/api/v1/badges/170bfd9e-858c-41d4-bf11-1a47f894d3a8/deploy-status)](https://app.netlify.com/sites/bulsazotube/deploys)
 
-유튜브앱 설명자료:
-https://docs.google.com/document/d/1vHlO8lgIo1oXBYiecpE8TbG2tHnr3Hmv25UxK_7a5_g/edit#
+<br />
 
-목표: 유튜브 앱을 만든다.
+# [프로젝트 소개](https://docs.google.com/document/d/1vHlO8lgIo1oXBYiecpE8TbG2tHnr3Hmv25UxK_7a5_g/edit#)
 
-수행 기간: 오늘 ~ 2023.01.20(금) 까지
-리뷰 기간:
-제출 방법:
-main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-혹시 문제가 발생한 경우, 바로 강사에게 알려주세요!
-현재 깃헙 저장소를 클론!
-확인 가능하도록 본명으로 브랜치 생성! 
-과제 수행 후 원격 저장소로 푸시! 
-현재 깃헙 저장소에서 main 브랜치로 Pull Request 생성하면 제출 완료!
-Pull Request 설명을 꼼꼼하게 작성!
+유튜브 API를 활용한 유튜브 클론
 
-요구사항
-다음 요구사항은 필수로 구현하고 그 외 기능은 마음대로 추가할 수 있다.
-유튜브 api를 사용해서 유튜브 데이터를 가져옵니다. 
+## 배포 사이트
 
-- 유튜브 Api 사용 방법 (API KEY 생성하는 법)
-https://console.cloud.google.com/     Google cloud console로 이동하기
-Youtube Data API 활성화 시키기
-API KEY 생성하기
+[불사조 유튜브](https://bulsazotube.netlify.app/)
 
- - 유튜브 API 요청 방법
 
-baseURL : https://youtube.googleapis.com/youtube/v3
+# 팀원
 
-검색어로 인한 비디오 데이터: 
-/search?part=snippet&maxResults=10&q={검색어}
+<table>
+  <tbody>
+  <tr>
+  <td align="center"><a href="https://github.com/yujiseok">팀장: 유지석</a></td>
+  <td align="center"><a href="https://github.com/Jaeheon-So">팀원: 소재헌</a></td>
+  <td align="center"><a href="https://github.com/hoheesu">팀원: 윤준수</a></td>
+  <td align="center"><a href="https://github.com/jisooround">팀원: 우지수</a></td>
+  <td align="center"><a href="https://github.com/1myeji">팀원: 임예지</a></td>
+  </tr>
+  <tr>
+  <td align="center"><a href="https://github.com/yujiseok"><img src="https://avatars.githubusercontent.com/u/83855636?s=400&u=7b00ef50bdc25603c2761b99ce36cad936cbd5cd&v=4" width="150px;" /></a></td>
+  <td align="center"><a href="https://github.com/Jaeheon-So"><img src="https://avatars.githubusercontent.com/u/79908684?v=4" width="150px;" /></a></td>
+  <td align="center"><a href="https://github.com/hoheesu"><img src="https://avatars.githubusercontent.com/u/99115509?v=4" width="150px;" /></a></td>
+  <td align="center"><a href="https://github.com/jisooround"><img src="https://avatars.githubusercontent.com/u/110647022?v=4" width="150px;" /></a></td>
+   <td align="center"><a href="https://github.com/1myeji"><img src="https://avatars.githubusercontent.com/u/106291546?v=4" width="150px;" /></a></td>
+  </tr>
+  </tbody>
+</table>
 
-특정 비디오 데이터 : 
-/videos?part=snippet&part=contentDetails&part=player&part=statistics&id={videoId}
+# 🔨기술 스택
 
-특정 채널 정보 데이터: 
-/channels?part=snippet&part=statistics&part=contentDetails&id={channelId}
+<div>
+<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black">
+<img src="https://img.shields.io/badge/vite-646CFF?style=for-the-badge&logo=vite&logoColor=white">
+<img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
+<img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white">
+<img src="https://img.shields.io/badge/styledcomponents-DB7093?style=for-the-badge&logo=styled-components&logoColor=white">
 
-댓글 데이터: 
-/commentThreads?part=snippet&videoId={videoId}
+<img src="https://img.shields.io/badge/reactrouter-CA4245?style=for-the-badge&logo=reactrouter&logoColor=white"><br /><br />
+</div>
 
-관련 비디오 데이터: 
-/search?part=snippet&maxResults=10&relatedToVideoId=${videoId}&type=video
+# 📆 과제 기간 및 담당 업무
 
+과제 기간: 2023. 1. 16 ~ 2022. 1. 20 <br />
 
- - 요청 주의 사항 
-
-a. 하루에 하나의 api_key에 할당된 요청 수가 있습니다. 
-그 이상 넘어가면 더 이상 요청을 못하게 되기 때문에 데이터를 가져오면 localStorage에 넣어서 localStorage에 이미 데이터가 있으면 요청을 보내지 말고 그 데이터를 이용해서 앱을 개발해 줍니다. 
+- <b>유지석 :</b> <상세 페이지> 동영상 설명, 댓글<br/>
+- <b>소재헌 :</b> <상세 페이지> 동영상 상세 정보 <br />
+- <b>윤준수 :</b> <상세 페이지> 관련동영상<br />
+- <b>우지수 :</b> <메인 페이지, 사이드바> 메인 페이지 전체, 사이드바<br />
+- <b>임예지 :</b> <검색 페이지, 헤더> 검색 페이지 전체, 헤더
+  <br/><br/>
 
-b. <React.StrictMode>를 없애도 개발을 해주세요. (요청이 두 번씩 가서 더 많은 api 호출을 하게 됩니다.)
+# 🎈기능 구현
 
+- 메인 페이지에서는 10개의 고정된 동영상을 보여준다.
+- 검색 페이지에서는 검색어에 해당하는 10개의 동영상을 보여준다.(채널은 제외)
+- 동영상을 클릭하면 상세 페이지로 이동한다.
+- 상세 페이지에서는 해당 동영상의 영상, 정보, 설명, 댓글, 관련동영상을 보여준다.
+- 사용자의 컴퓨터 설정에 따른 다크, 라이트 모드를 적용시켰다.
+- 검색 페이지와 헤더를 제외한 나머지 부분은 반응형으로 만들었다.
+- api 할당량을 초과하면 고정된 더미 데이터를 보여준다.
+  <br/><br/>
 
-UI 구현 예시
-예시를 참고로 자유롭게 구현한다.
+# 🔔어려웠던 점
 
-- 메인 화면
-youtube api 를 이용해서 원하는 검색어에 맞는 비디오 데이터를 가져옵니다. 
-가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다.
-Navigation bar (위쪽 부분) side bar (왼쪽 부분)의 UI를 조건에 따라 처리해줍니다.
+- 타입스크립트가 익숙하지 않아서 타입 오류를 해결하는 것이 많이 힘들었다.
+- 중복되는 함수들을 합치는 작업이 어려웠다.
+- api 호출 할당량이 적어서 실제로 되는지 안되는지 확인하는 것이 힘들었다.
+- 반응형 작업이 어려웠다.
+  <br/><br/>
+
+# 💡궁금한 점
+
+- api 호출시, 여러 이펙트안에서 분리해서 각각 호출하는 것이 좋은지
+- 하나의 이펙트안에서 호출하는 게 좋은지
+- 혹은 하나의 이펙트안에서 axios.all을 이용해 처리하는게 좋은지
+- 자녀 컴포넌트에서 각자 api 호출이 좋은지, 부모 컴포넌트에서 호출을 한 후 prop으로 내리는 게 좋을지
+- 더미데이터를 useState의 기본값에 할당을 해주어서 처음 렌더링 할때 더미데이터 값이 먼저 렌더링 되고 그 다음에 api에서 받아온 값이 렌더링 되는데 고칠 수 있는 방법이 있는지
 
-- 비디오 화면
-youtube api 를 이용해서 특정 비디오, 댓글, 관련 비디오 데이터를 가져옵니다. 
-가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다.
 
-- 검색 화면
-youtube api 를 이용해서 원하는 검색어에 맞는 비디오 데이터를 가져옵니다. 
-가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다.
 
-주의 사항
-컴포넌트를 올바르게 나누기 
-반응형 스타일도 신경 쓰되 스타일보다는 기능 위주로 개발하기
-최대한 이해하기 쉬운 변수명, 파일명, 컴포넌트명 사용하기 
-어떠한 부분(데이터)을 위해서 State 관리 라이브러리를 사용해야 할지 생각해 보기
-React-router-dom api의 중첩 라우팅을 이용해서 레이아웃을 만들어주기

index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="https://www.youtube.com/s/desktop/b5a8f283/img/favicon.ico"
+      type="image/x-icon"
+    />
+    <title>YouTube</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>