30 lines
893 B
TypeScript
30 lines
893 B
TypeScript
/**
|
|
* 📄 Loading Overlay Component
|
|
* 로딩 오버레이 컴포넌트
|
|
*
|
|
* - 로딩 상태에 따른 오버레이 표시 및 숨김
|
|
* - 반투명 배경을 통한 사용자 인터랙션 차단
|
|
* - 애니메이션 로딩 아이콘 표시
|
|
* - 고정 위치 및 z-index를 통한 최상위 레이어 배치
|
|
* - 조건부 렌더링을 통한 성능 최적화
|
|
*/
|
|
import React from 'react';
|
|
import { LoadingWithAnimation } from '@common/components/ui/loading';
|
|
|
|
interface LoadingOverlayProps {
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading }) => {
|
|
if (!isLoading) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
|
<div className="relative w-16 h-16">
|
|
<LoadingWithAnimation color="primary" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingOverlay; |