feat: enhance column width configuration and rendering

- Updated the column width handling in various components to support percentage-based widths, improving layout flexibility.
- Adjusted input fields to enforce minimum and maximum width constraints, ensuring better user experience and preventing layout issues.
- Enhanced the SortableColumnRow and related components to dynamically display width units, allowing for clearer configuration options.

Made-with: Cursor

frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx

@@ -607,18 +607,20 @@ export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
                 </div>
 
                 <div>
-                  <Label className="text-xs">컬럼 너비 (px)</Label>
+                  <Label className="text-xs">컬럼 너비 (%)</Label>
                   <Input
                     type="number"
-                    value={editingColumn.width || ""}
+                    value={editingColumn.width && editingColumn.width <= 100 ? editingColumn.width : ""}
                     onChange={(e) =>
                       setEditingColumn({
                         ...editingColumn,
-                        width: e.target.value ? parseInt(e.target.value) : undefined,
+                        width: e.target.value ? Math.min(100, Math.max(5, parseInt(e.target.value) || 20)) : undefined,
                       })
                     }
                     placeholder="자동"
                     className="mt-1 h-9"
+                    min={5}
+                    max={100}
                   />
                 </div>
               </div>