[tnghgks] 필터링 기능 구현

[tnghgks]

구현 기능

• [x] 필터링 기능을 구현해주세요, 필터링은 특정 데이터를 하이라이트 하는 방식으로 구현해주세요
• [x] 필터링 기능은 버튼 형태로 ID값(지역이름)을 이용해주세요
• [x] 필터링 시 버튼에서 선택한 ID값과 동일한 ID값을 가진 데이터 구역만 하이라이트 처리를 해주세요
• [x] 특정 데이터 구역을 클릭 시에도 필터링 기능과 동일한 형태로 동일한 ID값을 가진 데이터 구역을 하이라이트해주세요

참고 사항

• Chart 관련 컴포넌트를 components 폴더안에서 따로 분리하였습니다.
• useSearchParams 훅을 사용하여 URL의 쿼리에 따라 필터의 상태가 변경되게 했습니다.
• useFilterData 커스텀 훅을 사용하여 필터 관련 데이터 조회, 추가, 초기화 기능을 분리하였습니다.
• ComposedChart 에 OnClick 이벤트를 추가하여 Bar 차트 및 Area 차트의 하이라이트 기능을 구현했습니다.
• Bar 차트의 각각 항목에 따른 Cell 컴포넌트를 렌더링하여 필터에 따라 하이라이트 기능을 구현했습니다.
• CustomDot 컴포넌트를 생성하여 Area 항목이 필터링되면 각각의 항목에 하이라이트 기능을 구현했습니다.
• 다중 필터링이 가능하게 URL의 쿼리를 배열로 받아 처리했습니다.

SAMPLE

[raw20]

호수님 이번 과제도 고생많으셨습니다!! 👍👍👍 배경에 있는 케릭터가 진짜 인상적이군요..ㅋㅋㅋ

[bokjunwoo]

호수님 캐릭터가 눈에 확들어오네요ㅋㅋㅋ😆 고생하셨습니다.

[hyorimcho]

고생하셨습니다 호수님 👍🏻