# 🎨 제어관리 - 데이터 연결 설정 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)

```typescript
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)

```typescript
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)

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

## 🔄 데이터 플로우

### 상태 관리

```typescript
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[];
}
```

### 이벤트 핸들링

```typescript
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부터 순차적으로 구현**을 시작하겠습니다.

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

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