ERP-node/UI_REDESIGN_PLAN.md

🎨 제어관리 - 데이터 연결 설정 UI 재설계 계획서

📋 프로젝트 개요

목표

• 기존 모달 기반 필드 매핑을 메인 화면으로 통합
• 중복된 테이블 선택 과정 제거
• 시각적 필드 연결 매핑 구현
• 좌우 분할 레이아웃으로 정보 가시성 향상

현재 문제점

• ❌ 이중 작업: 테이블을 3번 선택해야 함 (더블클릭 → 모달 → 재선택)
• ❌ 혼란스러운 UX: 사전 선택의 의미가 없어짐
• ❌ 불필요한 모달: 연결 설정이 메인 기능인데 숨겨져 있음
• ❌ 시각적 피드백 부족: 필드 매핑 관계가 명확하지 않음

🎯 새로운 UI 구조

레이아웃 구성

┌─────────────────────────────────────────────────────────────┐
│                    제어관리 - 데이터 연결 설정                │
├─────────────────────────────────────────────────────────────┤
│ 좌측 패널 (30%)          │         우측 패널 (70%)          │
│ - 연결 타입 선택         │ - 단계별 설정 UI                 │
│ - 매핑 정보 모니터링     │ - 시각적 필드 매핑               │
│ - 상세 설정 목록         │ - 실시간 연결선 표시             │
│ - 액션 버튼              │ - 드래그 앤 드롭 지원            │
└─────────────────────────────────────────────────────────────┘

🔧 구현 단계

Phase 1: 기본 구조 구축

• 좌우 분할 레이아웃 컴포넌트 생성
• 기존 모달 컴포넌트들을 메인 화면용으로 리팩토링
• 연결 타입 선택 컴포넌트 구현

Phase 2: 좌측 패널 구현

• 연결 타입 선택 (데이터 저장 / 외부 호출)
• 실시간 매핑 정보 표시
• 매핑 상세 목록 컴포넌트
• 고급 설정 패널

Phase 3: 우측 패널 구현

• 단계별 진행 UI (연결 → 테이블 → 매핑)
• 시각적 필드 매핑 영역
• SVG 기반 연결선 시스템
• 드래그 앤 드롭 매핑 기능

Phase 4: 고급 기능

• 실시간 검증 및 피드백
• 매핑 미리보기 기능
• 설정 저장/불러오기
• 테스트 실행 기능

📁 파일 구조

새로 생성할 컴포넌트

frontend/components/dataflow/connection/redesigned/
├── DataConnectionDesigner.tsx          # 메인 컨테이너
├── LeftPanel/
│   ├── ConnectionTypeSelector.tsx      # 연결 타입 선택
│   ├── MappingInfoPanel.tsx           # 매핑 정보 표시
│   ├── MappingDetailList.tsx          # 매핑 상세 목록
│   ├── AdvancedSettings.tsx           # 고급 설정
│   └── ActionButtons.tsx              # 액션 버튼들
├── RightPanel/
│   ├── StepProgress.tsx               # 단계 진행 표시
│   ├── ConnectionStep.tsx             # 1단계: 연결 선택
│   ├── TableStep.tsx                  # 2단계: 테이블 선택
│   ├── FieldMappingStep.tsx           # 3단계: 필드 매핑
│   └── VisualMapping/
│       ├── FieldMappingCanvas.tsx     # 시각적 매핑 캔버스
│       ├── FieldColumn.tsx            # 필드 컬럼 컴포넌트
│       ├── ConnectionLine.tsx         # SVG 연결선
│       └── MappingControls.tsx        # 매핑 제어 도구
└── types/
    └── redesigned.ts                  # 타입 정의

수정할 기존 파일

frontend/components/dataflow/connection/
├── DataSaveSettings.tsx               # 새 UI로 교체
├── ConnectionSelectionPanel.tsx       # 재사용을 위한 리팩토링
├── TableSelectionPanel.tsx            # 재사용을 위한 리팩토링
└── ActionFieldMappings.tsx            # 레거시 처리

🎨 UI 컴포넌트 상세

1. 연결 타입 선택 (ConnectionTypeSelector)

interface ConnectionType {
  id: "data_save" | "external_call";
  label: string;
  description: string;
  icon: React.ReactNode;
}

const connectionTypes: ConnectionType[] = [
  {
    id: "data_save",
    label: "데이터 저장",
    description: "INSERT/UPDATE/DELETE 작업",
    icon: <Database />,
  },
  {
    id: "external_call",
    label: "외부 호출",
    description: "API/Webhook 호출",
    icon: <Globe />,
  },
];

2. 시각적 필드 매핑 (FieldMappingCanvas)

interface FieldMapping {
  id: string;
  fromField: ColumnInfo;
  toField: ColumnInfo;
  transformRule?: string;
  isValid: boolean;
  validationMessage?: string;
}

