🎬 검색, 즐겨찾기를 등록 할 수 있는 영화 앱

🍿 Movie App

영화 검색	즐겨찾기

기술 스택

TypeScript, React, Sass, Recoil

구현 기능 목록

영화 앱 구성

• 하단 탭바
• 검색 탭
  • 상단 검색 폼
  • 검색 결과 영역: 한 줄에 하나의 영화를 노출하는 리스트 형 목록
  • 처음 검색 결과 영역 '검색 결과가 없습니다' 노출
• 즐겨찾기 탭
  • '내 즐겨찾기' Title
  • 즐겨찾기한 영화 목록 노출

검색 결과 영역

• 검색 기능
  • 검색 결과가 없는 경우 '검색 결과가 없습니다' 노출
  • 포스터 이미지 예외 처리: default
• 검색어 입력 박스 상단 고정
• 최하단으로 내렸을 때 다음페이지를 불러와 노출
  • 전부 다 불러온 경우 disable

영화 클릭

• 즐겨찾기 / 취소 선택 창
• 즐겨찾기 추가
  • 즐겨찾기 선택 시 해당 정보를 즐겨찾기 탭에서 조회 (즐겨찾기 추가)
  • 검색 목록에서 즐겨찾기 된 목록 표시
• 즐겨찾기 제거
  • 이미 즐겨찾기 된 경우 '즐겨찾기' 대신 '즐겨찾기 제거' 노출
  • 즐겨찾기 제거 선택 시 해당 영화 즐겨찾기 탭에서 제거
• 즐겨찾기 데이터 로컬에 추가 / 제거

추가 기능

• 즐겨찾기한 영화들의 순서를 드래그 & 드롭으로 조절
• 검색어 입력 예외 처리
  • 검색 결과 많은 경우: 검색 결과가 많습니다.
  • 검색 결과 없는 경우: 검색 결과가 없습니다.