# Skeleton

내용이 불러와지기 전에 그 자리를 채우는 깜빡이는 막대다.

- 분류: 알림과 안내
- 가져오기: `import { Skeleton } from '@/ui/feedback'`
- 코드 위치: `apps/mobile/src/ui/feedback.tsx:64` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/skeleton

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/skeleton 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 목록이나 카드의 내용이 로딩 중일 때, 나중에 올 내용과 같은 크기로 놓는다.
- 여러 개를 쌓아 문단이나 행의 모양을 흉내 낸다.

### 쓰지 않는다
- 2초 넘게 걸리는 작업에 막대만 두지 않는다. 진행 안내(`Notice` `busy`)를 더한다.
- 실제 내용과 크기가 다르게 놓지 않는다. 내용이 나타날 때 화면이 튄다.

## 종류

종류가 없다. 높이, 폭, 모서리로 모양을 정한다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 16, 폭 100%, 모서리 8 | `height`, `width`, `radiusValue`로 바꾼다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 깜빡임 | 투명도가 0.5와 1 사이를 700ms씩 오간다. 끝없이 반복한다. |

## 사용 방법

### 기본

```tsx
import { Skeleton } from '@/ui/feedback';

<View style={{ flexDirection: 'row', gap: space.md }}>
  <Skeleton height={42} width={42} radiusValue={14} />
  <View style={{ flex: 1, gap: space.sm }}>
    <Skeleton height={14} width="60%" />
    <Skeleton height={12} />
  </View>
</View>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `height` | `number` | `16` | 선택 | 높이(px). 기본 16. |
| `width` | `number \| `${number}%`` | `'100%'` | 선택 | 폭(px 또는 "60%" 같은 문자열). 기본 `"100%"`. |
| `radiusValue` | `number` | `8` | 선택 | 모서리(px). 기본 8. |
| `style` | `object` | — | 선택 | 위치를 맞추는 추가 스타일. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 색 | `skeleton` |
| 움직임 | 투명도 0.5 ↔ 1, 700ms씩(`Animated.loop`) |

## 접근성

- 웹 미리보기는 `prefers-reduced-motion`이면 깜빡이지 않는다. 앱은 아직 그 설정을 읽지 않는다.
- 막대에는 이름이 없다. 로딩 중이라는 사실은 부모에 접근성 이름("불러오는 중")을 달아 알린다.

## 잘한 예와 잘못한 예

- 잘한 예: 나중에 올 내용과 같은 크기로 놓는다.
- 잘못한 예: 크기가 다르면 내용이 나타날 때 화면이 튄다.

## 함께 보는 컴포넌트

- [EmptyState](https://developers.moring.co/tds/components/empty-state.md): 보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.
- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.