<aside> 🔥 실제 현업에서, 특히 스타트업 환경에서는 대부분의 경우에 프로젝트를 처음부터 구축해야 합니다.

</aside>

프로젝트를 스스로 직접 구축하고 관리하는 역할은 매우 중요하기 때문에, 1단계에서 프론트엔드 개발자가 프로젝트 초기 단계에서 직면할 도전과 역할을 경험해보도록 하려고 합니다.

프로젝트 구성 및 제한 사항

• 프로젝트 구성
  • CRA로 만들어진 프로젝트입니다.
  • TypeScript 기반으로 프로젝트를 진행해주세요.
• 필수 사용 기술
  • Typescript
  • 상태 라이브러리 또는 data-fetching library 사용
• 제한 사항
  • youtube API 사용 횟수 제한이 있어, 개발 시 json 파일의 데이터 사용합니다.
  • 필요한 라이브러리는 자유롭게 설치가 가능합니다.
    • styled-component, sass, tailwind, redux, recoil, react-query 등

요구사항

공통

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

필수 구현

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