Skip to Content
ComponentsFoundationBasicSkeleton

Skeleton

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

개요

Skeleton은 콘텐츠가 로딩 중임을 시각적으로 표현하는 컴포넌트입니다. 실제 콘텐츠의 형태를 미리 보여줌으로써 사용자 경험을 개선합니다.

주요 특징:

  • 다양한 형태 (텍스트, 원형, 사각형)
  • 애니메이션 옵션
  • 여러 줄 스켈레톤 지원
  • 커스터마이징 가능

사용 사례:

  • 데이터 로딩 중 표시
  • 이미지 로딩 중 표시
  • 프로필 카드 로딩
  • 리스트 아이템 로딩

설치

npx @vortex/cli add skeleton --package foundation

기본 사용법

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

Variants (변형)

텍스트 스켈레톤

<div className="space-y-sm">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

원형 스켈레톤

<Skeleton className="h-12 w-12 rounded-full" />

사각형 스켈레톤

<Skeleton className="h-48 w-full rounded-md" />

애니메이션

Pulse (기본)

<Skeleton animate="pulse" className="h-4 w-full" />

Wave

<Skeleton animate="wave" className="h-4 w-full" />

None (애니메이션 없음)

<Skeleton animate="none" className="h-4 w-full" />

Props API

PropTypeDefaultDescription
animate’pulse’ | ‘wave’ | ‘none''pulse’애니메이션 타입
classNamestring-추가 CSS 클래스

접근성

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

ARIA 속성:

  • aria-busy="true" (로딩 상태 표시)
  • aria-live="polite" (콘텐츠 로드 완료 안내)

스크린 리더 지원:

  • 로딩 중 상태 안내
  • 콘텐츠 로드 완료 안내

예제

예제 1: 프로필 카드 스켈레톤

export default function ProfileSkeleton() {
  return (
    <div className="flex items-center space-x-md">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-sm flex-1">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  );
}

예제 2: 카드 리스트 스켈레톤

export default function CardListSkeleton() {
  return (
    <div className="grid grid-cols-3 gap-md">
      {[1, 2, 3].map((i) => (
        <div key={i} className="border rounded-lg p-md space-y-md">
          <Skeleton className="h-40 w-full rounded-md" />
          <Skeleton className="h-6 w-3/4" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      ))}
    </div>
  );
}

예제 3: 테이블 스켈레톤

export default function TableSkeleton() {
  return (
    <div className="space-y-md">
      {[1, 2, 3, 4, 5].map((i) => (
        <div key={i} className="flex gap-md">
          <Skeleton className="h-4 w-1/6" />
          <Skeleton className="h-4 w-1/3" />
          <Skeleton className="h-4 w-1/4" />
          <Skeleton className="h-4 w-1/6" />
        </div>
      ))}
    </div>
  );
}

관련 컴포넌트

  • Spinner - 로딩 스피너
  • Card - 카드 로딩 상태
Last updated on
DividerSpinner