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-18
08-18
08-18
08-18
08-18
File name
Commit message
Commit date
import type { ReactNode, Ref } from "react";
import { cx } from "../../utils";
/** `FoxAlert`·`FoxHelperText`와 같은 다섯 계열이다 — 시안이 같은 축을 쓴다. */
export type FoxStatusIndicatorType =
| "default"
| "information"
| "success"
| "warning"
| "danger";
export interface FoxStatusIndicatorProps {
/** 점과 글자의 색이 여기서 갈린다. */
type?: FoxStatusIndicatorType;
/** 상태를 나타내는 글자. */
label: ReactNode;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
id?: string;
/** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 쓴다. */
className?: string;
ref?: Ref<HTMLSpanElement>;
}
/** `Record`로 고정해 계열을 추가하면 항목 누락이 타입 에러가 되게 한다. */
const TYPE_CLASS: Record<FoxStatusIndicatorType, string> = {
default: "fox-status-indicator--default",
information: "fox-status-indicator--information",
success: "fox-status-indicator--success",
warning: "fox-status-indicator--warning",
danger: "fox-status-indicator--danger",
};
/**
* @fox 상태 표시. 작은 점 하나와 글자로 상태를 알린다. 크기 수식어가 없다 — 시안에 하나뿐이다.
*
* **점은 장식이다**(`aria-hidden`). 상태의 의미는 글자가 전부 담는다 — 색만으로 뜻을 전하면
* 색을 구분하지 못하는 사용자에게는 아무것도 전달되지 않기 때문이고, 그래서 `label`이
* 선택값이 아니라 필수값이다.
*
* 값이 바뀌는 것을 소리로 알려야 하는 자리(예: 처리 중 → 완료)라면 감싼 쪽이 live region을
* 만든다 — 이 조각은 상태를 갖지 않으므로 스스로 알리지 않는다.
*
* 상호작용이 없어 `"use client"`가 아니다 — 서버 컴포넌트로 렌더된다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxStatusIndicator({
type = "default",
label,
hidden = false,
id,
className,
ref,
}: FoxStatusIndicatorProps) {
if (hidden) {
return null;
}
return (
<span
ref={ref}
id={id}
className={cx("fox-status-indicator", TYPE_CLASS[type], className)}
>
<span className="fox-status-indicator__dot" aria-hidden="true" />
<span className="fox-status-indicator__label">{label}</span>
</span>
);
}