47. 드래그 앤 드롭 위젯 그리드 Design a customizable widget dashboard: **Grid System**: - Responsive grid: 12 columns - Row height: 100px base unit - Gap: 16px - Widgets span: 1-12 columns, 1-4+ rows **Widget Container**: - Background: white - Border-radius: 12px - Shadow: sm - Resize handles: corners and edges **Widget Header**: - Drag handle area - Title - Actions: refresh, configure, remove - Collapse/expand toggle **Edit Mode**: - Toggle edit mode button - Widgets show drag handles - Resize handles visible - Grid lines visible - Add widget button **Drag Behavior**: - Drag by header or handle - Ghost preview while dragging - Other widgets shift/resize - Snap to grid **Resize Behavior**: - Corner and edge handles - Min/max size per widget type - Maintain aspect ratio option - Preview size while resizing **Add Widget**: - Opens widget library modal - Categorized widget options - Preview of each widget - Drag from library to grid **Widget Library**: - KPI cards - Charts (line, bar, pie) - Activity feed - Calendar - Tasks list - Notes **Persistence**: - Save layout to user preferences - Layout presets/templates - Reset to default option Tech: React + react-grid-layout + Tailwind