OverlayLoading
콘텐츠 위에 로딩 오버레이를 표시하는 컴포넌트
개요
OverlayLoading은 children 콘텐츠 위에 반투명 dim 배경과 스피너를 오버레이로 표시하여 로딩 상태를 나타내는 컴포넌트입니다. 테이블, 차트, 폼 등 특정 영역의 로딩 상태를 표현할 때 사용합니다.
주요 특징
- ✅ 영역 로딩: 페이지 전체가 아닌 특정 영역에 로딩 오버레이 표시
- ✅ dim 커스터마이징: CSS color 값으로 배경 색상 변경 가능
- ✅ 커스텀 아이콘: 기본 Spinner 대신 커스텀 로딩 인디케이터 사용 가능
- ✅ 이벤트 차단: 로딩 중 하위 콘텐츠의 클릭/포인터 이벤트 차단
- ✅ 접근성:
aria-busy,role="status"지원 - ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 사용
Preview
children 콘텐츠 위에 반투명 dim과 Spinner가 표시됩니다.
커스텀 dim 색상
Preview
dim prop으로 배경 색상을 지정할 수 있습니다.
커스텀 아이콘
Preview
icon prop으로 기본 Spinner 대신 커스텀 로딩 인디케이터를 사용할 수 있습니다.
open 제어
Preview
open prop이 false이면 오버레이 없이 children만 표시됩니다.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | true | 로딩 오버레이 표시 여부 |
dim | string | - | dim 배경 색상 (CSS color 값). 미지정 시 토큰 사용 |
icon | React.ReactNode | - | 커스텀 아이콘/콘텐츠 (기본: Spinner) |
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | 오버레이 대상 콘텐츠 |
기본 사용법
import { OverlayLoading } from "@vortex/ui-foundation"
<OverlayLoading open={isLoading}>
<MyContent />
</OverlayLoading>접근성
지원 속성
aria-busy="true": 로딩 중임을 스크린 리더에 전달role="status": 상태 변경을 라이브 리전으로 알림
권장 사항
- ✅ 데이터 로딩 중에만
open={true}설정 - ✅ 로딩 완료 후 즉시
open={false}로 해제 - ❌ 장시간 로딩 시 추가 안내 메시지 없이 스피너만 표시 지양
관련 컴포넌트
- Spinner: 로딩 인디케이터 (OverlayLoading 내부에서 사용)
Last updated on