Skeleton

로딩 상태를 표시하는 플레이스홀더 컴포넌트입니다.
다양한 형태와 프리셋을 지원하여 실제 콘텐츠 로딩 전 UI를 미리 보여줍니다.

설치

Terminal

npx @msub-core/ui-cli add skeleton

기본 사용

기본 Skeleton은 width, height, radius를 조절할 수 있습니다.

TSX

import { Skeleton } from "@msub-core/ui/components/skeleton"

<Skeleton height={20} width="100%" />
<Skeleton height={20} width="80%" />
<Skeleton height={20} width="60%" />

Skeleton Props

Prop	Type	Default	Required	Description
width	string \| number	-	No	너비 (CSS 값)
height	string \| number	-	No	높이 (CSS 값)
radius	"none" \| "sm" \| "default" \| "lg" \| "full"	"default"	No	모서리 둥글기
animation	"pulse" \| "shimmer" \| "none"	"pulse"	No	애니메이션 타입

애니메이션

pulse(기본)와 shimmer 애니메이션을 지원합니다.

Pulse (기본)

Shimmer

SkeletonText

여러 줄의 텍스트 플레이스홀더입니다.

3줄 (기본)

5줄, 큰 텍스트

SkeletonText Props

Prop	Type	Default	Required	Description
lines	number	3	No	줄 수
size	"xs" \| "sm" \| "default" \| "lg" \| "xl"	"default"	No	텍스트 높이
gap	"sm" \| "default" \| "lg"	"default"	No	줄 간격
lastLineWidth	number	60	No	마지막 줄 너비 비율 (%)

SkeletonCircle

원형 플레이스홀더로, 아바타 등에 사용합니다.

SkeletonImage

이미지 플레이스홀더로, 비율을 지정할 수 있습니다.

16:9

4:3

1:1

프리셋: SkeletonCard

카드 형태의 스켈레톤 프리셋입니다.

프리셋: SkeletonListItem

리스트 아이템 형태의 스켈레톤 프리셋입니다.

SkeletonListItem Props

Prop	Type	Default	Required	Description
hasAvatar	boolean	true	No	아바타 표시
avatarSize	"sm" \| "default" \| "lg"	"default"	No	아바타 크기
lines	number	2	No	텍스트 줄 수
hasAction	boolean	false	No	우측 액션 버튼 표시

프리셋: SkeletonTable

테이블 형태의 스켈레톤 프리셋입니다.

SkeletonTable Props

Prop	Type	Default	Required	Description
rows	number	5	No	행 수
columns	number	4	No	열 수
hasHeader	boolean	true	No	헤더 표시

실제 사용 예시

프로필 카드 로딩 상태

TSX

// 프로필 카드 로딩 상태
<div className="rounded-xl border p-6">
  <div className="flex items-center gap-4 mb-4">
    <SkeletonCircle size="xl" />
    <div className="flex-1 space-y-2">
      <Skeleton height={18} width="60%" />
      <Skeleton height={14} width="40%" />
    </div>
  </div>
  <SkeletonText lines={3} size="sm" />
  <div className="flex gap-2 mt-4">
    <Skeleton height={36} className="flex-1" radius="lg" />
    <Skeleton height={36} className="flex-1" radius="lg" />
  </div>
</div>

컴포넌트 목록

Skeleton

기본 사각형 플레이스홀더

SkeletonText

여러 줄 텍스트 플레이스홀더

SkeletonCircle

원형 플레이스홀더 (아바타)

SkeletonImage

이미지 플레이스홀더

SkeletonCard

카드 프리셋

SkeletonListItem

리스트 아이템 프리셋

SkeletonTable

테이블 프리셋