File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-18
08-14
08-18
08-18
08-18
08-18
08-18
08-18
File name
Commit message
Commit date
import type { ReactNode } from "react";
import { cx } from "../../utils";
export interface FoxListToolbarProps {
/** 좌측 첫 자리. 보통 "총 N건"이다 — `FoxListCount`가 시안 서식을 그린다. */
count?: ReactNode;
/** 총 건수 옆 액션(전체 선택·선택 삭제 등). */
leading?: ReactNode;
/** 우측 정렬·조건 셀렉트 묶음. */
sorts?: ReactNode;
/** 우측 검색 상자. */
search?: ReactNode;
/** 우측 끝 액션(등록·엑셀 등). */
actions?: ReactNode;
/** 아래 줄의 필터. 주지 않으면 그 줄 자체가 렌더되지 않는다(구분선도 함께 사라진다). */
filter?: ReactNode;
hidden?: boolean;
className?: string;
}
/**
* @fox 목록 도구 줄 — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar (3002:8151)
*
* 마크업 계약 (React 밖 소비자용):
* <div class="fox-list-toolbar">
* <div class="fox-list-toolbar__base">
* <div class="fox-list-toolbar__left">…총 N건 · 액션…</div>
* <div class="fox-list-toolbar__right">…셀렉트 · 검색 · 액션…</div>
* </div>
* <div class="fox-list-toolbar__filter">…필터…</div> <!-- 선택 -->
* </div>
*
* **자리만 잡는다.** 무엇이 들어갈지는 화면마다 다르므로 전부 슬롯으로 받는다 — 셀렉트가
* 몇 개인지, 액션이 버튼인지 아이콘인지 이 컴포넌트는 알지 못한다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxListToolbar({
count,
leading,
sorts,
search,
actions,
filter,
hidden = false,
className,
}: FoxListToolbarProps) {
if (hidden) {
return null;
}
return (
<div className={cx("fox-list-toolbar", className)}>
<div className="fox-list-toolbar__base">
<div className="fox-list-toolbar__left">
{count}
{leading}
</div>
<div className="fox-list-toolbar__right">
{sorts && <div className="fox-list-toolbar__sorts">{sorts}</div>}
{search}
{actions}
</div>
</div>
{filter && <div className="fox-list-toolbar__filter">{filter}</div>}
</div>
);
}
export interface FoxListCountProps {
/** 전체 건수. */
total: number;
/** 숫자 앞뒤 문구. 기본은 시안의 "총 N건". */
prefix?: ReactNode;
suffix?: ReactNode;
className?: string;
}
/**
* 총 건수 표시 — 시안이 숫자만 굵고 다른 색이라 별도 조각으로 둔다. 천 단위 구분은
* 호출부의 로케일을 타지 않도록 `toLocaleString("ko-KR")`로 고정한다.
*/
export function FoxListCount({
total,
prefix = "총 ",
suffix = "건",
className,
}: FoxListCountProps) {
return (
<p className={cx("fox-list-count", className)}>
{prefix}
<b className="fox-list-count__value">{total.toLocaleString("ko-KR")}</b>
{suffix}
</p>
);
}