312 lines
9.2 KiB
Markdown
312 lines
9.2 KiB
Markdown
|
# 🎨 제어관리 - 데이터 연결 설정 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부터 순차적으로 구현**을 시작하겠습니다.
|
||
|
|
|
||
|
|
**첫 번째 작업**: 좌우 분할 레이아웃과 연결 타입 선택 컴포넌트 구현
|
||
|
|
|
||
|
|
구현을 시작하시겠어요? 🚀
|