식품영양조회 페이지의 다중 필터 기능

[youngwan2]

개요

• 식품영양정보의 질과 양이 높아짐에 따라 다양한 기능을 도입할 수 있는 여견이 마련 되었음.
• 따라서 방대한 데이터를 효율적으로 검색할 수 있는 기능의 필요성이 대두되었고, 이에 필터 기능을 추가함

향후 계획

• 현재 자주 호출되는 문제를 개선하기 위해 디바운스를 칼로리 필터에만 적용하였는데, 다른 필터의 경우도 반복하여 중복 호출을 시도하거나, 연속으로 필터를 클릭하는 경우 불필요한 리렌더링을 발생시킴. 따라서 모든 필터에 동일한 디바운스를 적용할 생각

변경 내역

전체 디자인

• 상호명, 가공/일반, 칼로리 항목에 대한 다중 필터 적용이 가능하여 선택한 항목과 일치하는 영양소 데이터를 서버로 부터 응답받고 프론트엔드에서 렌더링
  
  

상호명 필터 기능

• 상호명 필터의 경우 선택 항목의 크기가 길기 때문에, 일부 항목만 보여주고 '...더보기' 를 클릭하면 나머지 항목을 모두 보여주도록 기능을 개선
  

• 확장된 항목들은 다시 ...숨기기 버튼을 클릭하여 토글 형식으로 처리할 수 있게 하였음.
  

가공/일반 및 칼로리 필터 기능

• 가공/일반 분류 기능도 상호명 필터와 동일한 방식을 적용하였고, 칼로리의 경우 최소 칼로리와 최대 칼로리 사이의 식품만 조회할 수 있도록 HTML Input 의 type 중 range 를 적용함