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>
-              <div className="flex items-center gap-1">
-                <Input
-                  type="number"
-                  min={1}
-                  max={gridSettings?.columns || 12}
-                  step="1"
-                  value={(selectedComponent as any).gridColumns || 1}
-                  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}%`);
-                    }
-                  }}
-                  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 className="space-y-1">
+            <Label className="text-xs">너비 (px)</Label>
+            <div className="flex items-center gap-1">
+              <Input
+                type="number"
+                min={10}
+                max={3840}
+                step="10"
+                value={selectedComponent.size?.width || 100}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  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" }}
+              />
             </div>
-          )}
+          </div>
           <div className="space-y-1">
             <Label className="text-xs">Z-Index</Label>
             <Input