chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
160ad87395c4f2d90b3c013e93487126ed48e3c6
vexplor/플로우_위젯_컬럼_표시_설정_구현_완료.md

13 KiB
Raw Blame History

플로우 위젯 단계별 컬럼 표시 설정 기능 구현 완료

📋 개요

플로우 위젯에서 각 단계별로 표시할 컬럼을 선택할 수 있는 기능을 하이브리드 방식으로 구현하였습니다.

하이브리드 방식의 장점

  1. 플로우 에디터에서 각 스텝의 기본 컬럼 설정 정의
  2. 화면관리에서 특정 화면에만 컬럼 오버라이드 가능
  3. 우선순위: 화면 설정 > 플로우 기본 설정 > 전체 컬럼 표시

🎯 구현 내용

Phase 1: 데이터베이스 스키마 확장 ✅

파일: db/migrations/023_add_display_config_to_flow_step.sql

  • flow_step 테이블에 display_config 컬럼 추가 (JSONB 타입)
  • 인덱스 추가 (GIN 인덱스로 JSONB 검색 최적화)
ALTER TABLE flow_step
ADD COLUMN IF NOT EXISTS display_config JSONB DEFAULT NULL;

CREATE INDEX IF NOT EXISTS idx_flow_step_display_config
ON flow_step USING gin(display_config);

구조:

{
  "visibleColumns": ["column1", "column2", ...],
  "columnOrder": ["column1", "column2", ...],
  "columnLabels": {
    "column1": "커스텀 라벨 1"
  },
  "columnWidths": {
    "column1": 150
  }
}

Phase 2: 백엔드 타입 정의 업데이트 ✅

파일: backend-node/src/types/flow.ts

새로운 인터페이스:

export interface FlowStepDisplayConfig {
  visibleColumns?: string[];
  columnOrder?: string[];
  columnLabels?: Record<string, string>;
  columnWidths?: Record<string, number>;
}

FlowStep 인터페이스 확장:

export interface FlowStep {
  // ... 기존 필드
  displayConfig?: FlowStepDisplayConfig; // 🆕
}

CreateFlowStepRequest 및 UpdateFlowStepRequest에도 추가됨

Phase 3: 워크플로우 에디터 - 스텝 속성 패널 UI 추가 ✅

파일: frontend/components/flow/FlowStepPanel.tsx

추가된 기능

  1. 테이블 컬럼 목록 자동 로드
    • 스텝의 테이블이 선택되면 해당 테이블의 컬럼 목록을 자동으로 가져옴
  2. "표시 설정" 카드 추가
    • 전체 선택/해제 체크박스
    • 개별 컬럼 선택 체크박스
    • 선택된 컬럼 개수 표시
// formData에 displayConfig 추가
const [formData, setFormData] = useState({
  // ... 기존 필드
  displayConfig: step.displayConfig || { visibleColumns: [] }, // 🆕
});

UI 구조

┌─ 표시 설정 카드 ─────────────────────┐
│ 표시할 컬럼 선택                      │
│ ┌────────────────────────────┐       │
│ │ ☐ 전체 선택/해제            │       │
│ ├────────────────────────────┤       │
│ │ ☑ id                        │       │
│ │ ☑ name                      │       │
│ │ ☐ description               │       │
│ │ ☑ created_at                │       │
│ └────────────────────────────┘       │
│                                       │
│ 💡 선택된 컬럼: 3개                  │
└───────────────────────────────────────┘

Phase 4: 플로우 위젯 - 컬럼 표시 로직 업데이트 ✅

파일: frontend/components/screen/widgets/FlowWidget.tsx

핵심 로직: getVisibleColumns 함수

/**
 * 컬럼 표시 우선순위 결정 함수 (하이브리드 방식)
 * 1순위: 화면 위젯 설정 (stepColumnConfig)
 * 2순위: 플로우 스텝 기본 설정 (displayConfig)
 * 3순위: 모든 컬럼 표시
 */
