이력테이블 기준 컬럼 설정 기능

2025-10-27 11:41:30 +09:00
parent 5fdefffd26
commit a3bfcdf2d8
15 changed files with 26 additions and 379 deletions
--- a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
+++ b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
@@ -333,7 +333,6 @@ export class AutoRegisteringComponentRenderer {
    }

    if (this.registeredComponents.has(definition.id)) {
-      console.warn(`⚠️ ${definition.id} 컴포넌트가 이미 등록되어 있습니다.`);
      return;
    }

@@ -341,18 +340,6 @@ export class AutoRegisteringComponentRenderer {
      // 레지스트리에 등록
      ComponentRegistry.registerComponent(definition);
      this.registeredComponents.add(definition.id);
-
-      console.log(`✅ 컴포넌트 자동 등록 완료: ${definition.id} (${definition.name})`);
-
-      // 개발 모드에서 추가 정보 출력
-      if (process.env.NODE_ENV === "development") {
-        console.log(`📦 ${definition.id}:`, {
-          name: definition.name,
-          category: definition.category,
-          webType: definition.webType,
-          tags: definition.tags?.join(", ") || "none",
-        });
-      }
    } catch (error) {
      console.error(`❌ ${definition.id} 컴포넌트 등록 실패:`, error);
    }
--- a/frontend/lib/registry/ComponentRegistry.ts
+++ b/frontend/lib/registry/ComponentRegistry.ts
@@ -52,8 +52,6 @@ export class ComponentRegistry {
      timestamp: new Date(),
    });

