43. 칸반 보드 Design a Kanban board interface: **Board Layout**: - Horizontal scroll container - Columns: fixed width (300px) or flexible - Gap: 16px between columns - Full height layout **Column**: - Header: title + card count + add button + menu - Background: gray-100 (subtle) - Border-radius: 8px - Padding: 12px - Max-height with scroll **Column Header**: - Title: 14px semibold, editable on double-click - Count badge: gray pill - Add card button: + icon - Menu: rename, color, delete, collapse **Column Colors**: - Colored top border (4px) - Or full header background - Predefined: gray, blue, green, yellow, red, purple **Card**: - Background: white - Border-radius: 8px - Shadow: sm - Padding: 12px - Margin-bottom: 8px **Card Content**: - Title: 14px, 2-line clamp - Labels: colored chips, top or bottom - Description preview: 13px gray-600 - Attachments count + comments count - Assignees: avatar stack (max 3) - Due date: with overdue styling **Drag and Drop**: - Drag handle or entire card - Visual feedback: card lifts, shadow increases - Drop placeholder: dashed outline - Between cards and between columns **Card Quick Actions**: - Hover reveals: edit, archive, delete - Or right-click context menu **Add Card**: - Inline at bottom of column - Quick add: just title - Or "+ Add card" opens modal **Card Detail Modal**: - Full edit capabilities - Comments section - Activity log - Attachment upload Tech: React + @dnd-kit + Tailwind + Headless UI