Spinner

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

개요

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

주요 특징:

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

사용 사례:

Cals 예약 요청 버튼 로딩
일정 로딩 중 표시
데이터 fetch 중 표시
고객 정보 업데이트 중 표시

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

설치


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

기본 사용법


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

🆕 Cals 브랜딩

브랜드 컬러

Cals Spinner는 **Cals Pink (`#e91e63`)**를 기본 색상으로 사용합니다.

예약 상태 컬러

Spinner는 예약 상태에 따라 다양한 색상을 사용할 수 있습니다:


{
  /* 예약 처리 중 - Confirmed Blue */
}
<Spinner className="border-t-[#03a9f4]" />;
 
{
  /* 승인 대기 중 - Pending Orange */
}
<Spinner className="border-t-[#ff9800]" />;
 
{
  /* 예약 완료 - Completed Purple */
}
<Spinner className="border-t-[#9c27b0]" />;

Cals 특화 사용 가이드

예약 요청 버튼:


<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/iCignal과의 차이점

속성	Foundation	iCignal	Cals
기본 색상	중립 블루	`#2196f3` (iCignal Blue)	`#e91e63` (Cals Pink)
사용 맥락	범용 로딩	iCignal 데이터 로딩	Cals 예약 처리
예약 상태	없음	없음	5가지 상태 색상 지원

임시 구현

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-[#e91e63] \${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: Cals 예약 요청 버튼


import "@vortex/ui-cals/theme";
import { Button, Spinner } from "@vortex/ui-cals";
 
export default function BookingButton() {
  const [requesting, setRequesting] = useState(false);
 
  return (
    <Button
      variant="primary"
      onClick={() => setRequesting(true)}
      disabled={requesting}
    >
      {requesting && <Spinner size="sm" className="mr-xs" />}
      {requesting ? "예약 요청 중..." : "예약 요청"}
    </Button>
  );
}

예제 2: Cals 일정 로딩 중


import "@vortex/ui-cals/theme";
import { Spinner } from "@vortex/ui-cals";
 
export default function CalendarLoading() {
  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>
  );
}

예제 3: 예약 상태별 Spinner


import "@vortex/ui-cals/theme";
import { Spinner, Badge } from "@vortex/ui-cals";
 
export default function BookingStatusSpinner() {
  return (
    <div className="space-y-md">
      <div className="flex items-center gap-md">
        <Spinner size="sm" className="border-t-[#ff9800]" />
        <Badge variant="pending">승인 대기 중</Badge>
      </div>
      <div className="flex items-center gap-md">
        <Spinner size="sm" className="border-t-[#03a9f4]" />
        <Badge variant="confirmed">예약 처리 중</Badge>
      </div>
      <div className="flex items-center gap-md">
        <Spinner size="sm" className="border-t-[#9c27b0]" />
        <Badge variant="completed">서비스 진행 중</Badge>
      </div>
    </div>
  );
}