드롭다운 메뉴

13. 드롭다운 메뉴 Create a dropdown menu component: **Trigger**: - Button with text + chevron-down icon - Chevron rotates 180deg when open - Focus-visible ring styling **Menu Panel**: - Position: absolute, below trigger - Min-width: match trigger width or 200px - Background: white - Border: 1px gray-200 - Border-radius: 12px - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1) - Padding: 4px **Menu Items**: - Padding: 10px 12px - Border-radius: 8px (inside panel padding) - Hover: gray-100 background - Focus: same as hover + focus ring - With icon: 20px icon, 12px gap, text - Destructive: red-600 text + icon **Sections**: - Divider: 1px gray-200, 4px margin-y - Section header: 12px gray-500, uppercase, padding 8px 12px **Submenu Support**: - Chevron-right icon on parent item - Nested panel appears on hover/focus - Position: right of parent panel **Animation**: - Entry: fade + scale from 95% + slight Y offset - Duration: 150ms ease-out - Exit: fade out 100ms **Accessibility**: - Role: menu, menuitem - Arrow key navigation - Type-ahead search - Escape closes Tech: React + @headlessui/react Menu + Framer Motion