react-toyproject-team5/react-youtube-clone

Front-End : React Youtube Clone

🔗 YouTube 페이지

🔗 Team5 배포 페이지

🔗 Team5 Git Repository

🔗 Team5 Notion

🦖 팀 소개

김지영	이은영	조승후	홍혜원
메인페이지	헤더 및 사이드바 레이아웃	영상 상세 페이지	검색 페이지

🦖 프로젝트 기간

1차 : 2023.01.23(월) ~ 2023.01.20(금)
2차 : 2023.01.25(수) ~ 2023.02.03(금)

🦖 기술 스택

🦖 작업 상세 내용

👩‍💻김지영

[메인페이지]

• 비디오카드 생성
  • 비디오카드 호버링 시 3초 후 비디오 재생
• 무한 스크롤 가능

👩‍💻이은영

[레이아웃]

• 영상 디테일 페이지 : 사이드바 모달 형태
• 그외 페이지
  • 사이드바 반응형에 따라, main 영역 사이즈 변경됨
• 스크롤 디자인

[헤더]

• 검색바 반응형

[사이드바]

• 데스크탑 사이즈에서는 버튼 클릭시, 토글로 열림
• 태블릿과 모바일 사이즈에서는 버튼 클릭시, 모달로 열림
• 모달일 때
  • 사이드바 외 영역 클릭시, 모달 닫기
  • 버튼으로 모달 닫기
• hover 시에만 스크롤 보임

👩‍💻조승후

• 영상플레이어
• 댓글리스트
• 관련영상리스트

👩‍💻홍혜원

검색페이지

• 해당 키워드에 관한 영상 나오기
  • header 컴포넌트 input에서 value값 받아오기
  • 채널 이미지 불러오기
  • 동영상 조회수 불러오기
  • 레이아웃 디자인
  • 네비게이션 토글 메뉴 구현
  • hover시 동영상 미리보기 기능 구현

상세페이지

• 연관 동영상 불러오기
• 댓글 정보 가져오기 및 컴포넌트화

🦖 피드백 받고 싶은 부분/아쉽거나 어려웠던 부분

👩‍💻김지영

• 동영상 시간이 무조건 2숫자씩 되게 했습니다. 하지만, 10분 이하인 동영상인 경우, 분이 2글자일 필요가 없는데 더 좋은 방법이 있을지 궁급합니다.
• 조회수 함수를 더 좋게 만들 방법이 있을 지 궁금합니다.
• 시간 관계 상 필터와 미니 플레이어를 넣지 못해서 아쉽습니다.
• 무한 스크롤를 위해 axios를 불러와 데이터를 usestate에 넣었는데, 더 좋은 방법이 있을지 고민이 됩니다.

👩‍💻이은영

[피드백 받고 싶은 점]

• 페이지 공통 레이아웃
  • 헤더와 사이드바를 fixed로 설정했고 outlet은 헤더와 사이드바만큼 반응형마다 다르게 margin을 줬습니다. 괜찮은 방법인지 궁금합니다. 혹은 fixed된 공통 컴포넌트와 아웃렛을 margin을 주지 않고도 겹치지 않게 설정할 수 있는 방법이 있는지 궁금합니다.
• img src 대신 import로 이미지 불러오기
  • 이미지를 img src로 불러오는 것이 안돼서 import 하였습니다. 혹시 원인에 대해 아시는 것이 있으면 알려주시면 감사하겠습니다.
• 사이드바
  • 창크기별로 반응형을 만들고, 창크기별로 버튼에 다른 모션을 주는 것이 어려웠습니다. 버튼을 누르면 확장형 사이드바가 없어지거나 모달 사이드바가 뜨는 것에 대해, state를 하나로 하여 작업하다가 두 개로 변경하여 작업했습니다. 이 과정에서 헤더와 사이드바, app.js 전체 레이아웃 등 고려해야할 것이 많아 어려웠습니다. useContext를 사용해야 했는지 궁금합니다.

[어려웠던 점]

• useRef 사용

• 사이드바 슬라이드 transition

  • 컴포넌트 계층을 잘못 설계해 transition 적용이 되지 않았음. 작업한 컴포넌트를 대대적으로 수정해야했음.

• 반응형, 헤더의 버튼 클릭시 상황별로 사이드바 형태가 달라야했던 점

👩‍💻조승후

설명1

설명2

👩‍💻홍혜원

• 설명1
• 설명2