const getVisibleColumns = (stepId: number, allColumns: string[]): string[] => {
  // 1순위: 화면 위젯 설정
  const widgetConfig = component.stepColumnConfig;
  if (widgetConfig && widgetConfig[stepId]) {
    const config = widgetConfig[stepId];
    if (config.selectedColumns && config.selectedColumns.length > 0) {
      return config.selectedColumns;
    }
  }

  // 2순위: 플로우 스텝 기본 설정
  const currentStep = steps.find((s) => s.id === stepId);
  if (
    currentStep?.displayConfig?.visibleColumns &&
    currentStep.displayConfig.visibleColumns.length > 0
  ) {
    return currentStep.displayConfig.visibleColumns;
  }

  // 3순위: 모든 컬럼 표시
  return allColumns;
};

적용된 위치

  1. 스텝 클릭 시 데이터 로드 (handleStepClick)
  2. 플로우 새로고침 시 (refreshStepData)

Phase 5: 화면관리 - 플로우 위젯 설정 패널 UI 추가 ✅

파일: frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx

추가된 기능

  1. 스텝 목록 자동 로드

    • 플로우가 선택되면 해당 플로우의 스텝 목록을 자동으로 가져옴

  2. 테이블 컬럼 목록 자동 로드

    • 플로우의 테이블 컬럼 목록을 자동으로 가져옴

  3. "스텝별 컬럼 설정 (고급)" 섹션 추가

    • 토글 버튼으로 표시/숨김 가능
    • 각 스텝별로 컬럼 선택 가능
    • 커스텀 설정이 있으면 "초기화" 버튼 표시

UI 구조

┌─ 스텝별 컬럼 설정 (고급) ──────── [설정▼] ─┐
│                                               │
│ ┌─ 스텝 1: 주문 접수 ─────────── [초기화] ─┐ │
│ │ 커스텀 설정 (3개 컬럼)                   │ │
│ │ ┌──────────────────────────┐            │ │
│ │ │ ☑ id                      │            │ │
│ │ │ ☑ customer_name           │            │ │
│ │ │ ☐ order_date              │            │ │
│ │ │ ☑ amount                  │            │ │
│ │ └──────────────────────────┘            │ │
│ └─────────────────────────────────────────┘ │
│                                               │
│ ┌─ 스텝 2: 승인 대기 ──────────────────────┐ │
│ │ 기본 설정 사용                            │ │
│ │ (플로우 정의에서 설정된 컬럼 표시)        │ │
│ └─────────────────────────────────────────┘ │
└───────────────────────────────────────────────┘

Phase 6: 프론트엔드 타입 정의 업데이트 ✅

파일 1: frontend/types/flow.ts

export interface FlowStepDisplayConfig {
  visibleColumns?: string[];
  columnOrder?: string[];
  columnLabels?: Record<string, string>;
  columnWidths?: Record<string, number>;
}

export interface FlowStep {
  // ... 기존 필드
  displayConfig?: FlowStepDisplayConfig; // 🆕
}

파일 2: frontend/types/screen-management.ts

export interface FlowStepColumnConfig {
  selectedColumns: string[];
  columnOrder?: string[];
}

export interface FlowComponent extends BaseComponent {
  type: "flow";
  // ... 기존 필드
  stepColumnConfig?: {
    [stepId: number]: FlowStepColumnConfig; // 🆕
  };
}

🔄 사용 시나리오

시나리오 1: 플로우 기본 설정 사용 (일반적인 경우)

  1. 플로우 관리 페이지에서 플로우 스텝 편집
  2. "표시 설정" 카드에서 표시할 컬럼 선택 (예: id, name, created_at)
  3. 저장
  4. 모든 화면에서 이 플로우를 사용할 때 선택한 컬럼만 표시됨

시나리오 2: 화면별 컬럼 오버라이드 (특수한 경우)

  1. 화면 설계자 모드에서 플로우 위젯 선택
  2. 속성 패널 > "스텝별 컬럼 설정 (고급)" 클릭
  3. 특정 스텝의 컬럼을 다르게 선택 (예: id, amount만 표시)
  4. 저장
  5. 이 화면에서만 오버라이드된 컬럼이 표시됨

시나리오 3: 아무 설정도 하지 않은 경우

  • 모든 컬럼이 자동으로 표시됨 (기본 동작)

📊 우선순위 다이어그램

데이터 로드
    ↓
┌────────────────────────────────────────┐
│ 1. 화면 위젯 설정 확인                 │
│    (stepColumnConfig[stepId])         │
└────────────────────────────────────────┘
    ↓ 없음
