'use client'; import React from 'react'; import styled from 'styled-components'; import { theme } from '@/styles/theme'; interface ActivityItem { id: number; action: string; detail: string | null; createdAt: string; sister?: { name: string } | null; project?: { name: string } | null; } const actionEmojis: Record = { sprint_created: 'πŸ“', task_updated: '✏️', deploy_complete: 'πŸš€', ssh_check: 'πŸ”', pr_opened: 'πŸ“‹', pr_merged: 'βœ…', }; function formatTime(iso: string): string { const d = new Date(iso); const diff = Date.now() - d.getTime(); const min = Math.floor(diff / 60000); if (min < 1) return '방금'; if (min < 60) return `${min}λΆ„ μ „`; const hr = Math.floor(min / 60); if (hr < 24) return `${hr}μ‹œκ°„ μ „`; return `${Math.floor(hr / 24)}일 μ „`; } const List = styled.ul` list-style: none; display: flex; flex-direction: column; gap: 0; `; const Item = styled.li` display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid ${theme.colors.border}; &:last-child { border-bottom: none; } `; const Emoji = styled.span` font-size: 15px; margin-top: 1px; flex-shrink: 0; `; const Body = styled.div` flex: 1; min-width: 0; `; const Action = styled.div` font-size: 13px; color: ${theme.colors.textPrimary}; margin-bottom: 2px; `; const Detail = styled.div` font-size: 12px; color: ${theme.colors.textSecondary}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `; const Time = styled.span` font-size: 11px; color: ${theme.colors.textSecondary}; flex-shrink: 0; margin-top: 2px; `; const Empty = styled.div` padding: 24px; text-align: center; color: ${theme.colors.textSecondary}; font-size: 13px; `; export default function ActivityFeed({ items }: { items: ActivityItem[] }) { if (!items.length) return ν™œλ™ 기둝 μ—†μŒ; return ( {items.map((item) => ( {actionEmojis[item.action] ?? 'πŸ“'} {item.sister && {item.sister.name}} {item.sister && ' Β· '} {item.action.replace(/_/g, ' ')} {item.detail && {item.detail}} ))} ); }