ActivityPreviewCard
Activity 정보를 미리보기 형태로 표시하는 카드 컴포넌트입니다. WF-01 세미나 파이프라인 결과 표시에 사용됩니다.
Installation
bash
npx axis-cli add activity-preview-cardUsage
AI/LLM 기반 엔터프라이즈 솔루션 세미나
ACT-2024-001
collected
2024-03-15 14:00
KT AI Innovation Lab
KT / 자사활동
AI
LLM
Enterprise
Cloud
Play: PLAY-AI-001
tsx
import { ActivityPreviewCard } from '@ax/ui'
const activity = {
activity_id: 'ACT-2024-001',
title: 'AI/LLM 기술 세미나',
date: '2024-03-15',
organizer: 'KT AI Lab',
url: 'https://example.com/seminar',
play_id: 'PLAY-001',
themes: ['AI', 'LLM', 'Enterprise'],
source: 'KT',
channel: '자사활동',
status: 'collected',
}
export function Example() {
return (
<ActivityPreviewCard
activity={activity}
onEdit={() => console.log('Edit clicked')}
/>
)
}Variants
Default
DevOps & Cloud Native 워크샵
ACT-2024-002
pending
2024-03-20
AWS Korea
대외 / 데스크리서치
DevOps
Kubernetes
Cloud
Play: PLAY-CLOUD-002
Compact
DevOps & Cloud Native 워크샵
ACT-2024-002
pending
2024-03-20
AWS Korea
대외 / 데스크리서치
DevOps
Kubernetes
Cloud
Play: PLAY-CLOUD-002
tsx
<ActivityPreviewCard
activity={activity}
variant="compact"
/>Multiple Cards
Props
| Prop | Type | Default | Description |
|---|---|---|---|
activity* | ActivityData | - | Activity 데이터 객체 |
onEdit | () => void | - | 수정 버튼 클릭 핸들러 |
variant | "default" | "compact" | "default" | 카드 변형 |
className | string | - | 추가 CSS 클래스 |
ActivityData Interface
| Prop | Type | Default | Description |
|---|---|---|---|
activity_id* | string | - | Activity 고유 ID |
title* | string | - | 세미나/이벤트 제목 |
date | string | null | null | 일시 |
organizer | string | null | null | 주최자 |
url* | string | - | 원본 URL |
play_id* | string | - | Play DB ID |
themes | string[] | [] | 테마/카테고리 목록 |
source* | string | - | 데이터 소스 (KT, 그룹사, 대외) |
channel* | string | - | 수집 채널 |
status* | string | - | 상태 |