2단계 카테고리 칩 + 카운트 배지 + 그룹 컬러로 구성하는 다면 필터입니다.
1depth 그룹 칩을 고르면 2depth 서브카테고리 칩이 드러나는 다면(faceted) 필터입니다. 칩마다 건수 배지를 붙이고, 활성 칩은 그룹 고유 색으로 강조합니다.
function selectGroup(next: string) {
setGroup(next)
setSub("") // depth0을 바꾸면 depth1 선택은 더 이상 유효하지 않다.
}
<button
aria-pressed={group === g.key}
style={group === g.key ? { backgroundColor: g.color, borderColor: g.color } : undefined}
onClick={() => selectGroup(g.key)}
>
{g.label}
<span className="font-mono text-[10px]">{countBy(g.key)}</span>
</button>