41. 활동 피드
Design an activity feed component:
**Feed Container**:
- Vertical timeline layout
- Left: timeline line with nodes
- Right: activity cards
**Timeline Line**:
- Vertical line: 2px, gray-200
- Nodes: 10px circles on line
- Node color: based on activity type
**Activity Item**:
- Avatar (32px) or icon
- Actor name (bold) + action + target
- Description/preview text
- Timestamp: relative format
- Attachments: image thumbnails, file icons
**Activity Types & Icons**:
- Comment: message-circle, blue
- Upload: upload-cloud, green
- Edit: edit, amber
- Delete: trash, red
- Status change: refresh, purple
- Mention: at-sign, teal
**Activity Text Format**:
- "[User] commented on [Document]"
- "[User] uploaded 3 files to [Folder]"
- "[User] changed status to [Done]"
- Links highlighted, clickable
**Grouped Activities**:
- Collapse similar: "You made 5 edits"
- Expand to see details
- Time range for group
**Filters**:
- By activity type
- By user
- Date range
**Pagination**:
- "Load more" button
- Or infinite scroll
- Date headers as section breaks
**Real-time Updates**:
- New activity badge
- Click to load new items
- Or auto-prepend with animation
Tech: React + Tailwind + date-fns + WebSocket for real-time