Skeleton

콘텐츠 로딩 중 표시되는 플레이스홀더 컴포넌트입니다. 다양한 크기와 모양으로 커스터마이징할 수 있습니다.

미리보기

사용법

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

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}

카드 레이아웃

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}

리스트 레이아웃

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}