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

feat: 차지 컬럼 수를 픽셀 기반 너비 입력으로 변경 (10px 단위)

This commit is contained in:
kjs 2025-11-10 15:17:33 +09:00
parent 1d26b979ac
commit 2d832c56b6
1 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
View File

@ -401,38 +401,30 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
</div> </div>
)} )}
{/* Grid Columns + Z-Index (같은 행) */} {/* Width + Z-Index (같은 행) */}
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{(selectedComponent as any).gridColumns !== undefined && ( <div className="space-y-1">
<div className="space-y-1"> <Label className="text-xs">너비 (px)</Label>
<Label className="text-xs">차지 컬럼 수</Label> <div className="flex items-center gap-1">
<div className="flex items-center gap-1"> <Input
<Input type="number"
type="number" min={10}
min={1} max={3840}
max={gridSettings?.columns || 12} step="10"
step="1" value={selectedComponent.size?.width || 100}
value={(selectedComponent as any).gridColumns || 1} onChange={(e) => {
onChange={(e) => { const value = parseInt(e.target.value, 10);
const value = parseInt(e.target.value, 10); if (!isNaN(value) && value >= 10) {
const maxColumns = gridSettings?.columns || 12; // 10px 단위로 스냅
if (!isNaN(value) && value >= 1 && value <= maxColumns) { const snappedValue = Math.round(value / 10) * 10;
handleUpdate("gridColumns", value); handleUpdate("size.width", snappedValue);
}
// width를 퍼센트로 계산하여 업데이트 }}
const widthPercent = (value / maxColumns) * 100; className="h-6 w-full px-2 py-0 text-xs"
handleUpdate("style.width", `${widthPercent}%`); style={{ fontSize: "12px" }}
} />
}}
className="h-6 w-full px-2 py-0 text-xs"
style={{ fontSize: "12px" }}
/>
<span className="text-muted-foreground text-[10px] whitespace-nowrap">
/{gridSettings?.columns || 12}
</span>
</div>
</div> </div>
)} </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">Z-Index</Label> <Label className="text-xs">Z-Index</Label>
<Input <Input