필터링 기능 구현

[jhoon9494]

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

[jhoon9494]

18 Best Practice 투표 이유

• useSearchParams를 커스텀 훅으로 만들어서 재사용
• 지역에 대한 다중 필터링

[hyorimcho]

20 Best Practice 투표 이유

• 커스텀 훅의 사용 이유를 명확하게 알고 관심사의 분리를 잘 한 점
• 쿼리 스트링의 자원을 명시해 주어 더 보기 좋은 url 을 만든 것
• 팀원이 제기한 이슈를 보고 코드에 바로 적용시킨 점

[Noeyso]

17 Best Practice 투표 이유

• area 와 bar 필터링을 구현한 점이 사용자의 편리성을 고려한 것 같다.
• 적절한 타입과 상수 선언

[jiheon788]

15 Best Practice 투표 이유

• Postcss 사용하여 css와 tsx에서의 색상변수를 공통으로 사용가능
• area chart의 하이라이트에 고민이 많았는데 Reference chart를 사용한점이 기발하였다.

[bokjunwoo]

https://github.com/Wanted-PreOnboarding-Team-8/pre-onboarding-9th-3-8/pull/18 Best Practice 투표 이유

• useFilterData 커스텀 훅을 만들어 useSearchParams를 사용한 점
• 지역 다중 필터링 기능

[raw20]

18 Best Practice 투표 이유

• 다중 필터링 가능
• useSearchParams를 커스텀 훅으로 분리하여 코드 가독성 향상

[tnghgks]

15 Best Practice 투표 이유

• 다중 필터링 가능
• Reference chart를 통한 Area 하이라이트
• 멋진 디자인
• 색상을 변수로 관리하여 한 파일에서 관리할 수 있는 점

[greyHairChooseLife]

21 Best Practice 투표 이유

• ( 차트 헤더 / 차트 필터 / 차트 ) 세 가지 ui 컴포넌트와 이를 관리하는 메인 컴포넌트로 역할이 분명하고 적절히 나뉘어진 점
• data fetch, filter 를 관리하는 커스텀 훅을 만들어 메인 컴포넌트에서 사용 => 로직과 ui 컨트롤이 잘 분리된 점
• 데이터 포메팅 과정에서 메타 데이터를 잃지 않고 표현 한 점

(셀프 선정 부끄럽지만 소신 있게 해 봤습니다... :baby_chick:)