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

커스텀 카드 배치 설정

This commit is contained in:
dohyeons 2025-10-28 15:36:37 +09:00
parent 3f3779c25e
commit e1c40b23fb
1 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -373,10 +373,16 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
);
}
// 위젯 높이에 따라 레이아웃 결정 (세로 1칸이면 가로, 2칸 이상이면 세로)
// 실제 측정된 1칸 높이: 119px
const isHorizontalLayout = element?.size?.height && element.size.height <= 130; // 1칸 여유 (119px + 약간의 마진)
return (
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-1">
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
<div className="grid h-full w-full gap-1" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(35px, 1fr))" }}>
<div
className={`flex h-full w-full overflow-hidden bg-white p-0.5 ${
isHorizontalLayout ? "flex-row gap-0.5" : "flex-col gap-0.5"
}`}
>
{/* 그룹별 카드 (활성화 시) */}
{isGroupByMode &&
groupedCards.map((card, index) => {
@ -388,12 +394,10 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
return (
<div
key={`group-${index}`}
className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
>
<div className="text-[8px] leading-tight text-gray-600">{card.label}</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
{card.value.toLocaleString()}
</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
</div>
);
})}
@ -406,7 +410,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
return (
<div
key={metric.id}
className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
>
<div className="text-[8px] leading-tight text-gray-600">{metric.label}</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
@ -417,6 +421,5 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
);
})}
</div>
</div>
);
}