😎 내가 구현한 기능

1. 영화목록 표시 기능:

1. 템플릿 (Template):
   • Swiper 라이브러리를 사용하여 영화목록을 넘길 수 있게 하였습니다.
   • MovieListItem 컴포넌트는 v-for 디렉티브를 사용하여 movies 배열의 각 영화에 대해 반복적으로 렌더링됩니다.
   • Swiper의 페이징 및 네비게이션 버튼이 포함되어 있습니다.
2. 스크립트 (Script):
   • Swiper와 MovieListItem 컴포넌트를 임포트합니다.
   • movies prop는 부모 컴포넌트로부터 전달받은 영화 데이터 배열입니다.
   • mounted 라이프사이클 훅에서 Swiper 인스턴스를 초기화합니다. 여기서 슬라이드의 보여질 개수, 간격, 네비게이션, 페이징 설정을 합니다.

2.영화 랭킹 시스템:

1. 템플릿 (Template):
   • movie-list 클래스를 가진 ul 요소는 영화 목록을 표시합니다. 각 영화는 movie-item 클래스를 가진 li 요소로 표시되며, 영화의 순위, 이미지, 제목, 평점이 포함됩니다.
2. 스크립트 (Script):
   • data 함수는 영화 목록(movies), 장르 목록(genres), 선택된 장르(selectedGenre)를 초기 상태로 설정합니다.
   • mounted 라이프사이클 훅에서는 영화와 장르 데이터를 가져오는 함수(fetchMovies, fetchGenres)를 호출합니다.
   • computed 속성인 **sortedMovies**는 선택된 장르에 따라 필터링되고 평점에 따라 정렬된 영화 목록을 반환합니다.
   • **methods**에는 영화와 장르 데이터를 가져오는 함수와 장르를 필터링하는 함수가 포함됩니다.