d7f491fa84
- LoadingSpinner 컴포넌트 5가지 변형 구현 - LoadingSpinner (인라인/버튼용) - ContentLoadingSpinner (상세/수정 페이지) - PageLoadingSpinner (페이지 전환) - TableLoadingSpinner (테이블/리스트) - ButtonSpinner (버튼 내부) - 18개+ 페이지 로딩 UI 표준화 - HR 페이지 (사원, 휴가, 부서, 급여, 근태) - 영업 페이지 (견적, 거래처) - 게시판, 팝업관리, 품목기준정보 - API 키 보안 개선 (NEXT_PUBLIC_API_KEY → API_KEY) - Textarea 다크모드 스타일 개선 - DropdownField Radix UI Select 버그 수정 (key prop) - 프로젝트 헬스 개선 계획서 문서화 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
/**
|
|
* 로딩 스피너 컴포넌트 (표준화됨)
|
|
*
|
|
* 사용 가이드:
|
|
* - LoadingSpinner: 인라인/버튼 내부/작은 영역용
|
|
* - ContentLoadingSpinner: 컨텐츠 영역 로딩용 (상세/수정 페이지)
|
|
* - PageLoadingSpinner: 페이지 전환용 (loading.tsx, 전체 페이지)
|
|
*
|
|
* 스타일: border-4 border-solid border-primary border-r-transparent
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
// ============================================
|
|
// 1. 기본 스피너 (인라인/버튼 내부용)
|
|
// ============================================
|
|
interface LoadingSpinnerProps {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
className?: string;
|
|
text?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
xs: 'h-3 w-3 border-2',
|
|
sm: 'h-4 w-4 border-2',
|
|
md: 'h-8 w-8 border-3',
|
|
lg: 'h-12 w-12 border-4'
|
|
};
|
|
|
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
|
size = 'md',
|
|
className = '',
|
|
text
|
|
}) => {
|
|
return (
|
|
<div className={`flex flex-col items-center justify-center gap-2 ${className}`}>
|
|
<div
|
|
className={`animate-spin rounded-full border-solid border-primary border-r-transparent ${sizeClasses[size]}`}
|
|
/>
|
|
{text && <p className="text-sm text-muted-foreground">{text}</p>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// 2. 컨텐츠 영역 스피너 (상세/수정 페이지용)
|
|
// ============================================
|
|
interface ContentLoadingSpinnerProps {
|
|
text?: string;
|
|
}
|
|
|
|
export const ContentLoadingSpinner: React.FC<ContentLoadingSpinnerProps> = ({
|
|
text = '불러오는 중...'
|
|
}) => {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="text-center space-y-3">
|
|
<div className="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
|
|
<p className="text-sm text-muted-foreground">{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// 3. 페이지 레벨 스피너 (페이지 전환용)
|
|
// ============================================
|
|
interface PageLoadingSpinnerProps {
|
|
text?: string;
|
|
}
|
|
|
|
export const PageLoadingSpinner: React.FC<PageLoadingSpinnerProps> = ({
|
|
text = '페이지를 불러오는 중...'
|
|
}) => {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[calc(100vh-200px)]">
|
|
<div className="text-center space-y-4">
|
|
<div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
|
|
<p className="text-muted-foreground font-medium">{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// 4. 테이블/리스트 오버레이 스피너
|
|
// ============================================
|
|
interface TableLoadingSpinnerProps {
|
|
text?: string;
|
|
rows?: number;
|
|
}
|
|
|
|
export const TableLoadingSpinner: React.FC<TableLoadingSpinnerProps> = ({
|
|
text = '데이터를 불러오는 중...',
|
|
rows = 5
|
|
}) => {
|
|
return (
|
|
<div className="flex items-center justify-center py-16">
|
|
<div className="text-center space-y-3">
|
|
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
|
|
<p className="text-sm text-muted-foreground">{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// 5. 버튼 내부 스피너 (저장 중 등)
|
|
// ============================================
|
|
export const ButtonSpinner: React.FC = () => {
|
|
return (
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent" />
|
|
);
|
|
}; |