32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
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 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
|
<div className="relative h-16 w-16">
|
|
<LoadingWithAnimation color="primary" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingOverlay;
|