Skeleton

로딩 상태를 표시하는 스켈레톤 컴포넌트입니다.

개요

Skeleton은 콘텐츠가 로딩 중임을 시각적으로 표현하는 컴포넌트입니다. Cals Skeleton은 Cals 브랜드 스타일에 맞춰 디자인되었으며, 예약 관리 및 일정 로딩 시 사용됩니다.

주요 특징:

다양한 형태 (텍스트, 원형, 사각형)
Pulse/Wave 애니메이션
여러 줄 스켈레톤 지원
Cals 브랜드 컬러 적용

사용 사례:

Cals 예약 목록 데이터 로딩
고객 정보 로딩 중 표시
일정 캘린더 로딩
예약 상세 정보 fetch 중 표시

설치


npx @vortex/cli add skeleton --package cals

기본 사용법


import "@vortex/ui-cals/theme";
import { Skeleton } from "@vortex/ui-cals";
 
export default function Example() {
  return <Skeleton className="w-full h-4" />;
}

🆕 Cals 브랜딩

Cals 특화 사용 가이드

예약 카드 로딩:


<Card>
  <CardHeader>
    <Skeleton className="h-6 w-1/3" />
  </CardHeader>
  <CardContent>
    <Skeleton className="h-32 w-full" />
  </CardContent>
</Card>

예약 목록 테이블 로딩:


<div className="space-y-sm">
  <Skeleton className="h-10 w-full" /> {/* Header */}
  <Skeleton className="h-8 w-full" /> {/* Row 1 */}
  <Skeleton className="h-8 w-full" /> {/* Row 2 */}
  <Skeleton className="h-8 w-full" /> {/* Row 3 */}
</div>

예약 상태 컬러 적용

예약 상태별로 다른 색상의 Skeleton을 사용할 수 있습니다:


{
  /* 예약 확정 상태 - Confirmed Blue */
}
<Skeleton className="w-full h-4 bg-blue-100" />;
 
{
  /* 승인 대기 상태 - Pending Orange */
}
<Skeleton className="w-full h-4 bg-orange-100" />;
 
{
  /* 예약 가능 - Available Green */
}
<Skeleton className="w-full h-4 bg-green-100" />;

🆕 Foundation/iCignal과의 차이점

속성	Foundation	iCignal	Cals
기본 색상	중립적 회색	iCignal 브랜드 계열	Cals 브랜드 계열
애니메이션	Pulse	Pulse (iCignal Blue 톤)	Pulse (Cals Pink 톤)
사용 맥락	범용 로딩	iCignal 대시보드/리포트	Cals 예약/일정 로딩
예약 상태	없음	없음	5가지 상태 색상 지원

Props API

| Prop | Type | Default | Description | | --------- | ---------- | --------- | --------------- | ------- | --------------- | | animate | ‘pulse’ \ | ‘wave’ \ | ‘none’ | ‘pulse’ | 애니메이션 타입 | | className | string | - | 추가 CSS 클래스 |

접근성

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

ARIA 속성:

`aria-busy=“true”` (로딩 상태 표시)
`aria-live=“polite”` (스크린 리더 안내)

예제

예제 1: Cals 예약 카드 로딩


import "@vortex/ui-cals/theme";
import { Skeleton } from "@vortex/ui-cals";
 
export default function BookingCardSkeleton() {
  return (
    <Card className="p-lg">
      <div className="flex items-center gap-md mb-md">
        <Skeleton className="h-12 w-12 rounded-full" />
        <div className="flex-1">
          <Skeleton className="h-5 w-1/3 mb-sm" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <Skeleton className="h-32 w-full rounded-md" />
    </Card>
  );
}

예제 2: Cals 일정 목록 로딩


import "@vortex/ui-cals/theme";
import { Skeleton } from "@vortex/ui-cals";
 
export default function CalendarSkeleton() {
  return (
    <div className="space-y-lg">
      <Skeleton className="h-8 w-1/4" /> {/* Title */}
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
      <Skeleton className="h-4 w-4/5" />
      <Skeleton className="h-64 w-full rounded-md mt-lg" /> {/* Calendar */}
    </div>
  );
}

예제 3: 예약 상태별 Skeleton


import "@vortex/ui-cals/theme";
import { Skeleton, Badge } from "@vortex/ui-cals";
 
export default function BookingStatusSkeleton() {
  return (
    <div className="space-y-md">
      <div>
        <Badge variant="available">예약 가능</Badge>
        <Skeleton className="h-20 w-full mt-sm bg-green-50" />
      </div>
      <div>
        <Badge variant="pending">승인 대기</Badge>
        <Skeleton className="h-20 w-full mt-sm bg-orange-50" />
      </div>
      <div>
        <Badge variant="confirmed">예약 확정</Badge>
        <Skeleton className="h-20 w-full mt-sm bg-blue-50" />
      </div>
    </div>
  );
}