Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

2025-11-17 13:08:16 +09:00
parent a6e6a14fd1 660f81edbc
commit d1d76bbea8
7 changed files with 103 additions and 52 deletions
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -29,7 +29,14 @@ export interface ComponentRenderer {
    // 테이블 선택된 행 정보 (다중 선택 액션용)
    selectedRows?: any[];
    selectedRowsData?: any[];
-    onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[], tableDisplayData?: any[]) => void;
+    onSelectedRowsChange?: (
+      selectedRows: any[],
+      selectedRowsData: any[],
+      sortBy?: string,
+      sortOrder?: "asc" | "desc",
+      columnOrder?: string[],
+      tableDisplayData?: any[],
+    ) => void;
    // 테이블 정렬 정보 (엑셀 다운로드용)
    sortBy?: string;
    sortOrder?: "asc" | "desc";
@@ -110,7 +117,14 @@ export interface DynamicComponentRendererProps {
  // 테이블 선택된 행 정보 (다중 선택 액션용)
  selectedRows?: any[];
  selectedRowsData?: any[];
-  onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[], tableDisplayData?: any[]) => void;
+  onSelectedRowsChange?: (
+    selectedRows: any[],
+    selectedRowsData: any[],
+    sortBy?: string,
+    sortOrder?: "asc" | "desc",
+    columnOrder?: string[],
+    tableDisplayData?: any[],
+  ) => void;
  // 테이블 정렬 정보 (엑셀 다운로드용)
  sortBy?: string;
  sortOrder?: "asc" | "desc";
@@ -150,14 +164,14 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
  const webType = (component as any).componentConfig?.webType;
  const tableName = (component as any).tableName;
  const columnName = (component as any).columnName;
-  
+
  // 카테고리 셀렉트: webType이 "category"이고 tableName과 columnName이 있는 경우만
  if ((inputType === "category" || webType === "category") && tableName && columnName) {
    try {
      const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
      const fieldName = columnName || component.id;
      const currentValue = props.formData?.[fieldName] || "";
-      
+
      const handleChange = (value: any) => {
        if (props.onFormDataChange) {
          props.onFormDataChange(fieldName, value);
@@ -290,22 +304,15 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
        };

        // 렌더러 props 구성
-        // component.style에서 height 제거 (RealtimePreviewDynamic에서 size.height로 처리)
-        // 단, layout 타입 컴포넌트(split-panel-layout 등)는 height 유지
-        const isLayoutComponent = 
-          component.type === "layout" || 
-          componentType === "split-panel-layout" ||
-          componentType?.includes("layout");
-        
-        const { height: _height, ...styleWithoutHeight } = component.style || {};
-
        // 숨김 값 추출
        const hiddenValue = component.hidden || component.componentConfig?.hidden;

        // 🆕 조건부 컨테이너용 높이 변화 핸들러
-        const handleHeightChange = props.onHeightChange ? (newHeight: number) => {
-          props.onHeightChange!(component.id, newHeight);
-        } : undefined;
+        const handleHeightChange = props.onHeightChange
+          ? (newHeight: number) => {
+              props.onHeightChange!(component.id, newHeight);
+            }
+          : undefined;

        const rendererProps = {
          component,
@@ -315,7 +322,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
          onDragEnd,
          size: component.size || newComponent.defaultSize,
          position: component.position,
-          style: isLayoutComponent ? component.style : styleWithoutHeight, // 레이아웃은 height 유지
+          style: finalStyle, // size를 포함한 최종 style
          config: component.componentConfig,
          componentConfig: component.componentConfig,
          value: currentValue, // formData에서 추출한 현재 값 전달
@@ -407,10 +414,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =

    // 폴백 렌더링 - 기본 플레이스홀더
    return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-border bg-muted p-4">
+      <div className="border-border bg-muted flex h-full w-full items-center justify-center rounded border-2 border-dashed p-4">
        <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-muted-foreground">{component.label || component.id}</div>
-          <div className="text-xs text-muted-foreground/70">미구현 컴포넌트: {componentType}</div>
+          <div className="text-muted-foreground mb-2 text-sm font-medium">{component.label || component.id}</div>
+          <div className="text-muted-foreground/70 text-xs">미구현 컴포넌트: {componentType}</div>
        </div>
      </div>
    );
--- a/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx
+++ b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx
@@ -75,13 +75,15 @@ export const CustomerItemMappingComponent: React.FC<CustomerItemMappingComponent
  // 스타일 계산
  const componentStyle: React.CSSProperties = {
    position: "relative",
-    width: "100%",
-    height: "100%",
    display: "flex",
    flexDirection: "column",
    backgroundColor: "hsl(var(--background))",
    overflow: "hidden",
    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
  };

  // 이벤트 핸들러
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -61,16 +61,15 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
      className="relative flex h-full flex-col overflow-hidden bg-background shadow-sm"
      style={{
        width: "100%",
-        maxWidth: "100%",
+        height: "100%",
        boxSizing: "border-box",
      }}
    >
-      <div className="relative flex-1 overflow-x-auto overflow-y-auto">
+      <div className="relative flex-1 overflow-auto">
      <Table
        className="w-full"
        style={{
          width: "100%",
-          minWidth: "100%",
          tableLayout: "auto", // 테이블 크기 자동 조정
          boxSizing: "border-box",
        }}
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -230,16 +230,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
  }

  const componentStyle: React.CSSProperties = {
-    width: calculatedWidth,
-    height: isDesignMode ? "auto" : "100%",
-    minHeight: isDesignMode ? "300px" : "100%",
+    position: "relative",
    display: "flex",
    flexDirection: "column",
    backgroundColor: "hsl(var(--background))",
    overflow: "hidden",
-    ...style,
-    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    boxSizing: "border-box",
    width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
  };

  // ========================================
@@ -1939,7 +1939,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
    onDragStart: isDesignMode ? onDragStart : undefined,
    onDragEnd: isDesignMode ? onDragEnd : undefined,
    draggable: isDesignMode,
-    className: cn(className, isDesignMode && "cursor-move"),
+    className: cn("w-full h-full", className, isDesignMode && "cursor-move"), // customer-item-mapping과 동일
    style: componentStyle,
  };

@@ -2056,17 +2056,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({

        {/* 테이블 컨테이너 */}
        <div
-          className="flex w-full max-w-full flex-1 flex-col overflow-hidden"
-          style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px` }}
+          className="flex flex-1 flex-col"
+          style={{ 
+            marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px`,
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+          }}
        >
          {/* 스크롤 영역 */}
          <div
-            className="bg-background flex-1 w-full max-w-full overflow-x-auto overflow-y-auto"
-            style={{ position: "relative" }}
+            className="bg-background flex-1"
+            style={{ 
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              overflow: "auto",
+            }}
          >
            {/* 테이블 */}
            <table
-              className={cn("table-mobile-fixed w-full max-w-full", !showGridLines && "hide-grid")}
+              className={cn("table-mobile-fixed", !showGridLines && "hide-grid")}
              style={{
                borderCollapse: "collapse",
                width: "100%",
--- a/frontend/lib/registry/components/table-list/index.ts
+++ b/frontend/lib/registry/components/table-list/index.ts
@@ -96,7 +96,7 @@ export const TableListDefinition = createComponentDefinition({
    // 데이터 로딩
    autoLoad: true,
  },
-  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
+  defaultSize: { width: 1000, height: 600 }, // 테이블 리스트 기본 크기 (너비 1000px, 높이 600px)
  configPanel: TableListConfigPanel,
  icon: "Table",
  tags: ["테이블", "데이터", "목록", "그리드"],