플로우 각 단계별 컬럼 설정기능

backend-node/src/controllers/flowController.ts

@@ -312,6 +312,7 @@ export class FlowController {
         fieldMappings,
         integrationType,
         integrationConfig,
+        displayConfig,
       } = req.body;
 
       const step = await this.flowStepService.update(id, {
@@ -329,6 +330,7 @@ export class FlowController {
         fieldMappings,
         integrationType,
         integrationConfig,
+        displayConfig,
       });
 
       if (!step) {

backend-node/src/services/flowStepService.ts

@@ -26,9 +26,9 @@ export class FlowStepService {
         flow_definition_id, step_name, step_order, table_name, condition_json, 
         color, position_x, position_y, move_type, status_column, status_value,
         target_table, field_mappings, required_fields,
-        integration_type, integration_config
+        integration_type, integration_config, display_config
       )
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
       RETURNING *
     `;
 
@@ -51,6 +51,7 @@ export class FlowStepService {
       request.integrationConfig
         ? JSON.stringify(request.integrationConfig)
         : null,
+      request.displayConfig ? JSON.stringify(request.displayConfig) : null,
     ]);
 
     return this.mapToFlowStep(result[0]);
@@ -209,6 +210,15 @@ export class FlowStepService {
       paramIndex++;
     }
 
+    // 표시 설정 (displayConfig)
+    if (request.displayConfig !== undefined) {
+      fields.push(`display_config = $${paramIndex}`);
+      params.push(
+        request.displayConfig ? JSON.stringify(request.displayConfig) : null
+      );
+      paramIndex++;
+    }
+
     if (fields.length === 0) {
       return this.findById(id);
     }
@@ -262,6 +272,17 @@ export class FlowStepService {
    * DB 행을 FlowStep 객체로 변환
    */
   private mapToFlowStep(row: any): FlowStep {
+    // JSONB 필드는 pg 라이브러리가 자동으로 파싱해줌
+    const displayConfig = row.display_config;
+
+    // 디버깅 로그 (개발 환경에서만)
+    if (displayConfig && process.env.NODE_ENV === "development") {
+      console.log(`🔍 [FlowStep ${row.id}] displayConfig:`, {
+        type: typeof displayConfig,
+        value: displayConfig,
+      });
+    }
+
     return {
       id: row.id,
       flowDefinitionId: row.flow_definition_id,
@@ -282,6 +303,8 @@ export class FlowStepService {
       // 외부 연동 필드
       integrationType: row.integration_type || "internal",
       integrationConfig: row.integration_config || undefined,
+      // 표시 설정
+      displayConfig: displayConfig || undefined,
       createdAt: row.created_at,
       updatedAt: row.updated_at,
     };

backend-node/src/types/flow.ts

@@ -66,6 +66,14 @@ export interface FlowConditionGroup {
   conditions: FlowCondition[];
 }
 
+// 플로우 단계 표시 설정
+export interface FlowStepDisplayConfig {
+  visibleColumns?: string[]; // 표시할 컬럼 목록
+  columnOrder?: string[]; // 컬럼 순서 (선택사항)
+  columnLabels?: Record<string, string>; // 컬럼별 커스텀 라벨 (선택사항)
+  columnWidths?: Record<string, number>; // 컬럼별 너비 설정 (px, 선택사항)
+}
+
 // 플로우 단계
 export interface FlowStep {
   id: number;
@@ -87,6 +95,8 @@ export interface FlowStep {
   // 외부 연동 필드
   integrationType?: FlowIntegrationType; // 연동 타입 (기본값: internal)
   integrationConfig?: FlowIntegrationConfig; // 연동 설정 (JSONB)
+  // 🆕 표시 설정 (플로우 위젯에서 사용)
+  displayConfig?: FlowStepDisplayConfig; // 단계별 컬럼 표시 설정
   createdAt: Date;
   updatedAt: Date;
 }
@@ -111,6 +121,8 @@ export interface CreateFlowStepRequest {
   // 외부 연동 필드
   integrationType?: FlowIntegrationType;
   integrationConfig?: FlowIntegrationConfig;
+  // 🆕 표시 설정
+  displayConfig?: FlowStepDisplayConfig;
 }
 
 // 플로우 단계 수정 요청
@@ -132,6 +144,8 @@ export interface UpdateFlowStepRequest {
   // 외부 연동 필드
   integrationType?: FlowIntegrationType;
   integrationConfig?: FlowIntegrationConfig;
+  // 🆕 표시 설정
+  displayConfig?: FlowStepDisplayConfig;
 }
 
 // 플로우 단계 연결