영화 검색 및 즐겨찾기

배포 사이트 : https://waterhumanb.github.io/my_favorite_movies/

기술 스택 및 사용 이유

Tyscript, React, Recoil, SCSS, Axios

• TypeScript

  • 동적인 자바스크립트를 사용할 때 발생하는 오류 포괄적인 문법 오류들을 정적 타입을 통하여 오류를 정확하게 포착 할 수 있습니다.
  • 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있어, 코드의 가독성을 높이고 예측할 수 있어 디버깅을 좀 더 쉽게 할 수 있습니다.

• Recoil

  • redux같은 보다 state 관리가 굉장히 편하다, 코드량도 줄고, useState처럼 금방 사용할 수 있어 처음 사용 하는 사람도 금방 쓸 수 있다.

구현 기능

• 영화 앱 구성
  • 검색 탭 : 한 줄에 하나의 영화를 리스트형 목록으로 보여줍니다.
  • 즐겨찾기 탭 : 내가 즐겨찾기한 영화 목록으로 보여줍니다.
  • 처음 검색 결과 영역어 '검색 결과가 없습니다.' 문구를 보여 줍니다.
  • 검색 결과에 따라 message를 다르게 보여줍니다.
• 검색 결과 영역
  • input 값을 axios를 사용해서 api 통신을 하고, recoilState에 저장에서 상태관리를 합니다.
  • 검색 결과 리스트에 Poster, Title, Year, Type 값을 보여줍니다.
  • 결과 리스트에서 즐겨찾기 된 리스트는 border, mark 색이 다릅니다.
• 영화 클릭 상태
  • 영화 클릭 시 modal창으로 Poster와, "즐겨찾기 추가 " or 즐겨찾기 해제" 버튼이 있습니다.
  • 영화 클릭 시 즐겨찾기가 추가된 영화는 border, mark 색이 다릅니다.
  • button을 클릭 하거나 modal 바깥을 클릭하면 modal이 닫힙니다.