Spinner

로딩 상태를 표시하는 스피너 컴포넌트입니다.

개요

Spinner는 작업이 진행 중임을 나타내는 회전하는 인디케이터입니다. 버튼, 페이지, 또는 특정 영역의 로딩 상태를 표시할 때 사용합니다.

주요 특징:

3가지 Size (sm, md, lg)
색상 커스터마이징
라벨 텍스트 지원
접근성 최적화

사용 사례:

버튼 로딩 상태
페이지 로딩
데이터 fetch 중 표시
폼 제출 중 표시

알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 다음 패턴을 사용할 수 있습니다.

설치


# Coming Soon
# npx @vortex/cli add spinner --package foundation

기본 사용법


import { Spinner } from "@vortex/ui-foundation";
 
export default function Example() {
  return <Spinner />;
}

Sizes (크기)

Small


<Spinner size="sm" />

Medium (기본)


<Spinner size="md" />

Large


<Spinner size="lg" />

색상 커스터마이징


<Spinner className="text-blue-600" />
<Spinner className="text-green-600" />
<Spinner className="text-red-600" />

라벨 포함


<div className="flex items-center gap-md">
  <Spinner size="sm" />
  <span>로딩 중...</span>
</div>

Props API

Prop	Type	Default	Description
size	’sm’ \| ‘md’ \| ‘lg'	'md’	스피너 크기
className	string	-	추가 CSS 클래스

접근성

Spinner 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

role="status" (상태 표시)
aria-live="polite" (로딩 상태 안내)
aria-label="loading" (스크린 리더용)

스크린 리더 지원:

로딩 중 상태 안내
로딩 완료 안내

예제

예제 1: 버튼 로딩 상태


export default function LoadingButton() {
  const [loading, setLoading] = useState(false);
 
  const handleClick = async () => {
    setLoading(true);
    await saveData();
    setLoading(false);
  };
 
  return (
    <Button onClick={handleClick} disabled={loading}>
      {loading && <Spinner size="sm" className="mr-sm" />}
      {loading ? "저장 중..." : "저장"}
    </Button>
  );
}

예제 2: 페이지 로딩


export default function PageLoader() {
  const { data, loading } = useData();
 
  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="text-center">
          <Spinner size="lg" />
          <p className="mt-md text-gray-600">데이터를 불러오는 중...</p>
        </div>
      </div>
    );
  }
 
  return <div>{/* content */}</div>;
}

예제 3: 인라인 로딩


export default function InlineLoader() {
  return (
    <div className="border rounded-lg p-lg">
      <div className="flex items-center gap-md">
        <Spinner size="sm" />
        <span className="text-sm text-gray-600">
          프로필 정보를 불러오는 중입니다...
        </span>
      </div>
    </div>
  );
}

임시 구현

Spinner 컴포넌트가 구현될 때까지 다음 코드를 사용할 수 있습니다:


// components/Spinner.tsx
export function Spinner({ size = "md", className = "" }) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  };
 
  return (
    <div
      className={`animate-spin rounded-full border-2 border-gray-300 border-t-gray-900 ${sizeClasses[size]} ${className}`}
      role="status"
      aria-label="loading"
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}