File name
Commit message
Commit date
File name
Commit message
Commit date
import { FoxSpinner } from '@/@fox/core/components/fox-spinner';
import styles from './spinner.module.scss';
type SpinnerSize = 'sm' | 'md' | 'lg';
type SpinnerTone = 'primary' | 'inverse' | 'muted';
/** 시안에 크기 축이 없어 이 앱이 쓰던 세 단계를 그대로 유지한다. */
const SIZE_PX: Record<SpinnerSize, number> = {
sm: 16,
md: 24,
lg: 32,
};
const TONE_CLASS: Record<SpinnerTone, string> = {
primary: styles.primary,
inverse: styles.inverse,
muted: styles.muted,
};
interface SpinnerProps {
size?: SpinnerSize;
tone?: SpinnerTone;
/** 스크린리더 전용 안내 문구. 기본 '불러오는 중'. */
label?: string;
}
/**
* 로딩 인디케이터. 상태 없는 프레젠테이션 컴포넌트 — 표시 여부는 호출부 책임.
*
* 모양은 디자인 시스템의 `FoxSpinner`가 갖는다. 이 껍데기는 앱이 쓰던 size·tone 축을
* 그대로 유지해 호출부를 건드리지 않으려고 남겨 둔다.
*/
export function Spinner({ size = 'md', tone = 'primary', label = '불러오는 중' }: SpinnerProps) {
return (
<FoxSpinner className={TONE_CLASS[tone]} size={SIZE_PX[size]} label={label} />
);
}