chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

샤드시옌으로 쫙 수정

Browse Source
This commit is contained in:
leeheejin
2025-10-29 17:53:03 +09:00
parent 2517261db9
commit 437e0c331c
87 changed files with 1493 additions and 1491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/components/dashboard/widgets/CustomStatsWidget.tsx
View File

@@ -600,26 +600,26 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
// 색상 매핑
const getColorClasses = (color: string) => {
const colorMap: { [key: string]: { bg: string; text: string } } = {
indigo: { bg: "bg-indigo-50", text: "text-indigo-600" },
green: { bg: "bg-green-50", text: "text-green-600" },
blue: { bg: "bg-blue-50", text: "text-blue-600" },
purple: { bg: "bg-purple-50", text: "text-purple-600" },
orange: { bg: "bg-orange-50", text: "text-orange-600" },
yellow: { bg: "bg-yellow-50", text: "text-yellow-600" },
cyan: { bg: "bg-cyan-50", text: "text-cyan-600" },
pink: { bg: "bg-pink-50", text: "text-pink-600" },
teal: { bg: "bg-teal-50", text: "text-teal-600" },
gray: { bg: "bg-gray-50", text: "text-gray-600" },
indigo: { bg: "bg-primary/10", text: "text-primary" },
green: { bg: "bg-success/10", text: "text-success" },
blue: { bg: "bg-primary/10", text: "text-primary" },
purple: { bg: "bg-purple-500/10", text: "text-purple-500" },
orange: { bg: "bg-warning/10", text: "text-warning" },
yellow: { bg: "bg-warning/10", text: "text-warning" },
cyan: { bg: "bg-primary/10", text: "text-primary" },
pink: { bg: "bg-muted", text: "text-foreground" },
teal: { bg: "bg-primary/10", text: "text-primary" },
gray: { bg: "bg-muted", text: "text-foreground" },
};
return colorMap[color] || colorMap.gray;
};
if (isLoading && stats.length === 0) {
return (
<div className="flex h-full items-center justify-center bg-gray-50">
<div className="flex h-full items-center justify-center bg-muted">
<div className="text-center">
<div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" />
<div className="mt-2 text-sm text-gray-600">로딩 중...</div>
<div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
<div className="mt-2 text-sm text-foreground">로딩 중...</div>
</div>
</div>
);
@@ -627,14 +627,14 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
if (error) {
return (
<div className="flex h-full items-center justify-center bg-gray-50 p-4">
<div className="flex h-full items-center justify-center bg-muted p-4">
<div className="text-center">
<div className="mb-2 text-4xl">⚠️</div>
<div className="text-sm font-medium text-gray-600">{error}</div>
{!element?.dataSource?.query && <div className="mt-2 text-xs text-gray-500">쿼리를 설정하세요</div>}
<div className="text-sm font-medium text-foreground">{error}</div>
{!element?.dataSource?.query && <div className="mt-2 text-xs text-muted-foreground">쿼리를 설정하세요</div>}
<button
onClick={loadData}
className="mt-3 rounded-lg bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
>
다시 시도
</button>
@@ -645,11 +645,11 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
if (stats.length === 0) {
return (
<div className="flex h-full items-center justify-center bg-gray-50 p-4">
<div className="flex h-full items-center justify-center bg-muted p-4">
<div className="text-center">
<div className="mb-2 text-4xl">📊</div>
<div className="text-sm font-medium text-gray-600">데이터 없음</div>
<div className="mt-2 text-xs text-gray-500">쿼리를 실행하여 통계를 확인하세요</div>
<div className="text-sm font-medium text-foreground">데이터 없음</div>
<div className="mt-2 text-xs text-muted-foreground">쿼리를 실행하여 통계를 확인하세요</div>
</div>
</div>
);
@@ -685,13 +685,13 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
// console.log("🎨 렌더링 - allStats:", allStats.map(s => s.label));
return (
<div className="relative flex h-full flex-col bg-white">
<div className="relative flex h-full flex-col bg-background">
{/* 헤더 영역 */}
<div className="flex items-center justify-between border-b bg-gray-50 px-4 py-2">
<div className="flex items-center justify-between border-b bg-muted px-4 py-2">
<div className="flex items-center gap-2">
<span className="text-lg">📊</span>
<span className="text-sm font-medium text-gray-700">커스텀 통계</span>
<span className="text-xs text-gray-500">({stats.length}개 표시 중)</span>
<span className="text-sm font-medium text-foreground">커스텀 통계</span>
<span className="text-xs text-muted-foreground">({stats.length}개 표시 중)</span>
</div>
<button
onClick={() => {
@@ -701,7 +701,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
setSelectedStats(currentLabels);
setShowSettings(true);
}}
className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100"
className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm text-foreground hover:bg-muted"
title="표시할 통계 선택"
>
<span>⚙️</span>
@@ -716,7 +716,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
const colors = getColorClasses(stat.color);
return (
<div key={index} className={`rounded-lg border ${colors.bg} p-4 text-center`}>
<div className="text-sm text-gray-600">{stat.label}</div>
<div className="text-sm text-foreground">{stat.label}</div>
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>
{stat.value.toFixed(stat.unit === "%" || stat.unit === "분" ? 1 : 0).toLocaleString()}
<span className="ml-1 text-lg">{stat.unit}</span>
@@ -730,15 +730,15 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
{/* 설정 모달 */}
{showSettings && (
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/50">
<div className="max-h-[80%] w-[90%] max-w-md overflow-auto rounded-lg bg-white p-6 shadow-xl">
<div className="max-h-[80%] w-[90%] max-w-md overflow-auto rounded-lg bg-background p-6 shadow-xl">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-bold">표시할 통계 선택</h3>
<button onClick={() => setShowSettings(false)} className="text-2xl text-gray-500 hover:text-gray-700">
<button onClick={() => setShowSettings(false)} className="text-2xl text-muted-foreground hover:text-foreground">
×
</button>
</div>
<div className="mb-4 text-sm text-gray-600">표시하고 싶은 통계를 선택하세요 (최대 제한 없음)</div>
<div className="mb-4 text-sm text-foreground">표시하고 싶은 통계를 선택하세요 (최대 제한 없음)</div>
<div className="space-y-2">
{allStats.map((stat, index) => {
@@ -747,7 +747,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
<label
key={index}
className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
isChecked ? "border-blue-500 bg-blue-50" : "hover:bg-gray-50"
isChecked ? "border-primary bg-primary/10" : "hover:bg-muted"
}`}
>
<input
@@ -761,9 +761,9 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
/>
<div className="flex-1">
<div className="font-medium">{stat.label}</div>
<div className="text-sm text-gray-500">단위: {stat.unit}</div>
<div className="text-sm text-muted-foreground">단위: {stat.unit}</div>
</div>
{isChecked && <span className="text-blue-600">✓</span>}
{isChecked && <span className="text-primary">✓</span>}
</label>
);
})}
@@ -772,7 +772,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
<div className="mt-6 flex gap-2">
<button
onClick={handleApplySettings}
className="flex-1 rounded-lg bg-blue-500 py-2 text-white hover:bg-blue-600"
className="flex-1 rounded-lg bg-primary py-2 text-white hover:bg-primary/90"
>
적용 ({selectedStats.length}개 선택)
</button>
@@ -781,7 +781,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
// console.log("❌ 설정 취소");
setShowSettings(false);
}}
className="rounded-lg border px-4 py-2 hover:bg-gray-50"
className="rounded-lg border px-4 py-2 hover:bg-muted"
>
취소
</button>