오늘은 영화 정렬에 이어 영화 장르 필터를 구현했다.
구현 방법
장르들은 constants에 배열 형태로 관리했고, 장르 버튼들은 그 배열을 이용하여 동적으로 생성해주었다!
요렇게 생긴 장르 버튼을 누르면 click 이벤트로 필터링이 실행된다.
선택된 장르들은 Set 자료구조를 이용하여 중복 없이 저장한다.
클릭한 장르 이름이 Set에 이미 있으면 빼고 없으면 넣는다. (토글)
그 다음 각 카드의 장르에 Set의 데이터들이 모두 포함되어있으면 보여주고, 아니라면 숨긴다.
트러블 슈팅
문제
카드를 보여줄 때는 display: block 스타일을, 숨길 때는 none을 적용했다.
하지만 검색 결과를 보여줄 때도 이러한 방법을 사용했었기 때문에, 검색어와 필터링이 동시에 잘 되지 않았다.
센과 치히로 검색 - 센과 치히로 외에 모두 none
애니메이션 필터링 - 검색결과와 관련 없이 애니메이션들이 보여지게 됨
해결
style 속성을 사용하지 않고 class 이름을 각각 search, genre로 지정한 후 개별적으로 관리하였다.
search, genre는 모두 display: none 속성을 가진다.
센과 치히로 검색 - 센과 치히로 외에 모두 search
애니메이션 필터링 - 애니메이션 외에 모두 genre
센과 치히로 - 클래스 없음 (보임)
애니메이션 - genre (숨김)
기타 - search, genre (숨김)
로 검색 결과와 장르 필터링 결과가 모두 반영된다!! 👍
글 잘 쓰고 싶어요