영화를 검색하고 및 즐겨찾기를 등록할 수 있는 무비 앱 입니다.

• https://yu-jae-min.github.io/POB_Grip/

• 개인 프로젝트

• 2022년 05월 11일 ~ 2022년 05월 15일

• Typescript, React, Sass, recoil

1. yarn 설치

 npm i yarn

2. repository 클론

git clone https://github.com/Yu-jae-min/POB_Grip

3. dependencies 설치

yarn install

4. 실행

yarn start

검색	즐겨찾기	상세모달

• 검색 바

  • 상단 검색바에 검색어 입력 시 검색어에 맞는 리스트 목록 노출

  • 검색 결과 로딩 중 목록을 로딩 중 입니다 노출

  • 검색 결과 없는 경우 검색 결과 없습니다 노출

• 무한 스크롤

  • useInView hook을 활용한 스크롤 감지

  • 스크롤 최하단 위치 시 api 재호출하여 다음 페이지 노출

• 즐겨찾기 리스트

  • 썸네일 아이콘 혹은 상세 페이지 아이콘을 활용하여 추가 된 즐겨찾기 리스트 노출

  • 로컬스토리지를 활용하여 새로고침 및 재접속 시 즐겨찾기 리스트 조회 가능

• 드래그 앤 드롭 기능 구현 중

• 상단 타이틀 및 하단 탭 메뉴

  • 스크롤 시 상단 검색바 및 타이틀과 하단 탭 메뉴 고정

  • 탭 메뉴 클릭 시 해당 페이지로 이동

  • 탭 메뉴 클릭 시 classnames 라이브러리를 활용한 활성화 기능

• 아이템 리스트

  • 썸네일 우측 상단 아이콘을 활용하여 즐겨찾기 추가 및 삭제

  • 즐겨찾기 목록에 추가되어 있는 경우 썸네일 우측 상단 아이콘 색상 활성화

  • 아이템 리스트 클릭 시 상세 모달 노출

• 상세 모달

  • 즐겨찾기 버튼 클릭 시 즐겨찾기 목록에 추가

  • 해당 아이템이 즐겨찾기 목록에 추가되어 있는 경우 즐겨찾기 버튼이 즐겨찾기 해제 버튼으로 변경

  • 취소 버튼 클릭 시 모달 창 닫힘

• API Key 환경 변수로 관리

• svg icon을 유동적인 스타일로 활용하기 위해 컴포넌트로 변환하여 사용