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

에러 해결

This commit is contained in:
dohyeons 2025-10-27 15:46:13 +09:00
parent 270c322daf
commit 8788b47663
2 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/components/dashboard/DashboardViewer.tsx
View File

@ -364,6 +364,13 @@ interface ViewerElementProps {
* - 태블릿 이하: 세로 스택 카드 레이아웃
*/
function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWidth = 1920 }: ViewerElementProps) {
const [isMounted, setIsMounted] = useState(false);
// 마운트 확인 (Leaflet 지도 초기화 문제 해결)
useEffect(() => {
setIsMounted(true);
}, []);
if (isMobile) {
// 태블릿 이하: 세로 스택 카드 스타일
return (
@ -397,7 +404,11 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
</div>
)}
<div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
{element.type === "chart" ? (
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
</div>
) : element.type === "chart" ? (
<ChartRenderer element={element} data={data} width={undefined} height={250} />
) : (
renderWidget(element)
@ -454,16 +465,17 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
</button>
</div>
)}
<div
className={element.showHeader !== false ? "h-[calc(100%-57px)] w-full" : "h-full w-full"}
style={{ minHeight: "300px" }}
>
{element.type === "chart" ? (
<div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
</div>
) : element.type === "chart" ? (
<ChartRenderer
element={element}
data={data}
width={undefined}
height={Math.max(element.size.height - 57, 300)}
height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
/>
) : (
renderWidget(element)

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

@ -374,9 +374,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
}
return (
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-4">
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-2">
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
<div className="grid h-full w-full gap-3" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))" }}>
<div className="grid h-full w-full gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))" }}>
{/* 그룹별 카드 (활성화 시) */}
{isGroupByMode &&
groupedCards.map((card, index) => {
@ -388,10 +388,10 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
return (
<div
key={`group-${index}`}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-3`}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
>
<div className="text-xs text-gray-600">{card.label}</div>
<div className={`mt-1 text-2xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
<div className="text-[10px] text-gray-600">{card.label}</div>
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
</div>
);
})}
@ -404,12 +404,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
return (
<div
key={metric.id}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-3`}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
>
<div className="text-xs text-gray-600">{metric.label}</div>
<div className={`mt-1 text-2xl font-bold ${colors.text}`}>
<div className="text-[10px] text-gray-600">{metric.label}</div>
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>
{formattedValue}
<span className="ml-1 text-base">{metric.unit}</span>
<span className="ml-0.5 text-sm">{metric.unit}</span>
</div>
</div>
);