- 프로젝트 명 : FlickFinder - Movie search web
- 개발기간 : 2024.01.10 ~ 2024.01.15 (4일)
- 프로젝트 소개 : TMDB api 를 이용하여 현재 상영중인 영화, 최고 평점 영화, 인기있는 영화의 상세 정보와 평점을 보여주는 사이트입니다.
- 프로젝트 목표 : Javascript 문법 활용 능력, Vanila JS로 결과물 제작
| 김승희 | 조성준 | 김예린 | 김지민 |
|---|---|---|---|
| @HuaHuaChiChi | @tjdwns335 | @yeriniii | @gggimmmin |
| FlickFinder 팀장 | FlickFinder 팀원 | FlickFinder 팀원 | FlickFinder 팀원 |
| FrontEnd | FrontEnd | FrontEnd | FrontEnd |
- Environment : Visual Sudio Code, git, github
- Development : HTML5, CSS3, Javascript
- DB : Local storage
- Communication : Slack, Notion, Figma, Zep
- commit message : 구현 상태 상세하게 기록 남기기
- main branch 와 dev branch 분리
$ git clone
$ cd- TMDB api를 이용하기
- 영화 카드 클릭시 상세정보 페이지 구현
- 상세 페이지에서 영화 리뷰 작성 기능 구현
- Github PR 사용한 협업
- UX를 고려한 유효성 검사 구현
- CSS flex, grid 사용, 반응형 UI 구성
- 상세페이지 리뷰 수정 및 삭제 기능 구현
- 각 페이지 영화 카드 리스트 정렬 기능 (평점순, 인기도순)
- Top rated, Popular, Now playing API 추가
| 기능 | 담당자 |
|---|---|
| Localstorage를 통한 CRUD 구현 스크롤 이벤트 최적화 |
김승희 |
| 데이터 정렬, 스크롤 이벤트(정렬버튼 고정) 리뷰 디자인 초안 |
조성준 |
| 영화별 상세페이지 디자인 및 구현 | 김예린 |
| 영화 API 추가 메인페이지 및 검색 헤더 구현 |
김지민 |
-
메인페이지
-
Navigationbar 상단 고정
-
상단 Navbar를 통한 영화 검색 기능
-
상단 Navbar를 통한 카테고리별 목록 이동
-
-
검색창
-
영화 api id 값을 통한 영화 검색 기능
-
입력한 문자를 포함하는 모든 결과 내역 제공
-
검색어 자동 공백 제거, 소문자 변환 기능
-
검색 기록 표시
-
-
카드 리스트 정렬
- 평점순, 인기도순으로 구분해 내림차순으로 정렬
-
상세페이지
-
클릭 한 영화 api id 값을 통한 상세페이지 이동
-
api 값에 안에 포함된 영화 제목, 별점, 인기투표, 개봉연도, 장르, 감독, 등장인물, 줄거리 표시
-
-
리뷰 작성
-
영화 id 별로 상세 페이지 안에 리뷰 작성 가능
-
로컬 스토리지를 활용한 리뷰 작성 기능 구현
-
비밀번호 유효성 검사를 통한 리뷰 수정 및 삭제 기능
-
리뷰 내용 스크롤 기능
-