MerchantList

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { MerchantList } from "@hua-labs/ui/advanced/dashboard";

가맹점이 없습니다

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

Props


`items*`	`MerchantListItem[]`	-	Array of merchant items
`isLoading`	`boolean`	`false`	Show loading state
`filters`	`React.ReactNode`	-	Filter components
`emptyState`	`React.ReactNode`	-	Custom empty state component
`onMerchantSelect`	`(merchant: MerchantListItem) => void`	-	Merchant selection handler
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency

MerchantListItem


`id*`	`string`	-	Unique merchant identifier
`name*`	`string`	-	Merchant name
`status`	`string`	-	Merchant status
`health`	`"normal" \| "warning" \| "critical"`	-	Health status indicator
`approvalRate`	`number`	-	Approval rate (0-100)
`volume`	`number`	-	Transaction volume
`currency`	`string`	-	Currency code
`category`	`string`	-	Business category
`region`	`string`	-	Region/location
`updatedAt`	`string \| Date`	-	Last updated time
`tag`	`string`	-	Custom tag
`icon`	`IconName \| React.ReactNode`	-	Merchant icon
`metadata`	`Array<{ label: string; value: React.ReactNode }>`	-	Additional metadata

BasicMerchantList.tsxtsx

import { MerchantList } from "@hua-labs/ui/advanced/dashboard";

export function BasicMerchantList() {
  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 (
    <MerchantList
      items={merchants}
      onMerchantSelect={(merchant) => console.log(merchant)}
    />
  );
}

RoutingBreakdownCardPro HeroSection