🌳 Frontend Developer
npx seojun!
- Translation the Rules of React Overview page
- contribution pull request
junny97 / myflix Goto Github PK
View Code? Open in Web Editor NEW영화 & TV프로그램들의 정보와 평점을 제공하는 사이트
Home Page: https://myflix-jun.vercel.app
myflix's Introduction
myflix's People
Contributors
Watchers
myflix's Issues
Feat: API 설정
📃 Description
영화, TV프로그램 정보를 받아올 API를 설정합니다.
✅ CheckList
- 영화, TV프로그램 정보를 받아올 API를 설정
Refactor: Code Splitting 적용으로 초기 로딩 속도 개선
📃 Description
React.Lazy, Suspense를 사용한 코드 스플리팅으로 초기 로딩 속도를 개선합니다
✅ CheckList
- React.Lazy, Suspense를 사용하여 코드 스플리팅 적용
Refactor: Slider 컴포넌트 분리
📃 Description
Home 페이지에서 구현한 영화목록 슬라이더를 컴포넌트로 분리하여 정의합니다.
✅ CheckList
- 기존 Home피드에서 슬라이더 컴포넌트 분리하기
- 서로 다른 data를 전달하도록 props설정하기
- TMBD API를 이용하여 다양한 영화& 티비 프로그램 정보 추가로 받아오기
Chore: 필수 라이브러리 세팅
📃 Description
기능개발에 앞서 개발에 필요한 라이브러리들을 먼저 설치합니다.
✅ CheckList
- styled-components 설치
- React-Router-dom 설치
- axios 설치
- react-query 설치
Style: GlobalStyle 설정
📃 Description
구현에 필요한 GlobalStyle들을 설정합니다
✅ CheckList
- [ ]GlobalStyle 설정
- 기본 테마 스타일 설정
Feat: 검색 기능 구현하기
📃 Description
유저는 입력한 검색 키워드에 맞는 정보를 찾아 보여주는 검색 기능을 구현합니다
✅ CheckList
- 검색 요청 받아오는 api 설정하기
- Header컴포넌트에서 검색한 키워드 state로 넘겨주기
- 받아온 검색 키워드와 api로 검색 기능 구현하기
Feat: Header 컴포넌트 구현
📃 Description
Header 컴포넌트 기능을 구현 합니다.
✅ CheckList
- framer-motion 라이브러리 설치
- nav 클릭시 Home, Tv 페이지로 Router 설정
- 헤더 nav UI 작업
- 메인 로고 motion 애니메이션 설정
- 검색 버튼 클릭 시 검색 input창 토글기능 구현하기
Feat:영화 Detail Modal 만들기
📃 Description
영화 썸네일 박스 클릭 시 해당 영화의 추가 정보를 보여줄 Modal을 구현합니다
✅ CheckList
- 썸네일 박스 클릭시 detail 페이지로 이동
- 모달 창 생성시 기본 배경설정 변경 & 모달 창 UI설정
- detail 페이지 경로 비교를 통해 detail접근 시에만 모달 보이도록 설정
- Modal 컴포넌트 분리 후 Home 피드에서 분리하기 & 영화 추가 정보 전달
Feat: Tv 프로그램 페이지 설정
📃 Description
Tv 프로그램 정보를 받아와 Tv 페이지를 구현합니다
✅ CheckList
- Tv 프로그램 관련 api 받아오기
- Tv 페이지 설정
Refactor: Banner 컴포넌트 분리
📃 Description
Banner 부분을 컴포넌트로 분리합니다
✅ CheckList
- Home, Tv 페이지의 Banner 부분 컴포넌트 분리 후 적용& 배너 작품 정보 모달 연결
Feat: 캐스팅 정보 불러오기
📃 Description
영화에 출연하는 출연진 캐스팅 컴포넌트 작업을 진행합니다.
✅ CheckList
- 캐스팅 정보를 받아올 api 설정
- 캐스팅 정보 6개씩 보여주게 설정
- 캐스팅 정보 컴포넌트 분리
Feat: Home 페이지 구현하기
📃 Description
Home 페이지를 구현합니다
✅ CheckList
- Home 화면에 보여줄 최신 영화 목록 API 설정
- 영화 목록 API 데이터 React-query로 받아오기 & 기본 UI 작업
- 영화 목록 썸네일 받아오는 박스 생성 & 박스 애니매이션 적용
Feat: Modal 키보드 접근성 적용
📃 Description
Modal에서 키보드 접근성을 향상시키고 스크롤 동작 최적화를 적용합니다.
✅ CheckList
- 모달창이 열려있을땐 모달창 외부 스크롤 이벤트 막기
- esc 키 입력시 모달창 닫기
- 위/아래 방향키 스크롤 이벤트 적용
Refactor: 작품 상세 정보 컴포넌트 분리
📃 Description
기존 Modal 컴포넌트에서 보여주던 작품의 줄거리/평점/개봉일 등 상세 정보를 컴포넌트로 분리하여 정의합니다.
✅ CheckList
- 영화/ tv 프로그램에 추가 정보 전달할 interface 생성
- Content 컴포넌트 생성 후 상세 정보 분리
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.