-    console.log(`✅ 컴포넌트 등록: ${definition.id} (${definition.name})`);
-
    // 개발자 도구 등록 (개발 모드에서만)
    if (process.env.NODE_ENV === "development") {
      this.registerGlobalDevTools();
@@ -399,9 +397,6 @@ Hot Reload 제어 (비동기):
          `);
        },
      };
-
-      console.log("🛠️ 컴포넌트 레지스트리 개발자 도구가 등록되었습니다.");
-      console.log("   사용법: __COMPONENT_REGISTRY__.help()");
    }
  }

@@ -409,17 +404,7 @@ Hot Reload 제어 (비동기):
   * 디버그 정보 출력
   */
  static debug(): void {
-    const stats = this.getStats();
-    console.group("🎨 컴포넌트 레지스트리 디버그 정보");
-    console.log("📊 총 컴포넌트 수:", stats.total);
-    console.log("📂 카테고리별 분포:", stats.byCategory);
-    console.log("🏷️ 웹타입별 분포:", stats.byWebType);
-    console.log("👨‍💻 작성자별 분포:", stats.byAuthor);
-    console.log(
-      "🆕 최근 추가:",
-      stats.recentlyAdded.map((c) => `${c.id} (${c.name})`),
-    );
-    console.groupEnd();
+    // 디버그 로그 제거 (필요시 브라우저 콘솔에서 ComponentRegistry.getStats() 사용)
  }

  /**
--- a/frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx
+++ b/frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx
@@ -21,8 +21,8 @@ export class FlowWidgetRenderer extends AutoRegisteringComponentRenderer {

  render(): React.ReactElement {
    return (
-      <FlowWidget 
-        component={this.props.component as any} 
+      <FlowWidget
+        component={this.props.component as any}
        onSelectedDataChange={this.props.onFlowSelectedDataChange}
        flowRefreshKey={this.props.flowRefreshKey}
        onFlowRefresh={this.props.onFlowRefresh}
@@ -38,5 +38,3 @@ FlowWidgetRenderer.registerSelf();
 if (process.env.NODE_ENV === "development") {
  FlowWidgetRenderer.enableHotReload();
 }
-
-console.log("✅ FlowWidget 컴포넌트 등록 완료");
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -8,8 +8,6 @@ import { initializeHotReload } from "../utils/hotReload";
 * 모든 컴포넌트를 자동으로 로드하고 등록합니다
 */

-console.log("🚀 컴포넌트 시스템 초기화 시작...");
-
 // 컴포넌트 자동 디스커버리 및 로드
 // 현재는 수동 import 방식 사용 (향후 자동 디스커버리로 확장 예정)

@@ -46,16 +44,12 @@ import "./flow-widget/FlowWidgetRenderer";
 * 컴포넌트 초기화 함수
 */
 export async function initializeComponents() {
-  console.log("🔄 컴포넌트 초기화 중...");
-
  try {
    // 1. 자동 등록된 컴포넌트 확인
    const registeredComponents = ComponentRegistry.getAllComponents();
-    console.log(`✅ 등록된 컴포넌트: ${registeredComponents.length}개`);

    // 2. 카테고리별 통계
    const stats = ComponentRegistry.getStats();
-    console.log("📊 카테고리별 분포:", stats.byCategory);

    // 3. 개발 모드에서 디버그 정보 출력
    if (process.env.NODE_ENV === "development") {
--- a/frontend/lib/registry/components/table-list/TableListRenderer.tsx
+++ b/frontend/lib/registry/components/table-list/TableListRenderer.tsx
@@ -13,35 +13,31 @@ export class TableListRenderer extends AutoRegisteringComponentRenderer {
  static componentDefinition = TableListDefinition;

  render(): React.ReactElement {
-    return <TableListComponent 
-      {...this.props} 
-      renderer={this} 
-      onConfigChange={this.handleConfigChange}
-    />;
+    return <TableListComponent {...this.props} renderer={this} onConfigChange={this.handleConfigChange} />;
  }

  // 설정 변경 핸들러
  protected handleConfigChange = (config: any) => {
    console.log("📥 TableListRenderer에서 설정 변경 받음:", config);
-    
+
    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
    if (this.props.onConfigChange) {
      this.props.onConfigChange(config);
    } else {
      console.log("⚠️ 상위 컴포넌트에서 onConfigChange가 전달되지 않음");
    }
-    
+
    this.updateComponent({ config });
  };

  /**
   * 컴포넌트별 특화 메서드들
   */
-  
+
  // text 타입 특화 속성 처리
  protected getTableListProps() {
    const baseProps = this.getWebTypeProps();
-    
+
    // text 타입에 특화된 추가 속성들
    return {
      ...baseProps,
@@ -72,9 +68,7 @@ TableListRenderer.registerSelf();
 if (typeof window !== "undefined") {
  setTimeout(() => {
    try {
-      console.log("🔄 TableList 강제 등록 시도...");
      TableListRenderer.registerSelf();
-      console.log("✅ TableList 강제 등록 완료");
    } catch (error) {
      console.error("❌ TableList 강제 등록 실패:", error);
    }
--- a/frontend/lib/registry/utils/createComponentDefinition.ts
+++ b/frontend/lib/registry/utils/createComponentDefinition.ts
@@ -96,10 +96,7 @@ export function createComponentDefinition(options: CreateComponentDefinitionOpti
    throw new Error(`컴포넌트 정의 검증 실패: ${validationResult.errors.join(", ")}`);
  }

-  // 경고사항 출력 (개발 모드에서만)
-  if (process.env.NODE_ENV === "development" && validationResult.warnings.length > 0) {
-    console.warn(`⚠️ 컴포넌트 정의 경고 (${id}):`, validationResult.warnings);
-  }
+  // 경고사항 출력 (개발 모드에서만) - 로그 제거

  return definition;
 }
--- a/frontend/lib/registry/utils/hotReload.ts
+++ b/frontend/lib/registry/utils/hotReload.ts
@@ -15,9 +15,8 @@ let hotReloadListeners: Array<() => void> = [];
 */
 export function initializeHotReload(): void {
  // 핫 리로드 시스템 임시 비활성화 (디버깅 목적)
-  console.log("🔥 컴포넌트 Hot Reload 시스템 비활성화됨 (디버깅 모드)");
  return;
-  
+
  if (process.env.NODE_ENV !== "development" || typeof window === "undefined") {
    return;
  }
@@ -64,10 +63,18 @@ function setupDevServerEventListener(): void {
      const message = args.join(" ");

      // 핫 리로드를 트리거할 특정 메시지만 감지 (디버깅 로그는 제외)
-      if ((message.includes("compiled") || message.includes("Fast Refresh")) && 
-          !message.includes("🔍") && !message.includes("🎯") && !message.includes("📤") && 
-          !message.includes("📥") && !message.includes("⚠️") && !message.includes("🔄") && 
-          !message.includes("✅") && !message.includes("🔧") && !message.includes("📋")) {
+      if (
+        (message.includes("compiled") || message.includes("Fast Refresh")) &&
+        !message.includes("🔍") &&
+        !message.includes("🎯") &&
+        !message.includes("📤") &&
+        !message.includes("📥") &&
+        !message.includes("⚠️") &&
+        !message.includes("🔄") &&
+        !message.includes("✅") &&
+        !message.includes("🔧") &&
+        !message.includes("📋")
+      ) {
        if (!reloadPending) {
          reloadPending = true;
          setTimeout(() => {
--- a/frontend/lib/registry/utils/performanceOptimizer.ts
+++ b/frontend/lib/registry/utils/performanceOptimizer.ts
@@ -67,8 +67,6 @@ export class PerformanceOptimizer {
  static initialize(options: Partial<OptimizationOptions> = {}): void {
    this.options = { ...DEFAULT_OPTIMIZATION_OPTIONS, ...options };

-    console.log("⚡ 성능 최적화 시스템 초기화:", this.options);
-
    // 메모리 사용량 모니터링 (개발 모드에서만)
    if (process.env.NODE_ENV === "development") {
      this.startMemoryMonitoring();
@@ -463,5 +461,4 @@ export class PerformanceOptimizer {
 // 자동 초기화
 if (typeof window !== "undefined") {
  PerformanceOptimizer.initialize();
-  console.log("⚡ 성능 최적화 시스템이 초기화되었습니다.");
 }
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -48,7 +48,6 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
  }

  try {
-    console.log(`🔧 ConfigPanel 로드 중: ${componentId}`);
    const module = await importFn();

    // 모듈에서 ConfigPanel 컴포넌트 추출
@@ -65,7 +64,6 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac

    // 캐시에 저장
    configPanelCache.set(componentId, ConfigPanelComponent);
-    console.log(`✅ ConfigPanel 로드 완료: ${componentId}`);

    return ConfigPanelComponent;
  } catch (error) {
@@ -119,8 +117,6 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
  tableColumns,
  tables,
 }) => {
-  console.log(`🔥 DynamicComponentConfigPanel 렌더링 시작: ${componentId}`);
-
  // 모든 useState를 최상단에 선언 (Hooks 규칙)
  const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
  const [loading, setLoading] = React.useState(true);
@@ -133,12 +129,10 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =

    async function loadConfigPanel() {
      try {
-        console.log(`🔧 DynamicComponentConfigPanel: ${componentId} 로드 시작`);
        setLoading(true);
        setError(null);

        const component = await getComponentConfigPanel(componentId);
-        console.log(`🔧 DynamicComponentConfigPanel: ${componentId} 로드 결과:`, component);

        if (mounted) {
          setConfigPanelComponent(() => component);
@@ -217,38 +211,20 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
    );
  }

-  console.log(`🔧 DynamicComponentConfigPanel 렌더링:`, {
-    componentId,
-    ConfigPanelComponent: ConfigPanelComponent?.name,
-    config,
-    configType: typeof config,
-    configKeys: typeof config === "object" ? Object.keys(config || {}) : "not object",
-    screenTableName,
-    tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns,
-    tables: Array.isArray(tables) ? tables.length : tables,
-    tablesType: typeof tables,
-    tablesDetail: tables, // 전체 테이블 목록 확인
-  });
-
  // 테이블 변경 핸들러 - 선택된 테이블의 컬럼을 동적으로 로드
  const handleTableChange = async (tableName: string) => {
-    console.log("🔄 테이블 변경:", tableName);
    try {
      // 먼저 tables에서 찾아보기 (이미 컬럼이 있는 경우)
      const existingTable = tables?.find((t) => t.tableName === tableName);
      if (existingTable && existingTable.columns && existingTable.columns.length > 0) {
-        console.log("✅ 캐시된 테이블 컬럼 사용:", existingTable.columns.length, "개");
        setSelectedTableColumns(existingTable.columns);
        return;
      }

      // 컬럼이 없으면 tableTypeApi로 조회 (ScreenDesigner와 동일한 방식)
-      console.log("🔍 테이블 컬럼 API 조회:", tableName);
      const { tableTypeApi } = await import("@/lib/api/screen");
      const columnsResponse = await tableTypeApi.getColumns(tableName);

-      console.log("🔍 컬럼 응답 데이터:", columnsResponse);
-
      const columns = (columnsResponse || []).map((col: any) => ({
        tableName: col.tableName || tableName,
        columnName: col.columnName || col.column_name,
@@ -265,7 +241,6 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
        codeValue: col.codeValue || col.code_value,
      }));

-      console.log("✅ 테이블 컬럼 로드 성공:", columns.length, "개");
      setSelectedTableColumns(columns);
    } catch (error) {
      console.error("❌ 테이블 변경 오류:", error);
--- a/frontend/lib/utils/widthToColumnSpan.ts
+++ b/frontend/lib/utils/widthToColumnSpan.ts
@@ -165,11 +165,6 @@ export function migrateComponentsToColumnSpan(
 * @returns 새로운 그리드 시스템으로 변환된 레이아웃
 */
 export function migrateLayoutToGridSystem(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
-  console.log("🔄 레이아웃 마이그레이션 시작:", {
-    screenId: layout.screenId,
-    componentCount: layout.components.length,
-  });
-
  // 1단계: width를 gridColumnSpan으로 변환
  let migratedComponents = migrateComponentsToColumnSpan(layout.components, canvasWidth);

@@ -179,11 +174,6 @@ export function migrateLayoutToGridSystem(layout: LayoutData, canvasWidth: numbe
  // 3단계: 같은 행 내에서 X 좌표로 gridColumnStart 계산
  migratedComponents = calculateColumnStarts(migratedComponents);

-  console.log("✅ 마이그레이션 완료:", {
-    componentCount: migratedComponents.length,
-    sampleComponent: migratedComponents[0],
-  });
-
  return {
    ...layout,
    components: migratedComponents,
@@ -233,7 +223,6 @@ export function needsMigration(layout: LayoutData): boolean {
 export function safeMigrateLayout(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
  try {
    if (!needsMigration(layout)) {
-      console.log("⏭️ 마이그레이션 불필요 - 이미 최신 형식");
      return layout;
    }