Spinner

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

개요

Spinner는 작업이 진행 중임을 나타내는 회전하는 인디케이터입니다. iCignal Spinner는 iCignal Blue 컬러를 사용하여 브랜드 일관성을 유지합니다.

주요 특징:

3가지 Size (sm, md, lg)
iCignal Blue 컬러 적용
라벨 텍스트 지원
접근성 최적화

사용 사례:

iCignal 분석 시작 버튼 로딩
리포트 생성 중 표시
데이터 fetch 중 표시
대시보드 업데이트 중 표시

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

설치


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

기본 사용법


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

iCignal 브랜딩

브랜드 컬러

iCignal Spinner는 **iCignal Blue (#2196f3)**를 기본 색상으로 사용합니다.

iCignal 특화 사용 가이드

분석 시작 버튼:


<Button variant="primary" disabled>
  <Spinner size="sm" className="mr-xs" />
  분석 중...
</Button>

대시보드 전체 로딩:


<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>

Foundation과의 차이점

속성	Foundation	iCignal
기본 색상	중립 블루	`#2196f3` (iCignal Blue)
사용 맥락	범용 로딩	iCignal 데이터 로딩

임시 구현

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-[#2196f3] ${sizeClasses[size]} ${className}`}
      role="status"
      aria-label="loading"
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}

Props API

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

접근성

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

ARIA 속성:

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

예제

예제 1: iCignal 분석 시작 버튼


import "@vortex/ui-icignal/theme";
import { Button, Spinner } from "@vortex/ui-icignal";
 
export default function AnalysisButton() {
  const [analyzing, setAnalyzing] = useState(false);
 
  return (
    <Button
      variant="primary"
      onClick={() => setAnalyzing(true)}
      disabled={analyzing}
    >
      {analyzing && <Spinner size="sm" className="mr-xs" />}
      {analyzing ? "분석 중..." : "데이터 분석 시작"}
    </Button>
  );
}

예제 2: iCignal 리포트 생성 중


import "@vortex/ui-icignal/theme";
import { Spinner } from "@vortex/ui-icignal";
 
export default function ReportLoading() {
  return (
    <div className="flex flex-col items-center justify-center py-xl">
      <Spinner size="lg" />
      <p className="mt-md text-lg font-semibold">리포트 생성 중</p>
      <p className="mt-sm text-sm text-gray-600">잠시만 기다려 주세요...</p>
    </div>
  );
}