Skeleton

콘텐츠 로딩 중 표시되는 플레이스홀더 컴포넌트입니다. width, height, borderRadius 속성으로 다양한 크기와 모양을 자유롭게 커스터마이징할 수 있으며, 부드러운 shimmer 애니메이션으로 로딩 상태를 시각적으로 표현합니다. borderRadius="50%"로 원형 스켈레톤을 만들 수 있어 아바타, 카드, 리스트 등 다양한 UI 레이아웃의 로딩 상태를 구성할 수 있습니다. aria-busy, aria-live 속성을 통한 접근성 지원, 다크 모드 자동 대응, prefers-reduced-motion을 통한 애니메이션 제어를 제공합니다.

미리보기

사용법

TSX

1"use client";
2
3import { Skeleton } from "motile-ui";
4
5export default function PreviewExample() {
6  return (
7    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "100%", maxWidth: "400px" }}>
8      <Skeleton width="100%" height="20px" />
9      <Skeleton width="80%" height="20px" />
10      <Skeleton width="60%" height="20px" />
11    </div>
12  );
13}

API 레퍼런스

Skeleton

로딩 상태를 표시하는 Skeleton 컴포넌트

속성	타입	기본값	설명
`width`	`string \| number`	`"100%"`	Skeleton 너비 (string 또는 number)
`height`	`string \| number`	`"1rem"`	Skeleton 높이 (string 또는 number)
`borderRadius`	`string \| number`	`"4px"`	Skeleton border radius (string 또는 number)
`className`	`string`	`-`	CSS 클래스명
`style`	`React.CSSProperties`	`-`	인라인 스타일 객체

기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.

예제

원형 Skeleton

TSX

1"use client";
2
3import { Skeleton } from "motile-ui";
4
5export default function CircleExample() {
6  return (
7    <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
8      <Skeleton width={40} height={40} borderRadius="50%" />
9      <Skeleton width={60} height={60} borderRadius="50%" />
10      <Skeleton width={80} height={80} borderRadius="50%" />
11    </div>
12  );
13}

카드 레이아웃

TSX

1"use client";
2
3import { Skeleton } from "motile-ui";
4
5export default function CardExample() {
6  return (
7    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "100%", maxWidth: "400px", padding: "24px", border: "1px solid #e5e5e5", borderRadius: "12px" }}>
8      <Skeleton width="100%" height={200} borderRadius="8px" />
9      <Skeleton width="60%" height="24px" borderRadius="4px" />
10      <Skeleton width="100%" height="16px" borderRadius="4px" />
11      <Skeleton width="100%" height="16px" borderRadius="4px" />
12      <Skeleton width="80%" height="16px" borderRadius="4px" />
13    </div>
14  );
15}

리스트 레이아웃

TSX

1"use client";
2
3import { Skeleton } from "motile-ui";
4
5export default function ListExample() {
6  return (
7    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "100%", maxWidth: "400px" }}>
8      {[1, 2, 3].map((item) => (
9        <div key={item} style={{ display: "flex", alignItems: "center", gap: "12px" }}>
10          <Skeleton width={48} height={48} borderRadius="50%" />
11          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "8px" }}>
12            <Skeleton width="70%" height="16px" />
13            <Skeleton width="50%" height="14px" />
14          </div>
15        </div>
16      ))}
17    </div>
18  );
19}