NotificationCard

@hua-labs/ui/data

v1.0.0

A card component for displaying notifications with different types (info, warning, error, success) and relative timestamps.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

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

라이브 데모

기본 사용법

알림

3개

새 주문 접수방금 전

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

시스템 점검1시간 전

서버 점검이 예정되어 있습니다

결제 실패2시간 전

결제 처리 중 오류가 발생했습니다

알림 타입

모든 타입

Info방금 전

일반 정보 알림입니다

Success방금 전

작업이 성공적으로 완료되었습니다

Warning방금 전

주의가 필요한 경고입니다

Error방금 전

오류가 발생했습니다

최대 항목 수 제한

최근 알림

4개

새 주문 접수방금 전

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

시스템 점검1시간 전

서버 점검이 예정되어 있습니다

빈 상태

알림

새 알림이 없습니다

Props

이름	타입	기본값	설명
`items*`	`NotificationItem[]`	-	표시할 알림 항목 배열
`title`	`string`	`"Notifications"`	카드 헤더 제목
`emptyMessage`	`string`	`"No notifications"`	항목이 없을 때 표시할 메시지
`maxItems`	`number`	-	최대 표시 항목 수
`onViewAll`	`() => void`	-	'전체 보기' 버튼 핸들러
`viewAllLabel`	`string`	`"View All"`	전체 보기 버튼 레이블
`showHeader`	`boolean`	`true`	헤더 섹션 표시 여부
`showCount`	`boolean`	`true`	알림 수 표시 여부
`emptyState`	`React.ReactNode`	-	커스텀 빈 상태 컴포넌트

NotificationItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	고유 식별자
`title*`	`string`	-	카드 헤더 제목
`message*`	`string`	-	알림 메시지
`timestamp*`	`Date \| string`	-	알림 생성 시각
`type`	`"info" \| "warning" \| "error" \| "success"`	-	알림 타입 (스타일에 영향)
`icon`	`IconName \| React.ReactNode`	-	커스텀 아이콘
`onClick`	`() => void`	-	클릭 핸들러
`href`	`string`	-	항목 링크 URL

코드 예시

기본 사용법

BasicNotificationCard.tsxtsx

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

export function BasicNotificationCard() {
  const notifications = [
    {
      id: "1",
      title: "New Order",
      message: "Order #1234 has been created",
      timestamp: new Date(),
      type: "success" as const
    },
    {
      id: "2",
      title: "System Alert",
      message: "Server maintenance is scheduled",
      timestamp: new Date(Date.now() - 3600000),
      type: "warning" as const
    }
  ];

  return (
    <NotificationCard
      title="Notifications"
      items={notifications}
    />
  );
}

SummaryCard DashboardGridPro