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/v2-split-panel-layout/config-panels/SharedComponents.tsx

@@ -13,7 +13,7 @@ import { Check, ChevronsUpDown, GripVertical, Link2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export function SortableColumnRow({
-  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange,
+  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange, widthUnit,
 }: {
   id: string;
   col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean };
@@ -27,6 +27,7 @@ export function SortableColumnRow({
   onRemove: () => void;
   onShowInSummaryChange?: (checked: boolean) => void;
   onShowInDetailChange?: (checked: boolean) => void;
+  widthUnit?: string;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
   const style = { transform: CSS.Transform.toString(transform), transition };
@@ -57,10 +58,13 @@ export function SortableColumnRow({
       />
       <Input
         value={col.width || ""}
-        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
-        placeholder="너비"
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || (widthUnit === "%" ? 20 : 100))}
+        placeholder={widthUnit === "%" ? "20" : "너비"}
         className="h-6 w-14 shrink-0 text-xs"
+        min={widthUnit === "%" ? 5 : undefined}
+        max={widthUnit === "%" ? 100 : undefined}
       />
+      <span className="text-muted-foreground shrink-0 text-[10px]">{widthUnit || "px"}</span>
       {isNumeric && (
         <>
           <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">