┌────────────────────────────────────────┐
│ 2. 플로우 스텝 기본 설정 확인          │
│    (step.displayConfig.visibleColumns)│
└────────────────────────────────────────┘
    ↓ 없음
┌────────────────────────────────────────┐
│ 3. 모든 컬럼 표시                      │
│    (Object.keys(data[0]))             │
└────────────────────────────────────────┘
    ↓
테이블 렌더링

🎨 UI/UX 특징

1. 점진적 공개 (Progressive Disclosure)

  • 기본적으로는 간단한 UI만 표시
  • "스텝별 컬럼 설정 (고급)"은 토글로 숨김/표시

2. 명확한 피드백

  • 선택된 컬럼 개수 표시
  • "커스텀 설정" vs "기본 설정 사용" 명확히 표시
  • 초기화 버튼으로 쉽게 되돌리기 가능

3. 검색 가능한 체크박스 리스트

  • 컬럼이 많을 경우 스크롤 가능
  • font-mono로 컬럼명 명확히 표시

🧪 테스트 체크리스트

기능 테스트

  • 데이터베이스 마이그레이션 실행 (023_add_display_config_to_flow_step.sql)
  • 플로우 관리 페이지에서 스텝 속성 패널 열기
  • "표시 설정" 카드에서 컬럼 선택 및 저장
  • 플로우 위젯에서 선택한 컬럼만 표시되는지 확인
  • 화면관리에서 특정 스텝의 컬럼 오버라이드 설정
  • 오버라이드가 우선 적용되는지 확인
  • 오버라이드 초기화 버튼 동작 확인

우선순위 테스트

  1. 모든 설정 없음: 전체 컬럼 표시 ✓
  2. 플로우 기본 설정만: 선택한 컬럼만 표시 ✓
  3. 화면 오버라이드 설정: 오버라이드된 컬럼만 표시 (최우선) ✓

엣지 케이스

  • 컬럼이 없는 테이블 선택 시
  • 모든 컬럼 선택 해제 시 (빈 배열) → 전체 표시
  • 존재하지 않는 컬럼명 선택 시 (무시)
  • 플로우 삭제 후 화면에서 참조하는 경우

📝 주의사항

1. 데이터베이스 마이그레이션

  • 운영 환경에 배포하기 전에 반드시 마이그레이션 실행 필요
  • 기존 데이터에는 영향 없음 (NULL 허용)

2. 하위 호환성

  • displayConfig가 없으면 자동으로 전체 컬럼 표시 (기존 동작 유지)
  • stepColumnConfig가 없으면 플로우 기본 설정 사용

3. 성능

  • 컬럼 목록 로드는 테이블 선택 시 1회만 실행
  • GIN 인덱스로 JSONB 검색 최적화

🚀 향후 개선 방안 (선택사항)

1. 컬럼 순서 변경 기능

  • Drag & Drop으로 컬럼 순서 변경
  • columnOrder 필드 활용

2. 컬럼별 커스텀 라벨

  • 표시명을 사용자가 직접 지정
  • columnLabels 필드 활용

3. 컬럼 너비 설정

  • 각 컬럼의 표시 너비 조정
  • columnWidths 필드 활용

4. 빠른 프리셋

  • "기본 정보만", "전체 정보", "요약 정보" 등 프리셋 제공

📚 관련 파일 목록

데이터베이스

  • db/migrations/023_add_display_config_to_flow_step.sql

백엔드

  • backend-node/src/types/flow.ts

프론트엔드 (타입)

  • frontend/types/flow.ts
  • frontend/types/screen-management.ts

프론트엔드 (컴포넌트)

  • frontend/components/screen/widgets/FlowWidget.tsx
  • frontend/components/flow/FlowStepPanel.tsx
  • frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx

✅ 구현 완료

모든 Phase가 성공적으로 완료되었습니다!

구현 날짜: 2025-10-24

구현 방식: 하이브리드 (플로우 에디터 기본 설정 + 화면관리 오버라이드)

적용 범위:

  • 플로우 관리 시스템 (플로우 정의 편집)
  • 화면관리 시스템 (플로우 위젯 설정)
  • 실제 화면 표시 (플로우 위젯 렌더링)
Reference in New Issue View Git Blame Copy Permalink