feat: enhance ResponsiveGridRenderer with row margin calculations

- Added rowMinY and rowMaxBottom properties to ProcessedRow for improved layout calculations.
- Implemented dynamic margin adjustments between rows in the ResponsiveGridRenderer to enhance visual spacing.
- Refactored TabsWidget to streamline the ResponsiveGridRenderer integration, removing unnecessary wrapper divs for cleaner structure.
- Introduced ScaledCustomPanel for better handling of component rendering in split panel layouts.

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, onRemove, onShowInSummaryChange, onShowInDetailChange,
+  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange,
 }: {
   id: string;
   col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean };
@@ -23,6 +23,7 @@ export function SortableColumnRow({
   onLabelChange: (value: string) => void;
   onWidthChange: (value: number) => void;
   onFormatChange: (checked: boolean) => void;
+  onSuffixChange?: (value: string) => void;
   onRemove: () => void;
   onShowInSummaryChange?: (checked: boolean) => void;
   onShowInDetailChange?: (checked: boolean) => void;
@@ -61,15 +62,24 @@ export function SortableColumnRow({
         className="h-6 w-14 shrink-0 text-xs"
       />
       {isNumeric && (
-        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
-          <input
-            type="checkbox"
-            checked={col.format?.thousandSeparator ?? false}
-            onChange={(e) => onFormatChange(e.target.checked)}
-            className="h-3 w-3"
+        <>
+          <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
+            <input
+              type="checkbox"
+              checked={col.format?.thousandSeparator ?? false}
+              onChange={(e) => onFormatChange(e.target.checked)}
+              className="h-3 w-3"
+            />
+            ,
+          </label>
+          <Input
+            value={col.format?.suffix || ""}
+            onChange={(e) => onSuffixChange?.(e.target.value)}
+            placeholder="단위"
+            title="값 뒤에 붙는 단위 (예: mm, kg, %)"
+            className="h-6 w-10 shrink-0 text-[10px]"
           />
-          ,
-        </label>
+        </>
       )}
       {onShowInSummaryChange && (
         <label className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]" title="테이블 헤더에 표시">