48. 데이터 필터 패널 Design a data filter panel: **Panel Types**: - A: Sidebar (always visible) - B: Collapsible panel (expand/collapse) - C: Modal (mobile-friendly) **Panel Header**: - Title: "Filters" - Clear all link/button - Close button (collapsible/modal) - Applied count badge **Filter Groups**: - Collapsible sections - Section header + count - Dividers between groups **Filter Types**: **Search/Text**: - Input with clear button - Debounced value **Single Select** (radio/dropdown): - Radio buttons - Or dropdown for many options - "Any" default option **Multi-Select** (checkboxes): - Checkbox list - Select all / clear all - Search within options (many items) - Show more / less for long lists **Range Slider**: - Two handles for min/max - Input fields synced with slider - Histogram behind (optional) **Date Range**: - Preset buttons: Today, 7 days, 30 days, Custom - Date picker for custom range - Clear date button **Nested Filters**: - Parent-child relationship - Select parent shows children - Indented checkboxes **Active Filter Chips**: - Show above results - Removable individual chips - Clear all button **Apply Behavior**: - Auto-apply on change - Or explicit "Apply Filters" button - Reset button Tech: React + React Hook Form + Tailwind + Radix UI