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

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

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