ActivityFeed

@hua-labs/ui/data

v1.0.0

타임스탬프, 아이콘, 선택적 뱃지가 포함된 활동 내역을 표시하는 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ActivityFeed } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

최근 활동

새 주문 생성

주문 #1234가 생성되었습니다

완료

방금 전

결제 처리됨

₩50,000 결제가 완료되었습니다

1시간 전

배송 시작

주문 배송이 시작되었습니다

2시간 전

최대 항목 수 제한

활동 내역

새 주문 생성

주문 #1234가 생성되었습니다

완료

방금 전

결제 처리됨

₩50,000 결제가 완료되었습니다

1시간 전

배송 시작

주문 배송이 시작되었습니다

2시간 전

메타데이터 포함

상세 활동

주문 처리됨

주문이 성공적으로 처리되었습니다

orderId: #12345amount: ₩125,000status: 완료됨

방금 전

재고 업데이트됨

재고가 업데이트되었습니다

sku: SKU-001quantity: 50

2시간 전

빈 상태

알림

📭

새 알림이 없습니다

Props

이름	타입	기본값	설명
`items*`	`ActivityItem[]`	-	Array of activity items to display
`title`	`string`	-	Feed title
`emptyMessage`	`string`	`"활동 내역이 없습니다."`	Message when no items
`showHeader`	`boolean`	`true`	Whether to show header
`maxItems`	`number`	-	Maximum items to display
`onViewAll`	`() => void`	-	View all callback
`viewAllLabel`	`string`	`"View All"`	View all button label
`emptyState`	`React.ReactNode`	-	Custom empty state component

ActivityItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	Unique item identifier
`title*`	`string`	-	Feed title
`description`	`string`	-	Activity description
`timestamp*`	`Date \| string`	-	Activity timestamp
`icon`	`IconName \| React.ReactNode`	-	Activity icon
`badge`	`string \| React.ReactNode`	-	Optional badge
`onClick`	`() => void`	-	클릭 핸들러
`metadata`	`Record<string, unknown>`	-	Additional metadata

코드 예시

기본 사용법

BasicActivityFeed.tsxtsx

import { ActivityFeed } from "@hua-labs/ui/data";

export function BasicActivityFeed() {
  const activities = [
    {
      id: "1",
      title: "New order created",
      description: "Order #1234 has been created",
      timestamp: new Date(),
      icon: "shoppingCart",
      badge: "Complete"
    },
    {
      id: "2",
      title: "Payment processed",
      description: "$50.00 payment completed",
      timestamp: new Date(Date.now() - 3600000),
      icon: "creditCard"
    }
  ];

  return (
    <ActivityFeed
      title="Recent Activity"
      items={activities}
    />
  );
}

최대 항목 수 제한

LimitedActivityFeed.tsxtsx

import { ActivityFeed } from "@hua-labs/ui/data";

export function LimitedActivityFeed() {
  return (
    <ActivityFeed
      title="Activity History"
      items={activities}
      maxItems={5}
      onViewAll={() => navigate("/activities")}
      viewAllLabel="View All"
    />
  );
}

QuickActionCard ProfileCard