interface MappingLine {
  id: string;
  fromX: number;
  fromY: number;
  toX: number;
  toY: number;
  isValid: boolean;
  isHovered: boolean;
}

3. 매핑 정보 패널 (MappingInfoPanel)

interface MappingStats {
  totalMappings: number;
  validMappings: number;
  invalidMappings: number;
  missingRequiredFields: number;
  estimatedRows: number;
  actionType: "INSERT" | "UPDATE" | "DELETE";
}

🔄 데이터 플로우

상태 관리

interface DataConnectionState {
  // 기본 설정
  connectionType: "data_save" | "external_call";
  currentStep: 1 | 2 | 3;

  // 연결 정보
  fromConnection?: Connection;
  toConnection?: Connection;
  fromTable?: TableInfo;
  toTable?: TableInfo;

  // 매핑 정보
  fieldMappings: FieldMapping[];
  mappingStats: MappingStats;

  // UI 상태
  selectedMapping?: string;
  isLoading: boolean;
  validationErrors: ValidationError[];
}

이벤트 핸들링

interface DataConnectionActions {
  // 연결 타입
  setConnectionType: (type: "data_save" | "external_call") => void;

  // 단계 진행
  goToStep: (step: 1 | 2 | 3) => void;

  // 연결/테이블 선택
  selectConnection: (type: "from" | "to", connection: Connection) => void;
  selectTable: (type: "from" | "to", table: TableInfo) => void;

  // 필드 매핑
  createMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void;
  updateMapping: (mappingId: string, updates: Partial<FieldMapping>) => void;
  deleteMapping: (mappingId: string) => void;

  // 검증 및 저장
  validateMappings: () => Promise<ValidationResult>;
  saveMappings: () => Promise<void>;
  testExecution: () => Promise<TestResult>;
}

🎯 사용자 경험 (UX) 개선점

Before (기존)

1. 테이블 더블클릭 → 화면에 표시
2. 모달 열기 → 다시 테이블 선택
3. 외부 커넥션 설정 → 또 다시 테이블 선택
4. 필드 매핑 → 텍스트 기반 매핑

After (개선)

1. 연결 타입 선택 → 목적 명확화
2. 연결 선택 → 한 번에 FROM/TO 설정
3. 테이블 선택 → 즉시 필드 정보 로드
4. 시각적 매핑 → 드래그 앤 드롭으로 직관적 연결

🚀 구현 우선순위

🔥 High Priority

1. 기본 레이아웃 - 좌우 분할 구조
2. 연결 타입 선택 - 데이터 저장/외부 호출
3. 단계별 진행 - 연결 → 테이블 → 매핑
4. 기본 필드 매핑 - 드래그 앤 드롭 없이 클릭 기반

🔶 Medium Priority

1. 시각적 연결선 - SVG 기반 라인 표시
2. 실시간 검증 - 타입 호환성 체크
3. 매핑 정보 패널 - 통계 및 상태 표시
4. 드래그 앤 드롭 - 고급 매핑 기능

🔵 Low Priority

1. 고급 설정 - 트랜잭션, 배치 설정
2. 미리보기 기능 - 데이터 변환 미리보기
3. 설정 템플릿 - 자주 사용하는 매핑 저장
4. 성능 최적화 - 대용량 테이블 처리

📅 개발 일정

Week 1: 기본 구조

• 레이아웃 컴포넌트 생성
• 연결 타입 선택 구현
• 기존 컴포넌트 리팩토링

Week 2: 핵심 기능

• 단계별 진행 UI
• 연결/테이블 선택 통합
• 기본 필드 매핑 구현

Week 3: 시각적 개선

• SVG 연결선 시스템
• 드래그 앤 드롭 매핑
• 실시간 검증 기능

Week 4: 완성 및 테스트

• 고급 기능 구현
• 통합 테스트
• 사용자 테스트 및 피드백 반영

🔍 기술적 고려사항

성능 최적화

• 가상화: 대용량 필드 목록 처리
• 메모이제이션: 불필요한 리렌더링 방지
• 지연 로딩: 필요한 시점에만 데이터 로드

접근성

• 키보드 네비게이션: 모든 기능을 키보드로 접근 가능
• 스크린 리더: 시각적 매핑의 대체 텍스트 제공
• 색상 대비: 연결선과 상태 표시의 명확한 구분

확장성

• 플러그인 구조: 새로운 연결 타입 쉽게 추가
• 커스텀 변환: 사용자 정의 데이터 변환 규칙
• API 확장: 외부 시스템과의 연동 지원

---

🎯 다음 단계

이 계획서를 바탕으로 Phase 1부터 순차적으로 구현을 시작하겠습니다.

첫 번째 작업: 좌우 분할 레이아웃과 연결 타입 선택 컴포넌트 구현

구현을 시작하시겠어요? 🚀