TransactionDetailDrawer

@hua-labs/ui/data

v1.0.0

A drawer component for displaying detailed transaction information including metadata, settlement info, fee breakdown, and event logs.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

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

라이브 데모

기본 사용법

정산 포함

Props

이름	타입	기본값	설명
`open*`	`boolean`	-	Drawer open state
`onClose*`	`() => void`	-	Close handler
`transaction`	`TransactionDetail`	-	Transaction detail information
`metadata`	`TransactionMetadataItem[]`	`[]`	Additional metadata items
`settlement`	`SettlementInfo`	-	Settlement information
`fees`	`FeeBreakdown[]`	`[]`	Fee breakdown items
`events`	`TransactionEvent[]`	`[]`	Event log items
`actions`	`React.ReactNode`	-	Footer action buttons
`summary`	`React.ReactNode`	-	Custom summary component
`loading`	`boolean`	`false`	Loading state
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency
`emptyState`	`React.ReactNode`	-	Custom empty state when no transaction

TransactionDetail

Props

이름	타입	기본값	설명
`id*`	`string`	-	Transaction ID
`status*`	`TransactionStatus`	-	Transaction status
`amount*`	`number`	-	Transaction amount
`currency`	`string`	-	Currency code
`merchant`	`string`	-	Merchant name
`method`	`string`	-	Payment method
`createdAt`	`string \| Date`	-	Created date
`approvedAt`	`string \| Date`	-	Approved date
`customer`	`string`	-	Customer information
`reference`	`string`	-	Reference number

코드 예시

기본 사용법

BasicTransactionDrawer.tsxtsx

import { useState } from "react";
import { DetailDrawer } from "@hua-labs/ui/data";
import { Button } from "@hua-labs/ui";

export function BasicTransactionDrawer() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        View Transaction
      </Button>
      <TransactionDetailDrawer
        open={open}
        onClose={() => setOpen(false)}
        transaction={{
          id: "tx_123456",
          status: "approved",
          amount: 150000,
          currency: "KRW",
          merchant: "Test Merchant",
          method: "Credit Card",
          createdAt: new Date(),
          customer: "John Doe"
        }}
        metadata={[
          { label: "Transaction ID", value: "tx_123456", icon: "wallet" },
          { label: "Customer", value: "John Doe", icon: "user" }
        ]}
      />
    </>
  );
}

TransactionsTablePro SettlementTimelinePro