SettlementTimeline

@hua-labs/ui/data

v1.0.0

A timeline component that displays settlement processing stages with status indicators, amounts, and dates.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

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

라이브 데모

기본 사용법

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request Received정산 완료Auto processed
Settlement request received from merchant
₩1,500,000
2026. 4. 16. AM 4:45
Fee Settlement정산 완료
Fees have been deducted
₩1,455,000
2026. 4. 17. AM 4:45
Bank Transfer Processing처리 중
Transfer request in progress
₩1,455,000
Deposit Expected대기
Expected within 1-2 business days
₩1,455,000
2026. 4. 20. AM 4:45

하이라이트 포함

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request Received정산 완료Auto processed
Settlement request received from merchant
₩1,500,000
2026. 4. 16. AM 4:45
Fee Settlement정산 완료
Fees have been deducted
₩1,455,000
2026. 4. 17. AM 4:45
Bank Transfer Processing처리 중
Transfer request in progress
₩1,455,000
Deposit Expected대기
Expected within 1-2 business days
₩1,455,000
2026. 4. 20. AM 4:45

상태 유형

Success Flow

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Completed정산 완료
₩100,000
Processing처리 중
₩100,000
Pending대기
₩100,000

Failed Flow

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request정산 완료
₩500,000
2026. 4. 17. AM 4:45
Processing Failed실패
Failed due to account information error
₩500,000

빈 상태

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

정산 단계가 없습니다

정산 요청이 생성되면 자동으로 단계가 채워집니다.

Props

이름	타입	기본값	설명
`items*`	`SettlementTimelineItem[]`	-	Array of timeline items
`highlightedId`	`string`	-	ID of the item to highlight
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency
`emptyState`	`React.ReactNode`	-	Custom empty state component
`className`	`string`	-	추가 CSS 클래스

SettlementTimelineItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	Unique item identifier
`title*`	`string`	-	Item title
`description`	`string`	-	Item description
`status*`	`"pending" \| "processing" \| "completed" \| "failed"`	-	Settlement status
`amount`	`number`	-	Settlement amount
`currency`	`string`	-	Currency code
`date`	`string \| Date`	-	Date/time of the step
`meta`	`string`	-	Additional meta information
`icon`	`IconName`	-	Custom icon

코드 예시

기본 사용법

BasicSettlementTimeline.tsxtsx

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

export function BasicSettlementTimeline() {
  const items = [
    {
      id: "1",
      title: "Settlement Request",
      status: "completed" as const,
      amount: 1000000,
      currency: "KRW",
      date: new Date("2024-01-01")
    },
    {
      id: "2",
      title: "Processing",
      status: "processing" as const,
      amount: 1000000,
      currency: "KRW"
    },
    {
      id: "3",
      title: "Settlement Expected",
      status: "pending" as const,
      amount: 1000000,
      currency: "KRW",
      date: new Date("2024-01-05")
    }
  ];

  return <SettlementTimeline items={items} />;
}

TransactionDetailDrawerPro RoutingBreakdownCardPro