/netflix_clone

Netflix Clone App built using React, Typescript, Router v6, Recoil, Framer-Motion, etc...

Primary LanguageTypeScript

Deployment

github pages: https://eee0930.github.io/netflix_clone.



Project Info

Goal

  1. netflix 웹사이트와 비슷하게 연출하여 최신 영화와 tv 프로그램 정보들을 보여줌
  2. react의 다양한 hook들을 사용하며 state의 효율적인 사용에 대한 고찰 및 연습하기
  3. react router, styled components, query, hook form, 등 다양한 리액트 라이브러리 공부
  4. api에서 제공하는 데이터를 이용하여 user interface를 고려한 화면에 다양한 정보들을 연출하기

Period

2023-01-09 ~ 2023-01-20



Getting Started 🏃‍♀️

Requirements

For building and running the application you need:

Installation

$ git clone https://github.com/eee0930/netflix_clone.git
$ cd netflix_clone
$ code .

How to run

  • Change the REACT_APP_MOVIE_API_KEY on the .env.example file.
  • Click on View -> Terminal.
  • Run
$ npm install
$ npm start

How to deploy?

  • Change the homepage on the package.json file.
$ npm run deploy



Stacks 📚

Libraries & Languages

Config

Environment

Communication



Screens and Introduction 🎬

1. list contents

skills & issues

  1. movies, tv show, weekly trends 화면에서 재사용할 수 있도록 slider를 compoenent로 나눔
  2. component가 destroy되거나 render 될 떄 효과를 줄 수 있는 AnimationPresence를 이용하여 slider가 넘어가는 효과를 줌. slider의 key를 index라는 number type으로 주고 slider를 넘기는 버튼을 클릭하면 index가 변화되도록 함. index가 바뀌면 reactjs는 새로운 slider가 생성되었다고 생각하여 slider 애니메이션 효과를 줄 수 있음.
  3. slider 버튼을 빠르게 두번 클릭하면 slider가 destroy 되기 전에 새로운 slider가 render 되어 버려서 component contents가 꼬여버리는 버그가 생김. slider가 움직이고 있다는 의미를 가진 leaving이라는 state를 정의하고, AnimatePresence의 onExitComplete prop을 사용하여 leaving이 true인 동안은 버튼이 동작하지 않게 구현
  4. 화면을 리렌더링했을 때 components가 render 되어서 버튼을 클릭하지 않았는데도 slider 애니메이션 효과가 나타나는 버그가 생김. AnimatePresence에 initial prop을 이용하여 initail 값을 false로 설정하여 해결함.

3. view details

skills & issues

  1. Box를 클릭했을 때 URL을 변경시키고, 변화된 URL에 기반해서 상세보기 Modal을 띄우는 애니메이션을 실행시킴.

4. trailer video

skills & issues

  1. framer motion의 whileHover prop을 이용하여 사진에 마우스를 올릴 시 사진이 해당 영화의 트레일러 영상 component로 변경되도록 구현

5. search results

skills & issues

  1. Router의 useNavigate를 이용하여 검색을 하면 /search로 리다이렉트 되도록 함.
  2. useLocation으로 검색어인 param 값을 가져와 해당 검색어에 해당되는 api data를 가져옴.



Architecture

Directory structure

 ┣ components
 ┃ ┣ incl : components에 공통적으로 들어가는 components
 ┃ ┃ ┣ Banner.tsx
 ┃ ┃ ┣ ListCredits.tsx
 ┃ ┃ ┣ ListSimilarContents.tsx
 ┃ ┃ ┗ Video.tsx
 ┃ ┣ styled : 각 components에 들어갈 style들
 ┃ ┃ ┣ BannerStyle.tsx
 ┃ ┃ ┣ DetailStyle.tsx
 ┃ ┃ ┣ HeaderStyle.tsx
 ┃ ┃ ┣ ListSearchStyle.tsx
 ┃ ┃ ┣ ModalStyle.tsx
 ┃ ┃ ┗ SliderStyle.tsx
 ┃ ┣ Header.tsx
 ┃ ┣ ListSearchContent.tsx
 ┃ ┣ ListSearchPeople.tsx
 ┃ ┣ Modal.tsx
 ┃ ┣ ModalForSearch.tsx
 ┃ ┣ ModalForTrending.tsx
 ┃ ┣ SliderForContents.tsx
 ┃ ┣ SliderForTrending.tsx
 ┃ ┗ SliderForTrendingPeople.tsx
 ┣ routes
 ┃ ┣ DetailMovie.tsx
 ┃ ┣ DetailPerson.tsx
 ┃ ┣ DetailTv.tsx
 ┃ ┣ Home.tsx
 ┃ ┣ Search.tsx
 ┃ ┣ Trending.tsx
 ┃ ┗ Tv.tsx
 ┣ App.tsx
 ┣ Router.tsx
 ┣ Svg.tsx
 ┣ api.ts
 ┣ atoms.tsx : components에 전역적으로 사용될 변수들 (recoil)
 ┣ index.tsx
 ┣ styled.d.ts
 ┣ theme.ts
 ┗ util.ts : 이미지 로딩 주소