Movie Trailer Site Project

📑 프로젝트 소개 및 개요

영화 트레일러 오픈 API를 활용하여 영화 목록을 조회하고 사이트 구현하기

🔗 배포 링크

#vercel https://movie-trailer-project.vercel.app/

기한

2023.06.20 ~ 2023.06.26

📂 폴더 구조

├─apis
│  └─@core.js
│  └─MovieApi.js
├─components
│  └─movie-list
│    └─index.js
│  └─one-movie
│    └─index.js
│  └─searchbar
│    └─index.js
│  └─top-button
│    └─index.js
├─consts
│  └─PARAMS.js
│  └─QUERYKEYS.js
├─context
│  └─selectedLanguage.js
├─hooks
│  └─useInfiniteScroll.js
│  └─useMovieList.js
│  └─useMoviesQuery.js
├─layout
│  └─Footer.js
│  └─Header.js
│  └─index.js
├─pages
│  └─detail
│    └─components
│      └─video.js
│    └─img
│    └─movie-info
│      └─credits.js
│      └─detail-info.js
│      └─gallery.js
│      └─index.js
│      └─plot.js
│    └─recomendation
│      └─index.js
│    └─review
│      └─index.js
│      └─one-review.js
│      └─review-slide.js
│  └─main
│    └─index.js
│  └─now-playing
│    └─index.js
│  └─search
│    └─index.js
│  └─top-rated
│    └─index.js
│  └─upcoming
│    └─index.js
├─routes
│  └─routing.js
└─style
│  └─common.js
│  └─global.js
│  └─theme.js

👨‍👩‍👦‍👦 팀원

Front-end	Front-end	Front-end	Front-end	Front-end	Front-end	Front-end
지성경	오현우	박희수	심재원	함정우	김예슬	고승용

⚙️ 사용 기술 스택

☑️ 커밋 컨벤션

Type	Description
feat	Add a new feature
fix	Fix the bug
design	UI design changes such as CSS
style	code formatting
refactor	Refactoring the code
docs	Modify the document
chore	etc.

✔️ 요구사항 구현 내용

1. 스켈레톤 UI (승용)

• mui 라이브러리 사용
• useEffect를 써서 1초동안 스켈레톤 UI가 로딩될때마다 나오게 적용

2. 검색 기능 (현우)

• 검색어 입력 태그와 mui로 만든 검색 유형 select 태그를 만�듬
• 캐시 기능으로 각 검색 유형과 쿼리에 대해서 캐싱을 해서 4분동안 검색 결과가 유지되게 함

3. 상세페이지 (정우)

• useSearchParams로 받아온 아이디를 사용해 각 영화의 상세 페이지를 구현하고 데이터 호출 로직을 분리

4. 언어변환 기능 (정우)

• footer에서 한/영 변환이 가능하도록 하였고, 해당 값을 localstorage에 저장하여 새로고침하여도 저장될 수 있게 함

5. 미리보기 기능 (재원)

• onMouseEnter과 onMouseLeave 이벤트 핸들러를 통해 마우스 커서에 따라 미리보기 화면이 보이게 하였고 setTimeOut으로 0.2초 뒤에 보이도록 설정

6. 메인페이지 (성경)

• react query의 useQuery 사용
• 데이터 캐싱 로직을 커스텀 훅 함수로 만들어서 적용하였고 메인 페이지 외 다른 페이지에도 적용할 수 있도록 함

7. 무한스크롤 (성경)

• react query의 useQuery / lodash의 debounce / react-intersection-observe의 useInView 사용
• 데이터 캐싱 로직과 마찬가지로 무한스크롤 로직을 커스텀 훅 함수로 만들어서 적용, 다른 페이지에도 적용 가능하도록 함
• 받아오는 데이터늬 촤대 갯수를 설정함 (60개)

8. 메인슬라이드 (희수)

• useState를 사용해 슬라이드 이동 길이 구현
• 라이브러리 사용 x

9. 데이터 통신 로직 구현 (예슬)

• axios 인스턴스를 활용하여 데이터 통신 로직을 구현하였고, params를 인스턴스에 설정하여 api call 시 가독성을 높임

10. 상수화 작업 (예슬)

• useQuery로 캐시할 때 재사용성과 오타방지를 위한 쿼리키를 상수화하였습니다.

11. 헤더, 푸터, 타이틀 배너 디자인, 파비콘 기능 (예슬)

• 헤더, 푸터, 타이틀 배너 디자인, 파비콘 기능을 추가