- 본 프로젝트는 영화 트레일러 오픈 API를 활용한 영화 목록 조회 웹 사이트입니다.
- 메인 페이지
- 상세 페이지
- 리스트 페이지(인기있는, 현재 상영중인, 개봉 예정작, 평점순)
- 검색 결과 페이지
- react-query를 사용하여 데이터를 캐싱할 것
- 로딩 중에는 skeleton UI를 나타낼 것
- 목록을 불러올 때는 react-query의 useInfiniteQuery를 사용하여 무한 스크롤링으로 불러올 것
- 페이지
- 리스트 페이지
- 각 영화의 평점 및 짧은 미리보기(소개)가 나타나야 함
- 미리보기는 길이가 길다면 특정 글자수를 넘어가면 ...으로 표시할 수 있도록 UI를 고려할 것
- 상세 페이지
- 비디오가 있는 경우, 페이지 진입 시 자동으로 비디오 플레이
- 제목, 포스터, 별점, 제작 연도, 장르 데이터 활용해서 UI 표기
- 그 외의 데이터 추가 활용 여부는 자유
- search
- 제목, 포스터, 미리보기(소개), 별점
- 포스터 없는 경우, 대체 이미지 사
- 리스트 페이지
src
│ App.js
│ index.js
│
├─Apis
│ index.js
│ movieApi.js
│
├─Atoms
│ sidebar.atom.js
│
├─Components
│ ├─IconBox
│ │ IconBox.js
│ │ IconBox.style.js
│ │
│ ├─Layouts
│ │ │ index.js
│ │ │
│ │ ├─Footer
│ │ │ │ Footer.js
│ │ │ │
│ │ │ └─TopButton
│ │ │ TopButton.js
│ │ │
│ │ └─Header
│ │ │ Header.js
│ │ │
│ │ └─SideBar
│ │ SideBar.js
│ │
│ └─Skeleton
│ Skeleton.js
│
├─Consts
│ category-title.js
│ query-key.js
│
├─Hooks
│ └─Queries
│ @config.js
│ get-category.js
│ get-detail.js
│ get-search.js
│ get-trailer.js
│
├─Pages
│ ├─Detail
│ │ │ index.js
│ │ │
│ │ └─Components
│ │ StarEval.js
│ │ Video.js
│ │
│ ├─Home
│ │ │ index.js
│ │ │
│ │ └─Components
│ │ Search.js
│ │ Section.js
│ │
│ ├─List
│ │ │ index.js
│ │ │
│ │ └─Components
│ │ Information.js
│ │ Section.js
│ │
│ └─SearchResult
│ index.js
│
├─Routes
│ routing.js
│
├─Styles
│ common.js
│ global.js
│ theme.js
│
└─Utils
isMobile.js
| 빈태찬 | 김도은 | 윤동영 | 이하늘 | 이주홍 |
|---|---|---|---|---|
| beenbin | Doeunnkimm | JacobYoon97 | twosky0202 | LEE JUHONG |
| PM, 전체 UXUI, 상세 페이지 조회 기능 |
API 모듈화, react-query로 쿼리 훅 함수 정의, 메인 페이지 조회 기능 |
무한 스크롤링 기능, 상세 리스트 페이지 조회 기능, 메인 및 상세 페이지 UI 참여 |
검색 기능, 검색 결과 조회 기능 |
- |
| 기술 스택 | 종류 |
|---|---|
| 언어 |  Javascript |
| 프론트엔드 |  React |
| 사용 라이브러리 | 사용한 부분 |
|---|---|
| styled-components | 스타일 컴포넌트 구성 시 사용 |
| react-router-dom | URL에 따라 화면을 렌더링 시 사용 |
| axios | api를 통한 비동기 통신 시 사용 |
| recoil | 전역 상태 관리 시 사용 |
| react-query | 데이터 관리 라이브러리 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent