EntityList

@hua-labs/ui/data

v1.0.0

A list component for displaying merchants with health status, approval rates, transaction volumes, and interactive selection.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

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

라이브 데모

기본 사용법

건강 상태별

정상

경고

위험

로딩 상태

빈 상태

가맹점이 없습니다

검색어를 변경하거나 새로운 가맹점을 온보딩하세요.

Props

이름	타입	기본값	설명
`items*`	`MerchantListItem[]`	-	가맹점 항목 배열
`isLoading`	`boolean`	`false`	로딩 상태 표시
`filters`	`React.ReactNode`	-	필터 컴포넌트
`emptyState`	`React.ReactNode`	-	커스텀 빈 상태 컴포넌트
`onMerchantSelect`	`(merchant: MerchantListItem) => void`	-	가맹점 선택 핸들러
`locale`	`string`	`"ko-KR"`	포매팅에 사용할 로케일
`defaultCurrency`	`string`	`"KRW"`	기본 통화

EntityListItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	고유 가맹점 식별자
`name*`	`string`	-	가맹점 이름
`status`	`string`	-	가맹점 상태
`health`	`"normal" \| "warning" \| "critical"`	-	헬스 상태 지표
`approvalRate`	`number`	-	승인율 (0-100)
`volume`	`number`	-	거래 볼륨
`currency`	`string`	-	통화 코드
`category`	`string`	-	비즈니스 카테고리
`region`	`string`	-	지역/위치
`updatedAt`	`string \| Date`	-	마지막 업데이트 시각
`tag`	`string`	-	커스텀 태그
`icon`	`IconName \| React.ReactNode`	-	가맹점 아이콘
`metadata`	`Array<{ label: string; value: React.ReactNode }>`	-	추가 메타데이터

코드 예시

기본 사용법

BasicEntityList.tsxtsx

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

export function BasicEntityList() {
  const merchants = [
    {
      id: "1",
      name: "Merchant A",
      health: "normal" as const,
      approvalRate: 98.5,
      volume: 15000000,
      currency: "KRW",
      category: "Restaurant",
      region: "Seoul"
    },
    {
      id: "2",
      name: "Merchant B",
      health: "warning" as const,
      approvalRate: 92.3,
      volume: 8500000,
      currency: "KRW",
      category: "Retail",
      region: "Busan"
    }
  ];

  return (
    <EntityList
      items={merchants}
      onMerchantSelect={(merchant) => console.log(merchant)}
    />
  );
}

RoutingBreakdownCardPro YearlyHeatmap