Display component는 model list, timestamp, loading feedback, empty state, table/pagination surface를 렌더링합니다. generated model list에는 `Data`, local UI state에는 standalone helper를 우선 사용합니다.

Data

generated model list와 dashboard display를 위한 namespace입니다. `Data.ListContainer`가 주요 high-level component이며, lower-level helper로 `TableList`, `CardList`, `Pagination`, `Dashboard`, `Insight`를 제공합니다.

Props / API

이름	타입	설명
Data.ListContainer	{ slice, type?, columns?, actions?, tools? }	기능이 많은 generated model list container입니다.
Data.TableList	{ slice, columns, actions?, renderView? }	generated store state와 연결된 table-style list입니다.
Data.Pagination	{ slice, className? }	generated slice page state에 묶인 pagination control입니다.

사용 예시

RecentTime

절대 시간을 tooltip으로 제공하는 localized relative-time label입니다. 설정한 break unit 이후에는 relative label 대신 formatted date로 전환됩니다.

Props / API

이름	타입	설명
date	Date \| Dayjs \| null	렌더링할 date 값입니다. null이면 아무것도 렌더링하지 않습니다.
breakUnit	Intl.RelativeTimeFormatUnit	relative display를 멈추고 date formatting을 시작할 기준 unit입니다.
format	"auto" \| "full"	자동 compact format 또는 전체 date-time format입니다.

사용 예시

Loading

async UI를 위한 loading indicator namespace입니다. full-area overlay, button, input, progress bar, skeleton, spinner를 포함합니다.

Props / API

이름	타입	설명
Loading.Area	component	local area를 막는 absolute overlay입니다.
Loading.Skeleton	{ active?, className?, style? }	pending content를 위한 skeleton placeholder입니다.
Loading.Button	component	button에 넣기 좋은 loading indicator입니다.
Loading.Spin	component	단순 spinner입니다.

사용 예시

Empty

localized default description과 optional child content를 제공하는 표준 no-data state입니다.

Props / API

이름	타입	설명
description	ReactNode	custom empty-state text입니다. 기본값은 localized `base.noData`입니다.
minHeight	number	empty body의 최소 높이(px)입니다.
children	ReactNode	empty state 아래에 렌더링되는 optional follow-up action 또는 설명입니다.

사용 예시

Table

data-heavy screen에서 사용하는 responsive table wrapper입니다. column renderer, row click handler, loading state, empty state, optional `Pagination`을 지원합니다.

Props / API

이름	타입	설명
columns	Column[]	optional responsive visibility를 포함하는 header/cell 정의입니다.
dataSource	unknown[]	table에 렌더링되는 row 목록입니다.
pagination	PaginationProps \| false	pagination 설정이거나 비활성화를 위한 false입니다.
onRow	(record, index) => handlers	click navigation 같은 row event를 만드는 factory입니다.

사용 예시

Pagination

standalone page-number control입니다. pagination state가 local이면 이 컴포넌트를 사용하고, model slice에서 생성된 state라면 `Data.Pagination`을 사용합니다.

Props / API

이름	타입	설명
currentPage	number	현재 1-based page number입니다.
total	number	전체 item 수입니다.
itemsPerPage	number	page당 item 수입니다.
onPageSelect	(page: number) => void	선택한 1-based page number와 함께 호출됩니다.

사용 예시

Display UI

Data

Props / API

이름	타입	설명
Data.ListContainer	{ slice, type?, columns?, actions?, tools? }	기능이 많은 generated model list container입니다.
Data.TableList	{ slice, columns, actions?, renderView? }	generated store state와 연결된 table-style list입니다.
Data.Pagination	{ slice, className? }	generated slice page state에 묶인 pagination control입니다.

사용 예시

RecentTime

절대 시간을 tooltip으로 제공하는 localized relative-time label입니다. 설정한 break unit 이후에는 relative label 대신 formatted date로 전환됩니다.

Props / API

이름	타입	설명
date	Date \| Dayjs \| null	렌더링할 date 값입니다. null이면 아무것도 렌더링하지 않습니다.
breakUnit	Intl.RelativeTimeFormatUnit	relative display를 멈추고 date formatting을 시작할 기준 unit입니다.
format	"auto" \| "full"	자동 compact format 또는 전체 date-time format입니다.

사용 예시

Loading

async UI를 위한 loading indicator namespace입니다. full-area overlay, button, input, progress bar, skeleton, spinner를 포함합니다.

Props / API

이름	타입	설명
Loading.Area	component	local area를 막는 absolute overlay입니다.
Loading.Skeleton	{ active?, className?, style? }	pending content를 위한 skeleton placeholder입니다.
Loading.Button	component	button에 넣기 좋은 loading indicator입니다.
Loading.Spin	component	단순 spinner입니다.

사용 예시

Empty

localized default description과 optional child content를 제공하는 표준 no-data state입니다.

Props / API

이름	타입	설명
description	ReactNode	custom empty-state text입니다. 기본값은 localized `base.noData`입니다.
minHeight	number	empty body의 최소 높이(px)입니다.
children	ReactNode	empty state 아래에 렌더링되는 optional follow-up action 또는 설명입니다.

사용 예시

Table

data-heavy screen에서 사용하는 responsive table wrapper입니다. column renderer, row click handler, loading state, empty state, optional `Pagination`을 지원합니다.

Props / API

이름	타입	설명
columns	Column[]	optional responsive visibility를 포함하는 header/cell 정의입니다.
dataSource	unknown[]	table에 렌더링되는 row 목록입니다.
pagination	PaginationProps \| false	pagination 설정이거나 비활성화를 위한 false입니다.
onRow	(record, index) => handlers	click navigation 같은 row event를 만드는 factory입니다.

사용 예시

Pagination

standalone page-number control입니다. pagination state가 local이면 이 컴포넌트를 사용하고, model slice에서 생성된 state라면 `Data.Pagination`을 사용합니다.

Props / API

이름	타입	설명
currentPage	number	현재 1-based page number입니다.
total	number	전체 item 수입니다.
itemsPerPage	number	page당 item 수입니다.
onPageSelect	(page: number) => void	선택한 1-based page number와 함께 호출됩니다.

사용 예시