kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

커스텀 통계 카드 위젯을 수정

This commit is contained in:
dohyeons 2025-11-14 11:35:16 +09:00
parent 2eb8c3a61b
commit 05273daa92
2 changed files with 17 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
View File

@ -209,10 +209,10 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
if (loading) {
return (
<div className="flex h-full items-center justify-center bg-background">
<div className="bg-background flex h-full items-center justify-center">
<div className="text-center">
<div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
<p className="mt-2 text-sm text-muted-foreground">데이터 로딩 중...</p>
<p className="text-muted-foreground mt-2 text-sm">데이터 로딩 중...</p>
</div>
</div>
);
@ -220,12 +220,12 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
if (error) {
return (
<div className="flex h-full items-center justify-center bg-background p-4">
<div className="bg-background flex h-full items-center justify-center p-4">
<div className="text-center">
<p className="text-sm text-destructive">⚠️ {error}</p>
<p className="text-destructive text-sm">⚠️ {error}</p>
<button
onClick={loadData}
className="mt-2 rounded bg-destructive/10 px-3 py-1 text-xs text-destructive hover:bg-destructive/20"
className="bg-destructive/10 text-destructive hover:bg-destructive/20 mt-2 rounded px-3 py-1 text-xs"
>
다시 시도
</button>
@ -244,10 +244,10 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
// 설정이 없으면 안내 화면
if (!hasDataSource || !hasConfig) {
return (
<div className="flex h-full items-center justify-center bg-background p-4">
<div className="bg-background flex h-full items-center justify-center p-4">
<div className="max-w-xs space-y-2 text-center">
<h3 className="text-sm font-bold text-foreground">통계 카드</h3>
<div className="space-y-1.5 text-xs text-foreground">
<h3 className="text-foreground text-sm font-bold">통계 카드</h3>
<div className="text-foreground space-y-1.5 text-xs">
<p className="font-medium">📊 단일 통계 위젯</p>
<ul className="space-y-0.5 text-left">
<li>• 데이터 소스에서 쿼리를 실행합니다</li>
@ -256,7 +256,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
<li>• COUNT, SUM, AVG, MIN, MAX 지원</li>
</ul>
</div>
<div className="mt-2 rounded-lg bg-primary/10 p-2 text-[10px] text-primary">
<div className="bg-primary/10 text-primary mt-2 rounded-lg p-2 text-[10px]">
<p className="font-medium">⚙️ 설정 방법</p>
<p>1. 데이터 탭에서 쿼리 실행</p>
<p>2. 필터 조건 추가 (선택사항)</p>
@ -274,7 +274,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
// 통계 카드 렌더링 (전체 크기 꽉 차게)
return (
<div className="flex h-full w-full flex-col items-center justify-center rounded-lg border bg-card p-6 text-center shadow-sm">
<div className="bg-card flex h-full w-full flex-col items-center justify-center rounded-lg p-6 text-center">
{/* 제목 */}
<div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
@ -283,11 +283,6 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
<span className="text-primary text-4xl font-bold">{formattedValue}</span>
{config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
</div>
{/* 필터 표시 (디버깅용, 작게) */}
{config?.filters && config.filters.length > 0 && (
<div className="text-muted-foreground mt-2 text-xs">필터: {config.filters.length}개 적용됨</div>
)}
</div>
);
}

23
frontend/components/dashboard/widgets/CustomMetricWidget.tsx
View File

@ -268,23 +268,14 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
// 통계 카드 렌더링
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<div className="flex flex-col items-center justify-center rounded-lg border bg-card p-6 text-center shadow-sm">
{/* 제목 */}
<div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
<div className="flex h-full w-full flex-col items-center justify-center bg-card p-6 text-center">
{/* 제목 */}
<div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
{/* 값 */}
<div className="flex items-baseline gap-1">
<span className="text-primary text-4xl font-bold">{formattedValue}</span>
{config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
</div>
{/* 필터 표시 (디버깅용, 작게) */}
{config?.filters && config.filters.length > 0 && (
<div className="text-muted-foreground mt-2 text-xs">
필터: {config.filters.length}개 적용됨
</div>
)}
{/* 값 */}
<div className="flex items-baseline gap-1">
<span className="text-primary text-4xl font-bold">{formattedValue}</span>
{config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
</div>
</div>
);