Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into mhkim-node

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
2026-03-13 11:35:07 +09:00 · 2026-03-13 11:29:32 +09:00 · 2026-03-12 15:47:09 +09:00 · 2026-03-12 15:46:54 +09:00 · 2026-03-12 15:43:06 +09:00 · 2026-03-12 15:12:35 +09:00
11 changed files with 1099 additions and 871 deletions
--- a/frontend/components/screen/ResponsiveGridRenderer.tsx
+++ b/frontend/components/screen/ResponsiveGridRenderer.tsx
@ -370,7 +370,46 @@ export function ResponsiveGridRenderer({

        const { normalComps } = processedRow;
        const allButtons = normalComps.every((c) => isButtonComponent(c));
-        const gap = isMobile ? 8 : allButtons ? 8 : getRowGap(normalComps, canvasWidth);
+
+        // 데스크톱에서 버튼만 있는 행: 디자이너의 x, width를 비율로 적용
+        if (allButtons && normalComps.length > 0 && !isMobile) {
+          const rowHeight = Math.max(...normalComps.map(c => c.size?.height || 40));
+
+          return (
+            <div
+              key={`row-${rowIndex}`}
+              className="relative w-full flex-shrink-0"
+              style={{
+                height: `${rowHeight}px`,
+                marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined,
+              }}
+            >
+              {normalComps.map((component) => {
+                const typeId = getComponentTypeId(component);
+                const leftPct = (component.position.x / canvasWidth) * 100;
+                const widthPct = ((component.size?.width || 90) / canvasWidth) * 100;
+
+                return (
+                  <div
+                    key={component.id}
+                    data-component-id={component.id}
+                    data-component-type={typeId}
+                    style={{
+                      position: "absolute",
+                      left: `${leftPct}%`,
+                      width: `${widthPct}%`,
+                      height: `${component.size?.height || 40}px`,
+                    }}
+                  >
+                    {renderComponent(component)}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        }
+
+        const gap = isMobile ? 8 : getRowGap(normalComps, canvasWidth);

        const hasFlexHeightComp = normalComps.some((c) => {
          const h = c.size?.height || 0;
@ -382,7 +421,6 @@ export function ResponsiveGridRenderer({
            key={`row-${rowIndex}`}
            className={cn(
              "flex w-full flex-wrap overflow-hidden",
-              allButtons && "justify-end px-2 py-1",
              hasFlexHeightComp ? "min-h-0 flex-1" : "flex-shrink-0"
            )}
            style={{ gap: `${gap}px`, marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined }}
--- a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
@ -13,7 +13,18 @@ import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { Settings, ChevronDown, Loader2, Type, Hash, Lock, AlignLeft, SlidersHorizontal, Palette, ListOrdered } from "lucide-react";
+import {
+  Settings,
+  ChevronDown,
+  Loader2,
+  Type,
+  Hash,
+  Lock,
+  AlignLeft,
+  SlidersHorizontal,
+  Palette,
+  ListOrdered,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
@ -24,9 +35,15 @@ interface V2InputConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
  menuObjid?: number;
+  allComponents?: any[];
 }

-export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
+export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
+  config,
+  onChange,
+  menuObjid,
+  allComponents = [],
+}) => {
  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
  const [loadingRules, setLoadingRules] = useState(false);
  const [parentMenus, setParentMenus] = useState<any[]>([]);
@ -51,7 +68,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
          const userMenus = allMenus.filter((menu: any) => {
            const menuType = menu.menu_type || menu.menuType;
            const level = menu.level || menu.lev || menu.LEVEL;
-            return menuType === '1' && (level === 2 || level === 3 || level === '2' || level === '3');
+            return menuType === "1" && (level === 2 || level === 3 || level === "2" || level === "3");
          });
          setParentMenus(userMenus);
        }
@ -70,7 +87,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
    const loadRules = async () => {
      const isNumbering = inputType === "numbering" || config.autoGeneration?.type === "numbering_rule";
      if (!isNumbering) return;
-      if (!selectedMenuObjid) { setNumberingRules([]); return; }
+      if (!selectedMenuObjid) {
+        setNumberingRules([]);
+        return;
+      }
      setLoadingRules(true);
      try {
        const response = await getAvailableNumberingRules(selectedMenuObjid);
@ -92,10 +112,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
      {/* ─── 1단계: 입력 타입 선택 (카드 방식) ─── */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
-          <Type className="h-4 w-4 text-muted-foreground" />
+          <Type className="text-muted-foreground h-4 w-4" />
          <p className="text-sm font-medium">입력 타입</p>
        </div>
-        <p className="text-[11px] text-muted-foreground">입력 필드의 종류를 선택해요</p>
+        <p className="text-muted-foreground text-[11px]">입력 필드의 종류를 선택해요</p>
      </div>

      <div className="grid grid-cols-2 gap-2">
@ -132,20 +152,23 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            className={cn(
              "flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
              inputType === item.value
-                ? "border-primary bg-primary/5 ring-1 ring-primary/20"
-                : "border-border hover:border-primary/30 hover:bg-muted/30"
+                ? "border-primary bg-primary/5 ring-primary/20 ring-1"
+                : "border-border hover:border-primary/30 hover:bg-muted/30",
            )}
          >
-            <item.icon className={cn(
-              "h-4 w-4 shrink-0",
-              inputType === item.value ? "text-primary" : "text-muted-foreground"
-            )} />
+            <item.icon
+              className={cn("h-4 w-4 shrink-0", inputType === item.value ? "text-primary" : "text-muted-foreground")}
+            />
            <div className="min-w-0">
-              <span className={cn(
-                "text-xs font-medium block",
-                inputType === item.value ? "text-primary" : "text-foreground"
-              )}>{item.label}</span>
-              <span className="text-[10px] text-muted-foreground block truncate">{item.desc}</span>
+              <span
+                className={cn(
+                  "block text-xs font-medium",
+                  inputType === item.value ? "text-primary" : "text-foreground",
+                )}
+              >
+                {item.label}
+              </span>
+              <span className="text-muted-foreground block truncate text-[10px]">{item.desc}</span>
            </div>
          </button>
        ))}
@ -153,34 +176,34 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,

      {/* ─── 채번 타입 전용 설정 ─── */}
      {inputType === "numbering" && (
-        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
          <div className="flex items-center gap-2">
-            <ListOrdered className="h-4 w-4 text-primary" />
+            <ListOrdered className="text-primary h-4 w-4" />
            <span className="text-sm font-medium">채번 규칙</span>
          </div>

          <div>
-            <p className="mb-1.5 text-xs text-muted-foreground">적용할 메뉴</p>
+            <p className="text-muted-foreground mb-1.5 text-xs">적용할 메뉴</p>
            {menuObjid && selectedMenuObjid === menuObjid ? (
-              <div className="rounded-md border bg-background p-2">
-                <p className="text-xs text-muted-foreground">현재 화면 메뉴 사용 중</p>
+              <div className="bg-background rounded-md border p-2">
+                <p className="text-muted-foreground text-xs">현재 화면 메뉴 사용 중</p>
                <div className="mt-1 flex items-center justify-between">
                  <p className="text-sm font-medium">
-                    {parentMenus.find((m: any) => m.objid === menuObjid)?.menu_name_kor
-                      || parentMenus.find((m: any) => m.objid === menuObjid)?.translated_name
-                      || `메뉴 #${menuObjid}`}
+                    {parentMenus.find((m: any) => m.objid === menuObjid)?.menu_name_kor ||
+                      parentMenus.find((m: any) => m.objid === menuObjid)?.translated_name ||
+                      `메뉴 #${menuObjid}`}
                  </p>
                  <button
                    type="button"
                    onClick={() => setSelectedMenuObjid(undefined)}
-                    className="text-[10px] text-muted-foreground hover:text-foreground"
+                    className="text-muted-foreground hover:text-foreground text-[10px]"
                  >
                    변경
                  </button>
                </div>
              </div>
            ) : loadingMenus ? (
-              <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
+              <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
                <Loader2 className="h-3 w-3 animate-spin" />
                메뉴 목록 로딩 중...
              </div>
@ -216,9 +239,9 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,

          {selectedMenuObjid && (
            <div>
-              <p className="mb-1.5 text-xs text-muted-foreground">채번 규칙</p>
+              <p className="text-muted-foreground mb-1.5 text-xs">채번 규칙</p>
              {loadingRules ? (
-                <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
+                <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
                  <Loader2 className="h-3 w-3 animate-spin" />
                  채번 규칙 로딩 중...
                </div>
@ -243,13 +266,14 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                  <SelectContent>
                    {numberingRules.map((rule) => (
                      <SelectItem key={rule.ruleId} value={String(rule.ruleId)}>
-                        {rule.ruleName} ({rule.separator || "-"}{"{번호}"})
+                        {rule.ruleName} ({rule.separator || "-"}
+                        {"{번호}"})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ) : (
-                <p className="text-xs text-muted-foreground">선택한 메뉴에 등록된 채번 규칙이 없어요</p>
+                <p className="text-muted-foreground text-xs">선택한 메뉴에 등록된 채번 규칙이 없어요</p>
              )}
            </div>
          )}
@ -257,7 +281,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
          <div className="flex items-center justify-between py-1">
            <div>
              <p className="text-sm">읽기전용</p>
-              <p className="text-[11px] text-muted-foreground">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
+              <p className="text-muted-foreground text-[11px]">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
            </div>
            <Switch
              checked={config.readonly !== false}
@ -271,10 +295,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
      {inputType !== "numbering" && (
        <>
          {/* 기본 설정 영역 */}
-          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
            {/* 안내 텍스트 (placeholder) */}
            <div className="flex items-center justify-between py-1">
-              <span className="text-xs text-muted-foreground">안내 텍스트</span>
+              <span className="text-muted-foreground text-xs">안내 텍스트</span>
              <Input
                value={config.placeholder || ""}
                onChange={(e) => updateConfig("placeholder", e.target.value)}
@ -286,7 +310,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            {/* 입력 형식 - 텍스트 타입 전용 */}
            {(inputType === "text" || !config.inputType) && (
              <div className="flex items-center justify-between py-1">
-                <span className="text-xs text-muted-foreground">입력 형식</span>
+                <span className="text-muted-foreground text-xs">입력 형식</span>
                <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
                  <SelectTrigger className="h-7 w-[160px] text-xs">
                    <SelectValue placeholder="형식 선택" />
@ -306,8 +330,8 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            {/* 입력 마스크 */}
            <div className="flex items-center justify-between py-1">
              <div>
-                <span className="text-xs text-muted-foreground">입력 마스크</span>
-                <p className="text-[10px] text-muted-foreground mt-0.5"># = 숫자, A = 문자, * = 모두</p>
+                <span className="text-muted-foreground text-xs">입력 마스크</span>
+                <p className="text-muted-foreground mt-0.5 text-[10px]"># = 숫자, A = 문자, * = 모두</p>
              </div>
              <Input
                value={config.mask || ""}
@ -320,10 +344,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            {/* 숫자/슬라이더: 범위 설정 */}
            {(inputType === "number" || inputType === "slider") && (
              <div className="space-y-2 pt-1">
-                <p className="text-xs text-muted-foreground">값 범위</p>
+                <p className="text-muted-foreground text-xs">값 범위</p>
                <div className="flex gap-2">
                  <div className="flex-1">
-                    <Label className="text-[10px] text-muted-foreground">최소값</Label>
+                    <Label className="text-muted-foreground text-[10px]">최소값</Label>
                    <Input
                      type="number"
                      value={config.min ?? ""}
@ -333,7 +357,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                    />
                  </div>
                  <div className="flex-1">
-                    <Label className="text-[10px] text-muted-foreground">최대값</Label>
+                    <Label className="text-muted-foreground text-[10px]">최대값</Label>
                    <Input
                      type="number"
                      value={config.max ?? ""}
@ -343,7 +367,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                    />
                  </div>
                  <div className="flex-1">
-                    <Label className="text-[10px] text-muted-foreground">단계</Label>
+                    <Label className="text-muted-foreground text-[10px]">단계</Label>
                    <Input
                      type="number"
                      value={config.step ?? ""}
@ -359,7 +383,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            {/* 여러 줄 텍스트: 줄 수 */}
            {inputType === "textarea" && (
              <div className="flex items-center justify-between py-1">
-                <span className="text-xs text-muted-foreground">줄 수</span>
+                <span className="text-muted-foreground text-xs">줄 수</span>
                <Input
                  type="number"
                  value={config.rows || 3}
@ -377,27 +401,27 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
            <CollapsibleTrigger asChild>
              <button
                type="button"
-                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
              >
                <div className="flex items-center gap-2">
-                  <Settings className="h-4 w-4 text-muted-foreground" />
+                  <Settings className="text-muted-foreground h-4 w-4" />
                  <span className="text-sm font-medium">고급 설정</span>
                </div>
                <ChevronDown
                  className={cn(
-                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
-                    advancedOpen && "rotate-180"
+                    "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                    advancedOpen && "rotate-180",
                  )}
                />
              </button>
            </CollapsibleTrigger>
            <CollapsibleContent>
-              <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+              <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
                {/* 자동 생성 토글 */}
                <div className="flex items-center justify-between py-1">
                  <div>
                    <p className="text-sm">자동 생성</p>
-                    <p className="text-[11px] text-muted-foreground">값이 자동으로 채워져요</p>
+                    <p className="text-muted-foreground text-[11px]">값이 자동으로 채워져요</p>
                  </div>
                  <Switch
                    checked={config.autoGeneration?.enabled || false}
@ -412,10 +436,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                </div>

                {config.autoGeneration?.enabled && (
-                  <div className="space-y-3 ml-1 border-l-2 border-primary/20 pl-3">
+                  <div className="border-primary/20 ml-1 space-y-3 border-l-2 pl-3">
                    {/* 자동 생성 타입 */}
                    <div>
-                      <p className="mb-1.5 text-xs text-muted-foreground">생성 방식</p>
+                      <p className="text-muted-foreground mb-1.5 text-xs">생성 방식</p>
                      <Select
                        value={config.autoGeneration?.type || "none"}
                        onValueChange={(value: AutoGenerationType) => {
@ -445,7 +469,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                    </div>

                    {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
-                      <p className="text-[11px] text-muted-foreground">
+                      <p className="text-muted-foreground text-[11px]">
                        {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
                      </p>
                    )}
@ -454,7 +478,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                    {config.autoGeneration?.type === "numbering_rule" && (
                      <div className="space-y-3">
                        <div>
-                          <p className="mb-1.5 text-xs text-muted-foreground">
+                          <p className="text-muted-foreground mb-1.5 text-xs">
                            대상 메뉴 <span className="text-destructive">*</span>
                          </p>
                          <Select
@ -490,11 +514,11 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,

                        {selectedMenuObjid ? (
                          <div>
-                            <p className="mb-1.5 text-xs text-muted-foreground">
+                            <p className="text-muted-foreground mb-1.5 text-xs">
                              채번 규칙 <span className="text-destructive">*</span>
                            </p>
                            {loadingRules ? (
-                              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <div className="text-muted-foreground flex items-center gap-2 text-xs">
                                <Loader2 className="h-3 w-3 animate-spin" />
                                규칙 로딩 중...
                              </div>
@ -544,7 +568,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                        <div className="space-y-3">
                          {["random_string", "random_number"].includes(config.autoGeneration.type) && (
                            <div className="flex items-center justify-between py-1">
-                              <span className="text-xs text-muted-foreground">길이</span>
+                              <span className="text-muted-foreground text-xs">길이</span>
                              <Input
                                type="number"
                                min="1"
@ -565,7 +589,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                          )}

                          <div className="flex items-center justify-between py-1">
-                            <span className="text-xs text-muted-foreground">접두사</span>
+                            <span className="text-muted-foreground text-xs">접두사</span>
                            <Input
                              value={config.autoGeneration?.options?.prefix || ""}
                              onChange={(e) => {
@ -583,7 +607,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                          </div>

                          <div className="flex items-center justify-between py-1">
-                            <span className="text-xs text-muted-foreground">접미사</span>
+                            <span className="text-muted-foreground text-xs">접미사</span>
                            <Input
                              value={config.autoGeneration?.options?.suffix || ""}
                              onChange={(e) => {
@ -600,8 +624,8 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
                          </div>

                          <div>
-                            <span className="text-xs text-muted-foreground">미리보기</span>
-                            <div className="mt-1 rounded-md border bg-muted p-2 text-xs font-mono">
+                            <span className="text-muted-foreground text-xs">미리보기</span>
+                            <div className="bg-muted mt-1 rounded-md border p-2 font-mono text-xs">
                              {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                            </div>
                          </div>
@ -644,10 +668,7 @@ function DataBindingSection({
  const tableListComponents = React.useMemo(() => {
    return allComponents.filter((comp) => {
      const type =
-        comp.componentType ||
-        comp.widgetType ||
-        comp.componentConfig?.type ||
-        (comp.url && comp.url.split("/").pop());
+        comp.componentType || comp.widgetType || comp.componentConfig?.type || (comp.url && comp.url.split("/").pop());
      return type === "v2-table-list";
    });
  }, [allComponents]);
@ -660,11 +681,7 @@ function DataBindingSection({

  const selectedTableName = React.useMemo(() => {
    if (!selectedTableComponent) return null;
-    return (
-      selectedTableComponent.componentConfig?.selectedTable ||
-      selectedTableComponent.selectedTable ||
-      null
-    );
+    return selectedTableComponent.componentConfig?.selectedTable || selectedTableComponent.selectedTable || null;
  }, [selectedTableComponent]);

  // 선택된 테이블의 컬럼 목록 로드
@ -725,9 +742,7 @@ function DataBindingSection({

      {config.dataBinding && (
        <div className="space-y-2 rounded border p-2">
-          <p className="text-[10px] text-muted-foreground">
-            테이블에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다
-          </p>
+          <p className="text-muted-foreground text-[10px]">테이블에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다</p>

          {/* 소스 테이블 컴포넌트 선택 */}
          <div className="space-y-1">
@ -750,8 +765,7 @@ function DataBindingSection({
                </SelectTrigger>
                <SelectContent>
                  {tableListComponents.map((comp) => {
-                    const tblName =
-                      comp.componentConfig?.selectedTable || comp.selectedTable || "";
+                    const tblName = comp.componentConfig?.selectedTable || comp.selectedTable || "";
                    const label = comp.componentConfig?.label || comp.label || comp.id;
                    return (
                      <SelectItem key={comp.id} value={comp.id}>
@ -769,7 +783,7 @@ function DataBindingSection({
            <div className="space-y-1">
              <Label className="text-xs font-medium">가져올 컬럼</Label>
              {loadingColumns ? (
-                <p className="text-[10px] text-muted-foreground">컬럼 로딩 중...</p>
+                <p className="text-muted-foreground text-[10px]">컬럼 로딩 중...</p>
              ) : tableColumns.length === 0 ? (
                <>
                  <Input
@ -783,7 +797,7 @@ function DataBindingSection({
                    placeholder="컬럼명 직접 입력"
                    className="h-7 text-xs"
                  />
-                  <p className="text-[10px] text-muted-foreground">컬럼 정보를 불러올 수 없어 직접 입력</p>
+                  <p className="text-muted-foreground text-[10px]">컬럼 정보를 불러올 수 없어 직접 입력</p>
                </>
              ) : (
                <Select
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
--- a/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
@ -157,10 +157,13 @@ function SortableColumnRow({
      />
      <Input
        value={col.width || ""}
-        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
-        placeholder="너비"
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 20)}
+        placeholder="20"
        className="h-6 w-14 shrink-0 text-xs"
+        min={5}
+        max={100}
      />
+      <span className="text-muted-foreground shrink-0 text-[10px]">%</span>
      {isNumeric && (
        <label
          className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]"
--- a/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
+++ b/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>
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
+++ b/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>
              ))}
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@ -3543,6 +3543,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                              format: undefined, // 🆕 기본값
                            }));

+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const leftTotalColWidth = columnsToShow.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                    // 🔧 그룹화된 데이터 렌더링
                    const hasGroupedLeftActions = !isDesignMode && (
                      (componentConfig.leftPanel?.showEdit !== false) ||
@ -3556,7 +3562,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                              <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                {group.groupKey} ({group.count}개)
                              </div>
-                              <table className="min-w-full divide-y divide-border">
+                              <table className="divide-y divide-border table-fixed" style={{ width: leftTotalColWidth > 100 ? `${leftTotalColWidth}%` : '100%' }}>
                                <thead className="bg-muted">
                                  <tr>
                                    {columnsToShow.map((col, idx) => (
@ -3564,8 +3570,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                        key={idx}
                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                        style={{
-                                          width: col.width ? `${col.width}px` : "auto",
-                                          minWidth: "80px",
+                                          width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                          textAlign: col.align || "left",
                                        }}
                                      >
@ -3654,7 +3659,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                    );
                    return (
                      <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-border">
+                        <table className="divide-y divide-border table-fixed" style={{ width: leftTotalColWidth > 100 ? `${leftTotalColWidth}%` : '100%' }}>
                          <thead className="sticky top-0 z-10 bg-muted">
                            <tr>
                              {columnsToShow.map((col, idx) => (
@ -3662,8 +3667,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                  key={idx}
                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                  style={{
-                                    width: col.width ? `${col.width}px` : "auto",
-                                    minWidth: "80px",
+                                    width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                    textAlign: col.align || "left",
                                  }}
                                >
@ -4659,11 +4663,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        }));
                    }

-                    const tableMinWidth = columnsToShow.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const rightTotalColWidth = columnsToShow.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                    return (
                      <div className="flex h-full w-full flex-col">
                        <div className="min-h-0 flex-1 overflow-auto">
-                          <table style={{ minWidth: `${tableMinWidth}px` }}>
+                          <table className="table-fixed" style={{ width: rightTotalColWidth > 100 ? `${rightTotalColWidth}%` : '100%' }}>
                            <thead className="sticky top-0 z-10">
                              <tr className="border-b-2 border-border/60">
                                {columnsToShow.map((col, idx) => (
@ -4671,8 +4680,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                    key={idx}
                                    className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold whitespace-nowrap"
                                    style={{
-                                      width: col.width ? `${col.width}px` : "auto",
-                                      minWidth: "80px",
+                                      width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                      textAlign: col.align || "left",
                                    }}
                                  >
@ -4683,7 +4691,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                {!isDesignMode &&
                                  ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
                                    (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                    <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold">
+                                    <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold" style={{ width: '80px' }}>
                                      작업
                                    </th>
                                  )}
@ -4762,7 +4770,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                  {
                    // 표시 컬럼 결정
                    const rightColumns = componentConfig.rightPanel?.columns;
-                    let columnsToDisplay: { name: string; label: string; format?: string; bold?: boolean }[] = [];
+                    let columnsToDisplay: { name: string; label: string; format?: string; bold?: boolean; width?: number }[] = [];

                    if (rightColumns && rightColumns.length > 0) {
                      // showInSummary가 false가 아닌 것만 메인 테이블에 표시
@ -4773,6 +4781,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                          label: rightColumnLabels[col.name] || col.label || col.name,
                          format: col.format,
                          bold: col.bold,
+                          width: col.width,
                        }));
                    } else if (filteredData.length > 0) {
                      columnsToDisplay = Object.keys(filteredData[0])
@ -4784,24 +4793,33 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        }));
                    }

+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const displayTotalColWidth = columnsToDisplay.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                    const hasEditButton = !isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true);
                    const hasDeleteButton = !isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true);
                    const hasActions = hasEditButton || hasDeleteButton;

-                    const tableMinW2 = columnsToDisplay.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
                    return filteredData.length > 0 ? (
                      <div className="flex h-full w-full flex-col">
                        <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="text-sm" style={{ minWidth: `${tableMinW2}px` }}>
+                          <table className="table-fixed text-sm" style={{ width: displayTotalColWidth > 100 ? `${displayTotalColWidth}%` : '100%' }}>
                            <thead className="sticky top-0 z-10 bg-background">
                              <tr className="border-b-2 border-border/60">
                                {columnsToDisplay.map((col) => (
-                                  <th key={col.name} className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold">
+                                  <th
+                                    key={col.name}
+                                    className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold whitespace-nowrap"
+                                    style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}
+                                  >
                                    {col.label}
                                  </th>
                                ))}
                                {hasActions && (
-                                  <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold">작업</th>
+                                  <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold" style={{ width: '80px' }}>작업</th>
                                )}
                              </tr>
                            </thead>
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@ -174,10 +174,13 @@ function SortableColumnRow({
      />
      <Input
        value={col.width || ""}
-        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
-        placeholder="너비"
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 20)}
+        placeholder="20"
        className="h-6 w-14 shrink-0 text-xs"
+        min={5}
+        max={100}
      />
+      <span className="text-muted-foreground shrink-0 text-[10px]">%</span>
      {isNumeric && (
        <>
          <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
@ -888,7 +891,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                            updateTab({
                              columns: [
                                ...selectedColumns,
-                                { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 },
+                                { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 },
                              ],
                            });
                          }}
@ -1058,7 +1061,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                          {
                                            name: matchingJoinColumn.joinAlias,
                                            label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                            width: 100,
+                                            width: 20,
                                            isEntityJoin: true,
                                            joinInfo: {
                                              sourceTable: tab.tableName!,
@ -2396,7 +2399,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                        {
                                          name: column.columnName,
                                          label: column.columnLabel || column.columnName,
-                                          width: 100,
+                                          width: 20,
                                        },
                                      ],
                                    });
@ -2466,7 +2469,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                                    label:
                                                      matchingJoinColumn.suggestedLabel ||
                                                      matchingJoinColumn.columnLabel,
-                                                    width: 100,
+                                                    width: 20,
                                                    isEntityJoin: true,
                                                    joinInfo: {
                                                      sourceTable: leftTable!,
@ -3074,7 +3077,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                      {
                                        name: column.columnName,
                                        label: column.columnLabel || column.columnName,
-                                        width: 100,
+                                        width: 20,
                                      },
                                    ],
                                  });
@ -3141,7 +3144,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                                  name: matchingJoinColumn.joinAlias,
                                                  label:
                                                    matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                                  width: 100,
+                                                  width: 20,
                                                  isEntityJoin: true,
                                                  joinInfo: {
                                                    sourceTable: rightTable!,
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
@ -321,8 +321,10 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                    updateLeftPanel({ columns: newColumns });
                                  }}
                                  onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
+                                  widthUnit="%"
                                />
                              );
+
                            })}
                          </div>
                        </SortableContext>
@ -341,7 +343,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                          key={column.columnName}
                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
                          onClick={() => {
-                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
                          }}
                        >
                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@ -394,7 +396,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                        columns: [...selectedColumns, {
                                          name: matchingJoinColumn.joinAlias,
                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
+                                          width: 20,
                                          isEntityJoin: true,
                                          joinInfo: {
                                            sourceTable: leftTable!,
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
@ -321,6 +321,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                    newColumns[index] = { ...newColumns[index], showInDetail: checked };
                                    updateRightPanel({ columns: newColumns });
                                  }}
+                                  widthUnit="%"
                                />
                              );
                            })}
@ -341,7 +342,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                          key={column.columnName}
                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
                          onClick={() => {
-                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
                          }}
                        >
                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@ -394,7 +395,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                        columns: [...selectedColumns, {
                                          name: matchingJoinColumn.joinAlias,
                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
+                                          width: 20,
                                          isEntityJoin: true,
                                          joinInfo: {
                                            sourceTable: rightTable!,
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
+++ b/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="천 단위 구분자 (,)">
Author	SHA1	Message	Date
kmh	bd08b341f0	Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into mhkim-node	2026-03-13 11:35:07 +09:00
kmh	4fe023a813	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	2026-03-13 11:29:32 +09:00
kmh	f28cb5c2f6	Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into mhkim-node	2026-03-12 15:47:09 +09:00
kjs	efd3e2a0cd	fix: update V2PropertiesPanel to use V2FieldConfigPanel for input and select components - Replaced references to V2InputConfigPanel and V2SelectConfigPanel with V2FieldConfigPanel in the V2PropertiesPanel. - This change ensures consistent configuration handling for both input and select components, improving maintainability and usability. Made-with: Cursor	2026-03-12 15:46:54 +09:00
kjs	884cde463f	feat: enhance V2InputConfigPanel with additional UI components - Added Separator and Checkbox components to the V2InputConfigPanel for improved layout and functionality. - This enhancement aims to provide better user interaction and organization within the input configuration settings. Made-with: Cursor	2026-03-12 15:43:06 +09:00
kmh	d22b8f7f07	Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into mhkim-node	2026-03-12 15:12:35 +09:00
kjs	c757ea1733	chore: remove peer dependencies from package-lock.json - Removed unnecessary "peer" entries from various packages in package-lock.json to streamline dependency management and avoid potential conflicts. - This cleanup helps maintain a cleaner and more efficient package structure. Made-with: Cursor	2026-03-12 15:12:26 +09:00
kjs	ca390bb191	Merge branch 'gbpark-node' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node	2026-03-12 15:09:55 +09:00
kmh	9fdcde3e8c	Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into mhkim-node	2026-03-12 14:33:14 +09:00
kjs	d239c9e88e	Merge pull request 'jskim-node' (#413 ) from jskim-node into main Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/413	2026-03-12 14:25:56 +09:00