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>

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

@@ -1751,7 +1751,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           <TableHeader>
             <TableRow>
               {displayColumns.map((col, idx) => (
-                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
+                <TableHead key={idx} style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}>
                   {col.label || col.name}
                 </TableHead>
               ))}
@@ -1952,7 +1952,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
                 </TableHead>
               )}
               {displayColumns.map((col, idx) => (
-                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
+                <TableHead key={idx} style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}>
                   {col.label || col.name}
                 </TableHead>
               ))}