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-14
08-19
08-18
08-18
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import { cx } from "../../utils";
export type FoxBadgeDotColor = "primary" | "new";
export interface FoxBadgeDotProps {
color?: FoxBadgeDotColor;
/**
* 개수. 주면 숫자 배지가 되고, 없으면 점 하나로 나온다 — 시안의 badge-number와
* badge-dot이다.
*/
count?: number;
/** 넘으면 `99+`처럼 적는다. `count`가 없으면 쓰이지 않는다. */
max?: number;
/**
* 스크린리더가 읽을 말. 점만 있을 때는 눈에 보이는 글자가 없어 이걸로 알린다.
* 옆 요소가 이미 알리고 있으면 빈 문자열을 줘서 잠재운다.
*/
label?: string;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 알림 배지. 개수를 주면 숫자로, 안 주면 점으로 나온다.
*
* 시안의 badge-number와 badge-dot을 하나로 둔다 — 둘 다 알림 표시이고 색 축(primary·new)이
* 같으며, 개수를 아느냐 모르느냐만 다르다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxBadgeDot({
color = "primary",
count,
max,
label,
hidden = false,
className,
}: FoxBadgeDotProps) {
if (hidden) {
return null;
}
const counted = count !== undefined;
const text = counted && max !== undefined && count > max ? `${max}+` : `${count}`;
const spoken = label ?? (counted ? `새 알림 ${text}건` : "새 알림");
return (
<span
className={cx(
"fox-badge-dot",
`fox-badge-dot--${color}`,
counted && "fox-badge-dot--counted",
className
)}
role={spoken ? "status" : undefined}
aria-label={spoken || undefined}
>
{/* 보이는 숫자는 읽히지 않게 한다 — 위 `aria-label`이 이미 같은 말을 한다. */}
{counted && <span aria-hidden="true">{text}</span>}
</span>
);
}