• URL : https://movie-site-xw2k.vercel.app
• 계정
  • ID: unida593@naver.com
  • PassWord: 123456

themoviedb.org 오픈 API를 사용하여 넷플릭스 사이트를 구현했습니다. React-Query와 Typescript 사용법을 알고 익숙해지고 싶어 이 프로젝트를 시작하게 되었습니다.

• React
• Typescript
  • 타입기반의 안전한 프로그래밍을 위하여 적용했습니다.
• React-Query
  • 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등 전역상태관리를 위해 적용했습니다.
• Styled Component
  • UI 컴포넌트를 작성하기 위해 적용했습니다.

노션에 과정을 기록하였습니다. https://www.notion.so/94648fb5e750458baa9e3e87a2da3ede

• React-Query로 최신영화와 티비프로그램을 themoviedb.org에서 실시간으로 받아옵니다.

• framer-motion으로 슬라이더를 구현하였습니다

• 영화를 클릭하면 상세정보를 보여주는 모달창이 뜹니다. 모달 창 밖이나 x버튼을 누르면 창이 닫힙니다.

• 검색창에 영화 or 티비 프로그램을 검색하면 결과를 가져옵니다.

• 로그인 구현 완료

📦src
 ┣ 📂Components
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜Footer.tsx
 ┃ ┣ 📜MovieCard.tsx
 ┃ ┣ 📜MovieSlider.tsx
 ┃ ┣ 📜Modal
 ┃ ┗ 📜Navbar
 ┣ 📂Routes
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜Search.tsx
 ┃ ┗ 📜Tv.tsx
 ┣ 📂styles
 ┃ ┣ 📜GlobalStyle.ts
 ┃ ┣ 📜styled.d.ts
 ┃ ┗ 📜theme.ts
 ┣ 📜api.ts
 ┣ 📜App.tsx
 ┗ 📜index.tsx