Skeleton

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

개요

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

주요 특징:

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

사용 사례:

iCignal 대시보드 데이터 로딩
리포트 생성 중 표시
분석 결과 로딩
차트 데이터 fetch 중 표시

설치


npx @vortex/cli add skeleton --package icignal

기본 사용법


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

iCignal 브랜딩

iCignal 특화 사용 가이드

대시보드 위젯 로딩:


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

Foundation과의 차이점

속성	Foundation	iCignal
기본 색상	중립적 회색	iCignal 브랜드 계열
애니메이션	Pulse	Pulse (iCignal Blue 톤)
사용 맥락	범용 로딩	iCignal 대시보드/리포트 로딩

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: iCignal 대시보드 카드 로딩


import "@vortex/ui-icignal/theme";
import { Skeleton } from "@vortex/ui-icignal";
 
export default function DashboardCardSkeleton() {
  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: iCignal 분석 리포트 로딩


import "@vortex/ui-icignal/theme";
import { Skeleton } from "@vortex/ui-icignal";
 
export default function ReportSkeleton() {
  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" /> {/* Chart */}
    </div>
  );
}