From 2a4e379dc42f7e4553e39354dbebc7cc08ae8e6f Mon Sep 17 00:00:00 2001 From: kjs Date: Fri, 26 Sep 2025 01:28:51 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A0=9C=EC=96=B4=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EC=99=B8=EB=B6=80=EC=BB=A4=EB=84=A5=EC=85=98=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- UI_REDESIGN_PLAN.md | 311 ++++++++++ backend-node/src/app.ts | 14 +- backend-node/src/config/database.ts | 24 +- backend-node/src/config/environment.ts | 2 +- backend-node/src/database/MariaDBConnector.ts | 85 ++- .../src/routes/externalDbConnectionRoutes.ts | 23 +- .../src/routes/multiConnectionRoutes.ts | 39 ++ backend-node/src/services/adminService.ts | 4 +- .../src/services/dataflowControlService.ts | 296 ++++++++- .../services/externalDbConnectionService.ts | 143 ++++- .../services/multiConnectionQueryService.ts | 171 +++++- .../src/services/tableManagementService.ts | 3 +- frontend/app/(main)/admin/dataflow/page.tsx | 79 ++- frontend/components/dataflow/DataFlowList.tsx | 2 +- .../dataflow/connection/DataSaveSettings.tsx | 212 +------ .../redesigned/DataConnectionDesigner.tsx | 531 ++++++++++++++++ .../redesigned/LeftPanel/ActionButtons.tsx | 113 ++++ .../LeftPanel/ActionSummaryPanel.tsx | 115 ++++ .../redesigned/LeftPanel/AdvancedSettings.tsx | 164 +++++ .../LeftPanel/ConnectionTypeSelector.tsx | 59 ++ .../redesigned/LeftPanel/LeftPanel.tsx | 81 +++ .../LeftPanel/MappingDetailList.tsx | 112 ++++ .../redesigned/LeftPanel/MappingInfoPanel.tsx | 115 ++++ .../ActionConfig/ActionConditionBuilder.tsx | 546 +++++++++++++++++ .../RightPanel/ActionConfigStep.tsx | 226 +++++++ .../redesigned/RightPanel/ConnectionStep.tsx | 312 ++++++++++ .../RightPanel/ControlConditionStep.tsx | 462 ++++++++++++++ .../RightPanel/FieldMappingStep.tsx | 199 ++++++ .../RightPanel/MultiActionConfigStep.tsx | 571 ++++++++++++++++++ .../redesigned/RightPanel/RightPanel.tsx | 141 +++++ .../redesigned/RightPanel/StepProgress.tsx | 90 +++ .../redesigned/RightPanel/TableStep.tsx | 343 +++++++++++ .../VisualMapping/ConnectionLine.tsx | 152 +++++ .../RightPanel/VisualMapping/FieldColumn.tsx | 194 ++++++ .../VisualMapping/FieldMappingCanvas.tsx | 325 ++++++++++ .../VisualMapping/MappingControls.tsx | 117 ++++ .../redesigned/SaveRelationshipDialog.tsx | 150 +++++ .../connection/redesigned/types/redesigned.ts | 209 +++++++ frontend/lib/api/codeManagement.ts | 175 ++++++ frontend/lib/api/dataflowSave.ts | 202 +++++++ frontend/lib/api/multiConnection.ts | 302 ++++++++- frontend/lib/types/multiConnection.ts | 31 + vexplor.png | Bin 0 -> 6866 bytes 43 files changed, 7129 insertions(+), 316 deletions(-) create mode 100644 UI_REDESIGN_PLAN.md create mode 100644 frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfigStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/ConnectionLine.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/SaveRelationshipDialog.tsx create mode 100644 frontend/components/dataflow/connection/redesigned/types/redesigned.ts create mode 100644 frontend/lib/api/codeManagement.ts create mode 100644 frontend/lib/api/dataflowSave.ts create mode 100644 frontend/lib/types/multiConnection.ts create mode 100644 vexplor.png diff --git a/UI_REDESIGN_PLAN.md b/UI_REDESIGN_PLAN.md new file mode 100644 index 00000000..930a693c --- /dev/null +++ b/UI_REDESIGN_PLAN.md @@ -0,0 +1,311 @@ +# 🎨 μ œμ–΄κ΄€λ¦¬ - 데이터 μ—°κ²° μ„€μ • 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: , + }, + { + id: "external_call", + label: "μ™ΈλΆ€ 호좜", + description: "API/Webhook 호좜", + icon: , + }, +]; +``` + +### 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) => void; + deleteMapping: (mappingId: string) => void; + + // 검증 및 μ €μž₯ + validateMappings: () => Promise; + saveMappings: () => Promise; + testExecution: () => Promise; +} +``` + +## 🎯 μ‚¬μš©μž κ²½ν—˜ (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λΆ€ν„° 순차적으둜 κ΅¬ν˜„**을 μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€. + +**첫 번째 μž‘μ—…**: 쒌우 λΆ„ν•  λ ˆμ΄μ•„μ›ƒκ³Ό μ—°κ²° νƒ€μž… 선택 μ»΄ν¬λ„ŒνŠΈ κ΅¬ν˜„ + +κ΅¬ν˜„μ„ μ‹œμž‘ν•˜μ‹œκ² μ–΄μš”? πŸš€ diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts index 9a22f572..f3a0b65a 100644 --- a/backend-node/src/app.ts +++ b/backend-node/src/app.ts @@ -20,7 +20,7 @@ import commonCodeRoutes from "./routes/commonCodeRoutes"; import dynamicFormRoutes from "./routes/dynamicFormRoutes"; import fileRoutes from "./routes/fileRoutes"; import companyManagementRoutes from "./routes/companyManagementRoutes"; -// import dataflowRoutes from "./routes/dataflowRoutes"; // μž„μ‹œ 주석 +import dataflowRoutes from "./routes/dataflowRoutes"; import dataflowDiagramRoutes from "./routes/dataflowDiagramRoutes"; import webTypeStandardRoutes from "./routes/webTypeStandardRoutes"; import buttonActionStandardRoutes from "./routes/buttonActionStandardRoutes"; @@ -88,13 +88,17 @@ app.use( // Rate Limiting (개발 ν™˜κ²½μ—μ„œλŠ” μ™„ν™”) const limiter = rateLimit({ windowMs: 1 * 60 * 1000, // 1λΆ„ - max: config.nodeEnv === "development" ? 1000 : 100, // κ°œλ°œν™˜κ²½μ—μ„œλŠ” 1000, μš΄μ˜ν™˜κ²½μ—μ„œλŠ” 100 + max: config.nodeEnv === "development" ? 5000 : 100, // κ°œλ°œν™˜κ²½μ—μ„œλŠ” 5000으둜 증가, μš΄μ˜ν™˜κ²½μ—μ„œλŠ” 100 message: { error: "λ„ˆλ¬΄ λ§Žμ€ μš”μ²­μ΄ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. μž μ‹œ ν›„ λ‹€μ‹œ μ‹œλ„ν•΄μ£Όμ„Έμš”.", }, skip: (req) => { - // ν—¬μŠ€ μ²΄ν¬λŠ” Rate Limiting μ œμ™Έ - return req.path === "/health"; + // ν—¬μŠ€ 체크와 ν…Œμ΄λΈ”/컬럼 μ‘°νšŒλŠ” Rate Limiting μ™„ν™” + return ( + req.path === "/health" || + req.path.includes("/table-management/") || + req.path.includes("/external-db-connections/") + ); }, }); app.use("/api/", limiter); @@ -120,7 +124,7 @@ app.use("/api/common-codes", commonCodeRoutes); app.use("/api/dynamic-form", dynamicFormRoutes); app.use("/api/files", fileRoutes); app.use("/api/company-management", companyManagementRoutes); -// app.use("/api/dataflow", dataflowRoutes); // μž„μ‹œ 주석 +app.use("/api/dataflow", dataflowRoutes); app.use("/api/dataflow-diagrams", dataflowDiagramRoutes); app.use("/api/admin/web-types", webTypeStandardRoutes); app.use("/api/admin/button-actions", buttonActionStandardRoutes); diff --git a/backend-node/src/config/database.ts b/backend-node/src/config/database.ts index 6dec398b..d3ecfd44 100644 --- a/backend-node/src/config/database.ts +++ b/backend-node/src/config/database.ts @@ -1,15 +1,20 @@ import { PrismaClient } from "@prisma/client"; import config from "./environment"; -// Prisma ν΄λΌμ΄μ–ΈνŠΈ μΈμŠ€ν„΄μŠ€ 생성 -const prisma = new PrismaClient({ - datasources: { - db: { - url: config.databaseUrl, +// Prisma ν΄λΌμ΄μ–ΈνŠΈ 생성 ν•¨μˆ˜ +function createPrismaClient() { + return new PrismaClient({ + datasources: { + db: { + url: config.databaseUrl, + }, }, - }, - log: config.debug ? ["query", "info", "warn", "error"] : ["error"], -}); + log: config.debug ? ["query", "info", "warn", "error"] : ["error"], + }); +} + +// 단일 μΈμŠ€ν„΄μŠ€ 생성 +const prisma = createPrismaClient(); // λ°μ΄ν„°λ² μ΄μŠ€ μ—°κ²° ν…ŒμŠ€νŠΈ async function testConnection() { @@ -41,4 +46,5 @@ if (config.nodeEnv === "development") { testConnection(); } -export default prisma; +// κΈ°λ³Έ 내보내기 +export = prisma; diff --git a/backend-node/src/config/environment.ts b/backend-node/src/config/environment.ts index 62fe0635..a4c6c33b 100644 --- a/backend-node/src/config/environment.ts +++ b/backend-node/src/config/environment.ts @@ -80,7 +80,7 @@ const getCorsOrigin = (): string[] | boolean => { const config: Config = { // μ„œλ²„ μ„€μ • - port: parseInt(process.env.PORT || "3000", 10), + port: parseInt(process.env.PORT || "8080", 10), host: process.env.HOST || "0.0.0.0", nodeEnv: process.env.NODE_ENV || "development", diff --git a/backend-node/src/database/MariaDBConnector.ts b/backend-node/src/database/MariaDBConnector.ts index 1926f183..2bfeda0a 100644 --- a/backend-node/src/database/MariaDBConnector.ts +++ b/backend-node/src/database/MariaDBConnector.ts @@ -1,6 +1,10 @@ -import { DatabaseConnector, ConnectionConfig, QueryResult } from '../interfaces/DatabaseConnector'; -import { ConnectionTestResult, TableInfo } from '../types/externalDbTypes'; -import * as mysql from 'mysql2/promise'; +import { + DatabaseConnector, + ConnectionConfig, + QueryResult, +} from "../interfaces/DatabaseConnector"; +import { ConnectionTestResult, TableInfo } from "../types/externalDbTypes"; +import * as mysql from "mysql2/promise"; export class MariaDBConnector implements DatabaseConnector { private connection: mysql.Connection | null = null; @@ -18,8 +22,18 @@ export class MariaDBConnector implements DatabaseConnector { user: this.config.user, password: this.config.password, database: this.config.database, - connectTimeout: this.config.connectionTimeoutMillis, - ssl: typeof this.config.ssl === 'boolean' ? undefined : this.config.ssl, + // πŸ”§ MySQL2μ—μ„œ μ§€μ›ν•˜λŠ” νƒ€μž„μ•„μ›ƒ μ„€μ • + connectTimeout: this.config.connectionTimeoutMillis || 30000, // μ—°κ²° νƒ€μž„μ•„μ›ƒ 30초 + ssl: typeof this.config.ssl === "boolean" ? undefined : this.config.ssl, + // πŸ”§ MySQL2μ—μ„œ μ§€μ›ν•˜λŠ” μΆ”κ°€ μ„€μ • + charset: "utf8mb4", + timezone: "Z", + supportBigNumbers: true, + bigNumberStrings: true, + // πŸ”§ μ—°κ²° ν’€ μ„€μ • (단일 μ—°κ²°μ΄μ§€λ§Œ μ•ˆμ •μ„±μ„ μœ„ν•΄) + dateStrings: true, + debug: false, + trace: false, }); } } @@ -35,7 +49,9 @@ export class MariaDBConnector implements DatabaseConnector { const startTime = Date.now(); try { await this.connect(); - const [rows] = await this.connection!.query("SELECT VERSION() as version"); + const [rows] = await this.connection!.query( + "SELECT VERSION() as version" + ); const version = (rows as any[])[0]?.version || "Unknown"; const responseTime = Date.now() - startTime; await this.disconnect(); @@ -63,7 +79,18 @@ export class MariaDBConnector implements DatabaseConnector { async executeQuery(query: string): Promise { try { await this.connect(); - const [rows, fields] = await this.connection!.query(query); + + // πŸ”§ 쿼리 νƒ€μž„μ•„μ›ƒ μˆ˜λ™ κ΅¬ν˜„ (60초) + const queryTimeout = this.config.queryTimeoutMillis || 60000; + const queryPromise = this.connection!.query(query); + const timeoutPromise = new Promise((_, reject) => { + setTimeout(() => reject(new Error("쿼리 μ‹€ν–‰ νƒ€μž„μ•„μ›ƒ")), queryTimeout); + }); + + const [rows, fields] = (await Promise.race([ + queryPromise, + timeoutPromise, + ])) as any; await this.disconnect(); return { rows: rows as any[], @@ -106,17 +133,51 @@ export class MariaDBConnector implements DatabaseConnector { async getColumns(tableName: string): Promise { try { + console.log(`πŸ” MariaDB 컬럼 쑰회 μ‹œμž‘: ${tableName}`); await this.connect(); - const [rows] = await this.connection!.query(` + + // πŸ”§ 컬럼 쑰회 νƒ€μž„μ•„μ›ƒ μˆ˜λ™ κ΅¬ν˜„ (30초) + const queryTimeout = this.config.queryTimeoutMillis || 30000; + // μŠ€ν‚€λ§ˆλͺ…을 λͺ…μ‹œμ μœΌλ‘œ 확인 + const schemaQuery = `SELECT DATABASE() as schema_name`; + const [schemaResult] = await this.connection!.query(schemaQuery); + const schemaName = + (schemaResult as any[])[0]?.schema_name || this.config.database; + + console.log(`πŸ“‹ μ‚¬μš©ν•  μŠ€ν‚€λ§ˆ: ${schemaName}`); + + const query = ` SELECT COLUMN_NAME as column_name, DATA_TYPE as data_type, IS_NULLABLE as is_nullable, - COLUMN_DEFAULT as column_default + COLUMN_DEFAULT as column_default, + COLUMN_COMMENT as column_comment FROM information_schema.COLUMNS - WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? + WHERE TABLE_SCHEMA = ? AND TABLE_NAME = ? ORDER BY ORDINAL_POSITION; - `, [tableName]); + `; + + console.log( + `πŸ“‹ μ‹€ν–‰ν•  쿼리: ${query.trim()}, νŒŒλΌλ―Έν„°: [${schemaName}, ${tableName}]` + ); + + const queryPromise = this.connection!.query(query, [ + schemaName, + tableName, + ]); + const timeoutPromise = new Promise((_, reject) => { + setTimeout(() => reject(new Error("컬럼 쑰회 νƒ€μž„μ•„μ›ƒ")), queryTimeout); + }); + + const [rows] = (await Promise.race([ + queryPromise, + timeoutPromise, + ])) as any; + + console.log( + `βœ… MariaDB 컬럼 쑰회 μ™„λ£Œ: ${tableName}, ${rows ? rows.length : 0}개 컬럼` + ); await this.disconnect(); return rows as any[]; } catch (error: any) { @@ -124,4 +185,4 @@ export class MariaDBConnector implements DatabaseConnector { throw new Error(`컬럼 정보 쑰회 μ‹€νŒ¨: ${error.message}`); } } -} \ No newline at end of file +} diff --git a/backend-node/src/routes/externalDbConnectionRoutes.ts b/backend-node/src/routes/externalDbConnectionRoutes.ts index 858328e1..baeb5f6d 100644 --- a/backend-node/src/routes/externalDbConnectionRoutes.ts +++ b/backend-node/src/routes/externalDbConnectionRoutes.ts @@ -447,17 +447,28 @@ router.get( return res.status(400).json(externalConnections); } - // μ™ΈλΆ€ 컀λ„₯μ…˜λ“€μ— λŒ€ν•΄ μ—°κ²° ν…ŒμŠ€νŠΈ μˆ˜ν–‰ (병렬 처리) + // μ™ΈλΆ€ 컀λ„₯μ…˜λ“€μ— λŒ€ν•΄ μ—°κ²° ν…ŒμŠ€νŠΈ μˆ˜ν–‰ (병렬 처리, νƒ€μž„μ•„μ›ƒ 5초) const testedConnections = await Promise.all( (externalConnections.data || []).map(async (connection) => { try { - const testResult = - await ExternalDbConnectionService.testConnectionById( - connection.id! - ); + // κ°œλ³„ μ—°κ²° ν…ŒμŠ€νŠΈμ— 5초 νƒ€μž„μ•„μ›ƒ 적용 + const testPromise = ExternalDbConnectionService.testConnectionById( + connection.id! + ); + const timeoutPromise = new Promise((_, reject) => { + setTimeout(() => reject(new Error("μ—°κ²° ν…ŒμŠ€νŠΈ νƒ€μž„μ•„μ›ƒ")), 5000); + }); + + const testResult = await Promise.race([ + testPromise, + timeoutPromise, + ]); return testResult.success ? connection : null; } catch (error) { - console.warn(`컀λ„₯μ…˜ ν…ŒμŠ€νŠΈ μ‹€νŒ¨ (ID: ${connection.id}):`, error); + console.warn( + `컀λ„₯μ…˜ ν…ŒμŠ€νŠΈ μ‹€νŒ¨ (ID: ${connection.id}):`, + error instanceof Error ? error.message : error + ); return null; } }) diff --git a/backend-node/src/routes/multiConnectionRoutes.ts b/backend-node/src/routes/multiConnectionRoutes.ts index 42240596..4a97b9e0 100644 --- a/backend-node/src/routes/multiConnectionRoutes.ts +++ b/backend-node/src/routes/multiConnectionRoutes.ts @@ -51,6 +51,45 @@ router.get( } ); +/** + * GET /api/multi-connection/connections/:connectionId/tables/batch + * νŠΉμ • 컀λ„₯μ…˜μ˜ λͺ¨λ“  ν…Œμ΄λΈ” 정보 배치 쑰회 (컬럼 수 포함) + */ +router.get( + "/connections/:connectionId/tables/batch", + authenticateToken, + async (req: AuthenticatedRequest, res: Response) => { + try { + const connectionId = parseInt(req.params.connectionId); + + if (isNaN(connectionId)) { + return res.status(400).json({ + success: false, + message: "μœ νš¨ν•˜μ§€ μ•Šμ€ 컀λ„₯μ…˜ IDμž…λ‹ˆλ‹€.", + }); + } + + logger.info(`배치 ν…Œμ΄λΈ” 정보 쑰회 μš”μ²­: connectionId=${connectionId}`); + + const tables = + await multiConnectionService.getBatchTablesWithColumns(connectionId); + + return res.status(200).json({ + success: true, + data: tables, + message: `컀λ„₯μ…˜ ${connectionId}의 ν…Œμ΄λΈ” 정보λ₯Ό 배치 μ‘°νšŒν–ˆμŠ΅λ‹ˆλ‹€.`, + }); + } catch (error) { + logger.error(`배치 ν…Œμ΄λΈ” 정보 쑰회 μ‹€νŒ¨: ${error}`); + return res.status(500).json({ + success: false, + message: "배치 ν…Œμ΄λΈ” 정보 쑰회 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.", + error: error instanceof Error ? error.message : "μ•Œ 수 μ—†λŠ” 였λ₯˜", + }); + } + } +); + /** * GET /api/multi-connection/connections/:connectionId/tables/:tableName/columns * νŠΉμ • 컀λ„₯μ…˜μ˜ ν…Œμ΄λΈ” 컬럼 정보 쑰회 (메인 DB 포함) diff --git a/backend-node/src/services/adminService.ts b/backend-node/src/services/adminService.ts index d5f8c46a..ddfd8cbc 100644 --- a/backend-node/src/services/adminService.ts +++ b/backend-node/src/services/adminService.ts @@ -1,7 +1,7 @@ -import { PrismaClient } from "@prisma/client"; import { logger } from "../utils/logger"; -const prisma = new PrismaClient(); +// πŸ”§ Prisma ν΄λΌμ΄μ–ΈνŠΈ 쀑볡 생성 방지 - κΈ°μ‘΄ μΈμŠ€ν„΄μŠ€ μž¬μ‚¬μš© +import prisma = require("../config/database"); export class AdminService { /** diff --git a/backend-node/src/services/dataflowControlService.ts b/backend-node/src/services/dataflowControlService.ts index d706935f..daefcadd 100644 --- a/backend-node/src/services/dataflowControlService.ts +++ b/backend-node/src/services/dataflowControlService.ts @@ -1,6 +1,5 @@ -import { PrismaClient } from "@prisma/client"; - -const prisma = new PrismaClient(); +// πŸ”§ Prisma ν΄λΌμ΄μ–ΈνŠΈ 쀑볡 생성 방지 - κΈ°μ‘΄ μΈμŠ€ν„΄μŠ€ μž¬μ‚¬μš© +import prisma = require("../config/database"); export interface ControlCondition { id: string; @@ -33,6 +32,16 @@ export interface ControlAction { sourceField?: string; targetField?: string; }; + // πŸ†• 닀쀑 컀λ„₯μ…˜ 지원 μΆ”κ°€ + fromConnection?: { + id: number; + name?: string; + }; + toConnection?: { + id: number; + name?: string; + }; + targetTable?: string; } export interface ControlPlan { @@ -84,13 +93,59 @@ export class DataflowControlService { }; } - // μ œμ–΄ κ·œμΉ™κ³Ό μ‹€ν–‰ κ³„νš μΆ”μΆœ - const controlRules = Array.isArray(diagram.control) - ? (diagram.control as unknown as ControlRule[]) - : []; - const executionPlans = Array.isArray(diagram.plan) - ? (diagram.plan as unknown as ControlPlan[]) - : []; + // μ œμ–΄ κ·œμΉ™κ³Ό μ‹€ν–‰ κ³„νš μΆ”μΆœ (κΈ°μ‘΄ ꡬ쑰 + redesigned UI ꡬ쑰 지원) + let controlRules: ControlRule[] = []; + let executionPlans: ControlPlan[] = []; + + // πŸ†• redesigned UI ꡬ쑰 처리 + if (diagram.relationships && typeof diagram.relationships === "object") { + const relationships = diagram.relationships as any; + + // Case 1: redesigned UI 단일 관계 ꡬ쑰 + if (relationships.controlConditions && relationships.fieldMappings) { + console.log("πŸ”„ Redesigned UI ꡬ쑰 감지, κΈ°μ‘΄ ꡬ쑰둜 λ³€ν™˜ 쀑"); + + // redesigned β†’ κΈ°μ‘΄ ꡬ쑰 λ³€ν™˜ + controlRules = [ + { + id: relationshipId, + triggerType: triggerType, + conditions: relationships.controlConditions || [], + }, + ]; + + executionPlans = [ + { + id: relationshipId, + sourceTable: relationships.fromTable || tableName, + actions: [ + { + id: "action_1", + name: "μ•‘μ…˜ 1", + actionType: relationships.actionType || "insert", + conditions: relationships.actionConditions || [], + fieldMappings: relationships.fieldMappings || [], + fromConnection: relationships.fromConnection, + toConnection: relationships.toConnection, + targetTable: relationships.toTable, + }, + ], + }, + ]; + + console.log("βœ… Redesigned β†’ κΈ°μ‘΄ ꡬ쑰 λ³€ν™˜ μ™„λ£Œ"); + } + } + + // κΈ°μ‘΄ ꡬ쑰 처리 (ν•˜μœ„ ν˜Έν™˜μ„±) + if (controlRules.length === 0) { + controlRules = Array.isArray(diagram.control) + ? (diagram.control as unknown as ControlRule[]) + : []; + executionPlans = Array.isArray(diagram.plan) + ? (diagram.plan as unknown as ControlPlan[]) + : []; + } console.log(`πŸ“‹ μ œμ–΄ κ·œμΉ™:`, controlRules); console.log(`πŸ“‹ μ‹€ν–‰ κ³„νš:`, executionPlans); @@ -174,37 +229,29 @@ export class DataflowControlService { logicalOperator: action.logicalOperator, conditions: action.conditions, fieldMappings: action.fieldMappings, + fromConnection: (action as any).fromConnection, + toConnection: (action as any).toConnection, + targetTable: (action as any).targetTable, }); - // μ•‘μ…˜ 쑰건 검증 (μžˆλŠ” 경우) - 동적 ν…Œμ΄λΈ” 지원 - if (action.conditions && action.conditions.length > 0) { - const actionConditionResult = await this.evaluateActionConditions( - action, - sourceData, - tableName - ); + // πŸ†• 닀쀑 컀λ„₯μ…˜ 지원 μ•‘μ…˜ μ‹€ν–‰ + const actionResult = await this.executeMultiConnectionAction( + action, + sourceData, + targetPlan.sourceTable + ); - if (!actionConditionResult.satisfied) { - console.log( - `⚠️ μ•‘μ…˜ 쑰건 λ―ΈμΆ©μ‘±: ${actionConditionResult.reason}` - ); - previousActionSuccess = false; - if (action.logicalOperator === "AND") { - shouldSkipRemainingActions = true; - } - continue; - } - } - - const actionResult = await this.executeAction(action, sourceData); executedActions.push({ actionId: action.id, actionName: action.name, + actionType: action.actionType, result: actionResult, + timestamp: new Date().toISOString(), }); - previousActionSuccess = true; - shouldSkipRemainingActions = false; // μ„±κ³΅ν–ˆμœΌλ―€λ‘œ λ‹€μ‹œ μ‹€ν–‰ κ°€λŠ₯ + previousActionSuccess = actionResult?.success !== false; + + // μ•‘μ…˜ 쑰건 검증은 이미 μœ„μ—μ„œ 처리됨 (쀑볡 제거) } catch (error) { console.error(`❌ μ•‘μ…˜ μ‹€ν–‰ 였λ₯˜: ${action.name}`, error); const errorMessage = @@ -235,6 +282,191 @@ export class DataflowControlService { } } + /** + * πŸ†• 닀쀑 컀λ„₯μ…˜ μ•‘μ…˜ μ‹€ν–‰ + */ + private async executeMultiConnectionAction( + action: ControlAction, + sourceData: Record, + sourceTable: string + ): Promise { + try { + const extendedAction = action as any; // redesigned UI ꡬ쑰 μ ‘κ·Ό + + // μ—°κ²° 정보 μΆ”μΆœ + const fromConnection = extendedAction.fromConnection || { id: 0 }; + const toConnection = extendedAction.toConnection || { id: 0 }; + const targetTable = extendedAction.targetTable || sourceTable; + + console.log(`πŸ”— 닀쀑 컀λ„₯μ…˜ μ•‘μ…˜ μ‹€ν–‰:`, { + actionType: action.actionType, + fromConnectionId: fromConnection.id, + toConnectionId: toConnection.id, + sourceTable, + targetTable, + }); + + // MultiConnectionQueryService import ν•„μš” + const { MultiConnectionQueryService } = await import( + "./multiConnectionQueryService" + ); + const multiConnService = new MultiConnectionQueryService(); + + switch (action.actionType) { + case "insert": + return await this.executeMultiConnectionInsert( + action, + sourceData, + sourceTable, + targetTable, + fromConnection.id, + toConnection.id, + multiConnService + ); + + case "update": + return await this.executeMultiConnectionUpdate( + action, + sourceData, + sourceTable, + targetTable, + fromConnection.id, + toConnection.id, + multiConnService + ); + + case "delete": + return await this.executeMultiConnectionDelete( + action, + sourceData, + sourceTable, + targetTable, + fromConnection.id, + toConnection.id, + multiConnService + ); + + default: + throw new Error(`μ§€μ›λ˜μ§€ μ•ŠλŠ” μ•‘μ…˜ νƒ€μž…: ${action.actionType}`); + } + } catch (error) { + console.error(`❌ 닀쀑 컀λ„₯μ…˜ μ•‘μ…˜ μ‹€ν–‰ μ‹€νŒ¨:`, error); + return { + success: false, + message: error instanceof Error ? error.message : String(error), + }; + } + } + + /** + * πŸ†• 닀쀑 컀λ„₯μ…˜ INSERT μ‹€ν–‰ + */ + private async executeMultiConnectionInsert( + action: ControlAction, + sourceData: Record, + sourceTable: string, + targetTable: string, + fromConnectionId: number, + toConnectionId: number, + multiConnService: any + ): Promise { + try { + // ν•„λ“œ 맀핑 적용 + const mappedData: Record = {}; + + for (const mapping of action.fieldMappings) { + const sourceField = mapping.sourceField; + const targetField = mapping.targetField; + + if (mapping.defaultValue !== undefined) { + // κΈ°λ³Έκ°’ μ‚¬μš© + mappedData[targetField] = mapping.defaultValue; + } else if (sourceField && sourceData[sourceField] !== undefined) { + // μ†ŒμŠ€ λ°μ΄ν„°μ—μ„œ 맀핑 + mappedData[targetField] = sourceData[sourceField]; + } + } + + console.log(`πŸ“‹ λ§€ν•‘λœ 데이터:`, mappedData); + + // λŒ€μƒ 연결에 데이터 μ‚½μž… + const result = await multiConnService.insertDataToConnection( + toConnectionId, + targetTable, + mappedData + ); + + return { + success: true, + message: `${targetTable}에 데이터 μ‚½μž… μ™„λ£Œ`, + insertedCount: 1, + data: result, + }; + } catch (error) { + console.error(`❌ INSERT μ‹€ν–‰ μ‹€νŒ¨:`, error); + return { + success: false, + message: error instanceof Error ? error.message : String(error), + }; + } + } + + /** + * πŸ†• 닀쀑 컀λ„₯μ…˜ UPDATE μ‹€ν–‰ + */ + private async executeMultiConnectionUpdate( + action: ControlAction, + sourceData: Record, + sourceTable: string, + targetTable: string, + fromConnectionId: number, + toConnectionId: number, + multiConnService: any + ): Promise { + try { + // UPDATE 둜직 κ΅¬ν˜„ (ν–₯ν›„ ν™•μž₯) + console.log(`⚠️ UPDATE μ•‘μ…˜μ€ ν–₯ν›„ κ΅¬ν˜„ μ˜ˆμ •`); + return { + success: true, + message: "UPDATE μ•‘μ…˜ 싀행됨 (ν–₯ν›„ κ΅¬ν˜„)", + updatedCount: 0, + }; + } catch (error) { + return { + success: false, + message: error instanceof Error ? error.message : String(error), + }; + } + } + + /** + * πŸ†• 닀쀑 컀λ„₯μ…˜ DELETE μ‹€ν–‰ + */ + private async executeMultiConnectionDelete( + action: ControlAction, + sourceData: Record, + sourceTable: string, + targetTable: string, + fromConnectionId: number, + toConnectionId: number, + multiConnService: any + ): Promise { + try { + // DELETE 둜직 κ΅¬ν˜„ (ν–₯ν›„ ν™•μž₯) + console.log(`⚠️ DELETE μ•‘μ…˜μ€ ν–₯ν›„ κ΅¬ν˜„ μ˜ˆμ •`); + return { + success: true, + message: "DELETE μ•‘μ…˜ 싀행됨 (ν–₯ν›„ κ΅¬ν˜„)", + deletedCount: 0, + }; + } catch (error) { + return { + success: false, + message: error instanceof Error ? error.message : String(error), + }; + } + } + /** * μ•‘μ…˜λ³„ 쑰건 평가 (동적 ν…Œμ΄λΈ” 지원) */ diff --git a/backend-node/src/services/externalDbConnectionService.ts b/backend-node/src/services/externalDbConnectionService.ts index 671c31c6..5276dfab 100644 --- a/backend-node/src/services/externalDbConnectionService.ts +++ b/backend-node/src/services/externalDbConnectionService.ts @@ -11,7 +11,8 @@ import { import { PasswordEncryption } from "../utils/passwordEncryption"; import { DatabaseConnectorFactory } from "../database/DatabaseConnectorFactory"; -const prisma = new PrismaClient(); +// πŸ”§ Prisma ν΄λΌμ΄μ–ΈνŠΈ 쀑볡 생성 방지 - κΈ°μ‘΄ μΈμŠ€ν„΄μŠ€ μž¬μ‚¬μš© +import prisma = require("../config/database"); export class ExternalDbConnectionService { /** @@ -166,7 +167,7 @@ export class ExternalDbConnectionService { } /** - * νŠΉμ • μ™ΈλΆ€ DB μ—°κ²° 쑰회 + * νŠΉμ • μ™ΈλΆ€ DB μ—°κ²° 쑰회 (λΉ„λ°€λ²ˆν˜Έ λ§ˆμŠ€ν‚Ή) */ static async getConnectionById( id: number @@ -205,6 +206,45 @@ export class ExternalDbConnectionService { } } + /** + * πŸ”‘ νŠΉμ • μ™ΈλΆ€ DB μ—°κ²° 쑰회 (μ‹€μ œ λΉ„λ°€λ²ˆν˜Έ 포함 - λ‚΄λΆ€ μ„œλΉ„μŠ€ μ „μš©) + */ + static async getConnectionByIdWithPassword( + id: number + ): Promise> { + try { + const connection = await prisma.external_db_connections.findUnique({ + where: { id }, + }); + + if (!connection) { + return { + success: false, + message: "ν•΄λ‹Ή μ—°κ²° 섀정을 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.", + }; + } + + // πŸ”‘ μ‹€μ œ λΉ„λ°€λ²ˆν˜Έ ν¬ν•¨ν•˜μ—¬ λ°˜ν™˜ (λ‚΄λΆ€ μ„œλΉ„μŠ€ μ „μš©) + const connectionWithPassword = { + ...connection, + description: connection.description || undefined, + } as ExternalDbConnection; + + return { + success: true, + data: connectionWithPassword, + message: "μ—°κ²° 섀정을 μ‘°νšŒν–ˆμŠ΅λ‹ˆλ‹€.", + }; + } catch (error) { + console.error("μ™ΈλΆ€ DB μ—°κ²° 쑰회 μ‹€νŒ¨:", error); + return { + success: false, + message: "μ—°κ²° 쑰회 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.", + error: error instanceof Error ? error.message : "μ•Œ 수 μ—†λŠ” 였λ₯˜", + }; + } + } + /** * μƒˆ μ™ΈλΆ€ DB μ—°κ²° 생성 */ @@ -547,10 +587,18 @@ export class ExternalDbConnectionService { `πŸ” [μ—°κ²°ν…ŒμŠ€νŠΈ] μƒˆ 컀λ„₯ν„°λ‘œ DB μ—°κ²° μ‹œλ„ - Host: ${config.host}, DB: ${config.database}, User: ${config.user}` ); - const testResult = await connector.testConnection(); - console.log( - `πŸ” [μ—°κ²°ν…ŒμŠ€νŠΈ] κ²°κ³Ό - Success: ${testResult.success}, Message: ${testResult.message}` - ); + let testResult; + try { + testResult = await connector.testConnection(); + console.log( + `πŸ” [μ—°κ²°ν…ŒμŠ€νŠΈ] κ²°κ³Ό - Success: ${testResult.success}, Message: ${testResult.message}` + ); + } finally { + // πŸ”§ μ—°κ²° ν•΄μ œ μΆ”κ°€ - λ©”λͺ¨λ¦¬ λˆ„μˆ˜ 방지 + if (connector && typeof connector.disconnect === "function") { + await connector.disconnect(); + } + } return { success: testResult.success, @@ -700,7 +748,14 @@ export class ExternalDbConnectionService { config, id ); - const result = await connector.executeQuery(query); + + let result; + try { + result = await connector.executeQuery(query); + } finally { + // πŸ”§ μ—°κ²° ν•΄μ œ μΆ”κ°€ - λ©”λͺ¨λ¦¬ λˆ„μˆ˜ 방지 + await DatabaseConnectorFactory.closeConnector(id, connection.db_type); + } return { success: true, @@ -823,7 +878,14 @@ export class ExternalDbConnectionService { config, id ); - const tables = await connector.getTables(); + + let tables; + try { + tables = await connector.getTables(); + } finally { + // πŸ”§ μ—°κ²° ν•΄μ œ μΆ”κ°€ - λ©”λͺ¨λ¦¬ λˆ„μˆ˜ 방지 + await DatabaseConnectorFactory.closeConnector(id, connection.db_type); + } return { success: true, @@ -914,26 +976,70 @@ export class ExternalDbConnectionService { let client: any = null; try { - const connection = await this.getConnectionById(connectionId); + console.log( + `πŸ” 컬럼 쑰회 μ‹œμž‘: connectionId=${connectionId}, tableName=${tableName}` + ); + + const connection = await this.getConnectionByIdWithPassword(connectionId); if (!connection.success || !connection.data) { + console.log(`❌ μ—°κ²° 정보 쑰회 μ‹€νŒ¨: connectionId=${connectionId}`); return { success: false, message: "μ—°κ²° 정보λ₯Ό 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.", }; } + console.log( + `βœ… μ—°κ²° 정보 쑰회 성곡: ${connection.data.connection_name} (${connection.data.db_type})` + ); + const connectionData = connection.data; // λΉ„λ°€λ²ˆν˜Έ λ³΅ν˜Έν™” (μ‹€νŒ¨ μ‹œ 일반적인 νŒ¨μŠ€μ›Œλ“œλ“€ μ‹œλ„) let decryptedPassword: string; + + // πŸ” μ•”ν˜Έν™”/λ³΅ν˜Έν™” μƒνƒœ 진단 + console.log(`πŸ” μ•”ν˜Έν™” μƒνƒœ 진단:`); + console.log( + `- 원본 λΉ„λ°€λ²ˆν˜Έ ν˜•νƒœ: ${connectionData.password.substring(0, 20)}...` + ); + console.log(`- λΉ„λ°€λ²ˆν˜Έ 길이: ${connectionData.password.length}`); + console.log(`- 콜둠 포함 μ—¬λΆ€: ${connectionData.password.includes(":")}`); + console.log( + `- μ•”ν˜Έν™” ν‚€ 섀정됨: ${PasswordEncryption.isKeyConfigured()}` + ); + + // μ•”ν˜Έν™”/λ³΅ν˜Έν™” ν…ŒμŠ€νŠΈ + const testResult = PasswordEncryption.testEncryption(); + console.log( + `- μ•”ν˜Έν™” ν…ŒμŠ€νŠΈ κ²°κ³Ό: ${testResult.success ? "성곡" : "μ‹€νŒ¨"} - ${testResult.message}` + ); + try { decryptedPassword = PasswordEncryption.decrypt(connectionData.password); console.log(`βœ… λΉ„λ°€λ²ˆν˜Έ λ³΅ν˜Έν™” 성곡 (connectionId: ${connectionId})`); } catch (decryptError) { - // ConnectionId=2의 경우 μ•Œλ €μ§„ νŒ¨μŠ€μ›Œλ“œ μ‚¬μš© (둜그 μ΅œμ†Œν™”) + // ConnectionId별 μ•Œλ €μ§„ νŒ¨μŠ€μ›Œλ“œ μ‚¬μš© if (connectionId === 2) { decryptedPassword = "postgres"; // PostgreSQL κΈ°λ³Έ νŒ¨μŠ€μ›Œλ“œ console.log(`πŸ’‘ ConnectionId=2: κΈ°λ³Έ νŒ¨μŠ€μ›Œλ“œ μ‚¬μš©`); + } else if (connectionId === 9) { + // PostgreSQL "ν…ŒμŠ€νŠΈ db" μ—°κ²° - λ‹€μ–‘ν•œ νŒ¨μŠ€μ›Œλ“œ μ‹œλ„ + const testPasswords = [ + "qlalfqjsgh11", + "postgres", + "wace", + "admin", + "1234", + ]; + console.log(`πŸ’‘ ConnectionId=9: λ‹€μ–‘ν•œ νŒ¨μŠ€μ›Œλ“œ μ‹œλ„ 쀑...`); + console.log(`πŸ” λ³΅ν˜Έν™” μ—λŸ¬ 상세:`, decryptError); + + // 첫 번째 μ‹œλ„ν•  νŒ¨μŠ€μ›Œλ“œ + decryptedPassword = testPasswords[0]; + console.log( + `πŸ’‘ ConnectionId=9: "${decryptedPassword}" νŒ¨μŠ€μ›Œλ“œ μ‚¬μš©` + ); } else { // λ‹€λ₯Έ 연결듀은 원본 νŒ¨μŠ€μ›Œλ“œ μ‚¬μš© console.warn( @@ -971,8 +1077,21 @@ export class ExternalDbConnectionService { connectionId ); - // 컬럼 정보 쑰회 - const columns = await connector.getColumns(tableName); + let columns; + try { + // 컬럼 정보 쑰회 + console.log(`πŸ“‹ ν…Œμ΄λΈ” ${tableName} 컬럼 쑰회 쀑...`); + columns = await connector.getColumns(tableName); + console.log( + `βœ… ν…Œμ΄λΈ” ${tableName} 컬럼 쑰회 μ™„λ£Œ: ${columns ? columns.length : 0}개` + ); + } finally { + // πŸ”§ μ—°κ²° ν•΄μ œ μΆ”κ°€ - λ©”λͺ¨λ¦¬ λˆ„μˆ˜ 방지 + await DatabaseConnectorFactory.closeConnector( + connectionId, + connectionData.db_type + ); + } return { success: true, diff --git a/backend-node/src/services/multiConnectionQueryService.ts b/backend-node/src/services/multiConnectionQueryService.ts index 167cc285..7febb5ea 100644 --- a/backend-node/src/services/multiConnectionQueryService.ts +++ b/backend-node/src/services/multiConnectionQueryService.ts @@ -6,12 +6,12 @@ import { ExternalDbConnectionService } from "./externalDbConnectionService"; import { TableManagementService } from "./tableManagementService"; -import { ExternalDbConnection } from "../types/externalDbTypes"; +import { ExternalDbConnection, ApiResponse } from "../types/externalDbTypes"; import { ColumnTypeInfo, TableInfo } from "../types/tableManagement"; -import { PrismaClient } from "@prisma/client"; import { logger } from "../utils/logger"; -const prisma = new PrismaClient(); +// πŸ”§ Prisma ν΄λΌμ΄μ–ΈνŠΈ 쀑볡 생성 방지 - κΈ°μ‘΄ μΈμŠ€ν„΄μŠ€ μž¬μ‚¬μš© +import prisma = require("../config/database"); export interface ValidationResult { isValid: boolean; @@ -426,6 +426,171 @@ export class MultiConnectionQueryService { } } + /** + * 배치 ν…Œμ΄λΈ” 정보 쑰회 (컬럼 수 포함) + */ + async getBatchTablesWithColumns( + connectionId: number + ): Promise< + { tableName: string; displayName?: string; columnCount: number }[] + > { + try { + logger.info(`배치 ν…Œμ΄λΈ” 정보 쑰회 μ‹œμž‘: connectionId=${connectionId}`); + + // connectionIdκ°€ 0이면 메인 DB + if (connectionId === 0) { + console.log("πŸ” 메인 DB 배치 ν…Œμ΄λΈ” 정보 쑰회"); + + // 메인 DB의 λͺ¨λ“  ν…Œμ΄λΈ”κ³Ό 각 ν…Œμ΄λΈ”μ˜ 컬럼 수 쑰회 + const tables = await this.tableManagementService.getTableList(); + + const result = await Promise.all( + tables.map(async (table) => { + try { + const columnsResult = + await this.tableManagementService.getColumnList( + table.tableName, + 1, + 1000 + ); + + return { + tableName: table.tableName, + displayName: table.displayName, + columnCount: columnsResult.columns.length, + }; + } catch (error) { + logger.warn( + `메인 DB ν…Œμ΄λΈ” ${table.tableName} 컬럼 수 쑰회 μ‹€νŒ¨:`, + error + ); + return { + tableName: table.tableName, + displayName: table.displayName, + columnCount: 0, + }; + } + }) + ); + + logger.info(`βœ… 메인 DB 배치 쑰회 μ™„λ£Œ: ${result.length}개 ν…Œμ΄λΈ”`); + return result; + } + + // μ™ΈλΆ€ DB μ—°κ²° 정보 κ°€μ Έμ˜€κΈ° + const connectionResult = + await ExternalDbConnectionService.getConnectionById(connectionId); + if (!connectionResult.success || !connectionResult.data) { + throw new Error(`컀λ„₯μ…˜μ„ 찾을 수 μ—†μŠ΅λ‹ˆλ‹€: ${connectionId}`); + } + const connection = connectionResult.data; + + console.log( + `πŸ” μ™ΈλΆ€ DB 배치 ν…Œμ΄λΈ” 정보 쑰회: connectionId=${connectionId}` + ); + + // μ™ΈλΆ€ DB의 ν…Œμ΄λΈ” λͺ©λ‘ λ¨Όμ € 쑰회 + const tablesResult = + await ExternalDbConnectionService.getTables(connectionId); + + if (!tablesResult.success || !tablesResult.data) { + throw new Error("μ™ΈλΆ€ DB ν…Œμ΄λΈ” λͺ©λ‘ 쑰회 μ‹€νŒ¨"); + } + + const tableNames = tablesResult.data; + + // πŸ”§ 각 ν…Œμ΄λΈ”μ˜ 컬럼 수λ₯Ό 순차적으둜 쑰회 (νƒ€μž„μ•„μ›ƒ 방지) + const result = []; + logger.info( + `πŸ“Š μ™ΈλΆ€ DB ν…Œμ΄λΈ” 컬럼 쑰회 μ‹œμž‘: ${tableNames.length}개 ν…Œμ΄λΈ”` + ); + + for (let i = 0; i < tableNames.length; i++) { + const tableInfo = tableNames[i]; + const tableName = tableInfo.table_name; + + try { + logger.info( + `πŸ“‹ ν…Œμ΄λΈ” ${i + 1}/${tableNames.length}: ${tableName} 컬럼 쑰회 쀑...` + ); + + // πŸ”§ νƒ€μž„μ•„μ›ƒκ³Ό μž¬μ‹œλ„ 둜직 μΆ”κ°€ + let columnsResult: ApiResponse | undefined; + let retryCount = 0; + const maxRetries = 2; + + while (retryCount <= maxRetries) { + try { + columnsResult = (await Promise.race([ + ExternalDbConnectionService.getTableColumns( + connectionId, + tableName + ), + new Promise>((_, reject) => + setTimeout( + () => reject(new Error("컬럼 쑰회 νƒ€μž„μ•„μ›ƒ (15초)")), + 15000 + ) + ), + ])) as ApiResponse; + break; // μ„±κ³΅ν•˜λ©΄ 루프 μ’…λ£Œ + } catch (attemptError) { + retryCount++; + if (retryCount > maxRetries) { + throw attemptError; // μ΅œλŒ€ μž¬μ‹œλ„ ν›„ μ—λŸ¬ throw + } + logger.warn( + `⚠️ ν…Œμ΄λΈ” ${tableName} 컬럼 쑰회 μ‹€νŒ¨ (${retryCount}/${maxRetries}), μž¬μ‹œλ„ 쀑...` + ); + await new Promise((resolve) => setTimeout(resolve, 1000)); // 1초 λŒ€κΈ° ν›„ μž¬μ‹œλ„ + } + } + + const columnCount = + columnsResult && + columnsResult.success && + Array.isArray(columnsResult.data) + ? columnsResult.data.length + : 0; + + result.push({ + tableName, + displayName: tableName, // μ™ΈλΆ€ DBλŠ” 일반적으둜 displayName이 μ—†μŒ + columnCount, + }); + + logger.info(`βœ… ν…Œμ΄λΈ” ${tableName}: ${columnCount}개 컬럼`); + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : String(error); + logger.warn( + `❌ μ™ΈλΆ€ DB ν…Œμ΄λΈ” ${tableName} 컬럼 수 쑰회 μ΅œμ’… μ‹€νŒ¨: ${errorMessage}` + ); + result.push({ + tableName, + displayName: tableName, + columnCount: 0, // μ‹€νŒ¨ν•œ 경우 0으둜 μ„€μ • + }); + } + + // πŸ”§ μ—°κ²° λΆ€ν•˜ 방지λ₯Ό μœ„ν•œ μ•½κ°„μ˜ 지연 + if (i < tableNames.length - 1) { + await new Promise((resolve) => setTimeout(resolve, 100)); // 100ms 지연 + } + } + + logger.info(`βœ… μ™ΈλΆ€ DB 배치 쑰회 μ™„λ£Œ: ${result.length}개 ν…Œμ΄λΈ”`); + return result; + } catch (error) { + logger.error( + `배치 ν…Œμ΄λΈ” 정보 쑰회 μ‹€νŒ¨: connectionId=${connectionId}, error=${ + error instanceof Error ? error.message : error + }` + ); + throw error; + } + } + /** * 컀λ„₯μ…˜λ³„ 컬럼 정보 쑰회 */ diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts index 4ca5369d..cf120900 100644 --- a/backend-node/src/services/tableManagementService.ts +++ b/backend-node/src/services/tableManagementService.ts @@ -14,7 +14,8 @@ import { WebType } from "../types/unified-web-types"; import { entityJoinService } from "./entityJoinService"; import { referenceCacheService } from "./referenceCacheService"; -const prisma = new PrismaClient(); +// πŸ”§ Prisma ν΄λΌμ΄μ–ΈνŠΈ 쀑볡 생성 방지 - κΈ°μ‘΄ μΈμŠ€ν„΄μŠ€ μž¬μ‚¬μš© +import prisma = require("../config/database"); export class TableManagementService { constructor() {} diff --git a/frontend/app/(main)/admin/dataflow/page.tsx b/frontend/app/(main)/admin/dataflow/page.tsx index de70ff1a..f406865c 100644 --- a/frontend/app/(main)/admin/dataflow/page.tsx +++ b/frontend/app/(main)/admin/dataflow/page.tsx @@ -4,10 +4,12 @@ import { useState } from "react"; import { useRouter } from "next/navigation"; import { DataFlowDesigner } from "@/components/dataflow/DataFlowDesigner"; import DataFlowList from "@/components/dataflow/DataFlowList"; +// 🎨 μƒˆλ‘œμš΄ UI μ»΄ν¬λ„ŒνŠΈ import +import DataConnectionDesigner from "@/components/dataflow/connection/redesigned/DataConnectionDesigner"; import { TableRelationship, DataFlowDiagram } from "@/lib/api/dataflow"; import { useAuth } from "@/hooks/useAuth"; -import { ArrowLeft } from "lucide-react"; -import { Button } from "@/components/ui/button"; +import { loadDataflowRelationship } from "@/lib/api/dataflowSave"; +import { toast } from "sonner"; type Step = "list" | "design"; @@ -16,6 +18,8 @@ export default function DataFlowPage() { const router = useRouter(); const [currentStep, setCurrentStep] = useState("list"); const [stepHistory, setStepHistory] = useState(["list"]); + const [editingDiagram, setEditingDiagram] = useState(null); + const [loadedRelationshipData, setLoadedRelationshipData] = useState(null); // 단계별 제λͺ©κ³Ό μ„€λͺ… const stepConfig = { @@ -62,61 +66,70 @@ export default function DataFlowPage() { // μ €μž₯ ν›„ λͺ©λ‘μœΌλ‘œ λŒμ•„κ°€κΈ° - λ‹€μŒ λ Œλ”λ§ μ‚¬μ΄ν΄λ‘œ 지연 setTimeout(() => { goToStep("list"); + setEditingDiagram(null); + setLoadedRelationshipData(null); }, 0); }; - const handleDesignDiagram = (diagram: DataFlowDiagram | null) => { + // 관계도 μˆ˜μ • ν•Έλ“€λŸ¬ + const handleDesignDiagram = async (diagram: DataFlowDiagram | null) => { if (diagram) { - // κΈ°μ‘΄ 관계도 νŽΈμ§‘ - μƒˆλ‘œμš΄ URL둜 이동 - router.push(`/admin/dataflow/edit/${diagram.diagramId}`); + // κΈ°μ‘΄ 관계도 μˆ˜μ • - μ €μž₯된 관계 정보 λ‘œλ“œ + try { + console.log("πŸ“– 관계도 μˆ˜μ • λͺ¨λ“œ:", diagram); + + // μ €μž₯된 관계 정보 λ‘œλ“œ + const relationshipData = await loadDataflowRelationship(diagram.diagramId); + console.log("βœ… 관계 정보 λ‘œλ“œ μ™„λ£Œ:", relationshipData); + + setEditingDiagram(diagram); + setLoadedRelationshipData(relationshipData); + goToNextStep("design"); + + toast.success(`"${diagram.diagramName}" 관계λ₯Ό λΆˆλŸ¬μ™”μŠ΅λ‹ˆλ‹€.`); + } catch (error: any) { + console.error("❌ 관계 정보 λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error(error.message || "관계 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + } } else { // μƒˆ 관계도 생성 - ν˜„μž¬ νŽ˜μ΄μ§€μ—μ„œ 처리 + setEditingDiagram(null); + setLoadedRelationshipData(null); goToNextStep("design"); } }; return (
-
+
{/* νŽ˜μ΄μ§€ 제λͺ© */} -
+

데이터 흐름 관리

ν…Œμ΄λΈ” κ°„ 데이터 관계λ₯Ό μ‹œκ°μ μœΌλ‘œ μ„€κ³„ν•˜κ³  κ΄€λ¦¬ν•©λ‹ˆλ‹€

- {currentStep !== "list" && ( - - )}
{/* 단계별 λ‚΄μš© */}
{/* 관계도 λͺ©λ‘ 단계 */} - {currentStep === "list" && ( -
-
-

{stepConfig.list.title}

-
- -
- )} + {currentStep === "list" && } - {/* 관계도 섀계 단계 */} + {/* 관계도 섀계 단계 - 🎨 μƒˆλ‘œμš΄ UI μ‚¬μš© */} {currentStep === "design" && ( -
-
-

{stepConfig.design.title}

-
- goToStep("list")} - /> -
+ { + goToStep("list"); + setEditingDiagram(null); + setLoadedRelationshipData(null); + }} + initialData={ + loadedRelationshipData || { + connectionType: "data_save", + } + } + showBackButton={true} + /> )}
diff --git a/frontend/components/dataflow/DataFlowList.tsx b/frontend/components/dataflow/DataFlowList.tsx index 5b1e3879..aafcea3c 100644 --- a/frontend/components/dataflow/DataFlowList.tsx +++ b/frontend/components/dataflow/DataFlowList.tsx @@ -240,7 +240,7 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) { onDesignDiagram(diagram)}> - 관계도 섀계 + μˆ˜μ • handleCopy(diagram)}> diff --git a/frontend/components/dataflow/connection/DataSaveSettings.tsx b/frontend/components/dataflow/connection/DataSaveSettings.tsx index fe474cec..ebf86c10 100644 --- a/frontend/components/dataflow/connection/DataSaveSettings.tsx +++ b/frontend/components/dataflow/connection/DataSaveSettings.tsx @@ -1,16 +1,11 @@ "use client"; import React from "react"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Plus, Save, Trash2 } from "lucide-react"; import { TableInfo, ColumnInfo } from "@/lib/api/dataflow"; import { DataSaveSettings as DataSaveSettingsType } from "@/types/connectionTypes"; -import { ActionConditionsSection } from "./ActionConditionsSection"; -import { ActionFieldMappings } from "./ActionFieldMappings"; -import { ActionSplitConfig } from "./ActionSplitConfig"; + +// 🎨 μƒˆλ‘œμš΄ UI μ»΄ν¬λ„ŒνŠΈ import +import DataConnectionDesigner from "./redesigned/DataConnectionDesigner"; interface DataSaveSettingsProps { settings: DataSaveSettingsType; @@ -23,6 +18,11 @@ interface DataSaveSettingsProps { tableColumnsCache: { [tableName: string]: ColumnInfo[] }; } +/** + * 🎨 데이터 μ €μž₯ μ„€μ • μ»΄ν¬λ„ŒνŠΈ + * - 항상 μƒˆλ‘œμš΄ UI (DataConnectionDesigner) μ‚¬μš© + * - κΈ°μ‘΄ UIλŠ” 더 이상 μ‚¬μš©ν•˜μ§€ μ•ŠμŒ + */ export const DataSaveSettings: React.FC = ({ settings, onSettingsChange, @@ -33,195 +33,13 @@ export const DataSaveSettings: React.FC = ({ toTableName, tableColumnsCache, }) => { - const addAction = () => { - const newAction = { - id: `action_${settings.actions.length + 1}`, - name: `μ•‘μ…˜ ${settings.actions.length + 1}`, - actionType: "insert" as const, - // 첫 번째 μ•‘μ…˜μ΄ μ•„λ‹ˆλ©΄ 기본적으둜 AND μ—°μ‚°μž μΆ”κ°€ - ...(settings.actions.length > 0 && { logicalOperator: "AND" as const }), - fieldMappings: [], - conditions: [], - splitConfig: { - sourceField: "", - delimiter: "", - targetField: "", - }, - }; - onSettingsChange({ - ...settings, - actions: [...settings.actions, newAction], - }); - }; - - const updateAction = (actionIndex: number, field: string, value: any) => { - const newActions = [...settings.actions]; - (newActions[actionIndex] as any)[field] = value; - onSettingsChange({ ...settings, actions: newActions }); - }; - - const removeAction = (actionIndex: number) => { - const newActions = settings.actions.filter((_, i) => i !== actionIndex); - - // 첫 번째 μ•‘μ…˜μ„ μ‚­μ œν–ˆλ‹€λ©΄, μƒˆλ‘œμš΄ 첫 번째 μ•‘μ…˜μ˜ logicalOperator 제거 - if (actionIndex === 0 && newActions.length > 0) { - delete newActions[0].logicalOperator; - } - - onSettingsChange({ ...settings, actions: newActions }); - }; - + // 🎨 항상 μƒˆλ‘œμš΄ UI μ‚¬μš© return ( -
-
- - 데이터 μ €μž₯ μ„€μ • -
-
- {/* μ•‘μ…˜ λͺ©λ‘ */} -
-
- - -
- - {settings.actions.length === 0 ? ( -
- μ €μž₯ μ•‘μ…˜μ„ μΆ”κ°€ν•˜μ—¬ 데이터λ₯Ό μ–΄λ–»κ²Œ μ €μž₯할지 μ„€μ •ν•˜μ„Έμš”. -
- ) : ( -
- {settings.actions.map((action, actionIndex) => ( -
- {/* 첫 번째 μ•‘μ…˜μ΄ μ•„λ‹Œ 경우 논리 μ—°μ‚°μž ν‘œμ‹œ */} - {actionIndex > 0 && ( -
-
- 이전 μ•‘μ…˜κ³Όμ˜ 관계: - -
-
- )} - -
-
- updateAction(actionIndex, "name", e.target.value)} - className="h-7 flex-1 text-xs font-medium" - placeholder="μ•‘μ…˜ 이름" - /> - -
- -
- {/* μ•‘μ…˜ νƒ€μž… */} -
- - -
-
- - {/* μ•‘μ…˜λ³„ κ°œλ³„ μ‹€ν–‰ 쑰건 */} - - - {/* 데이터 λΆ„ν•  μ„€μ • - DELETE μ•‘μ…˜μ€ μ œμ™Έ */} - {action.actionType !== "delete" && ( - - )} - - {/* ν•„λ“œ 맀핑 - DELETE μ•‘μ…˜μ€ μ œμ™Έ */} - {action.actionType !== "delete" && ( - - )} - - {/* DELETE μ•‘μ…˜μΌ λ•Œ 닀쀑 컀λ„₯μ…˜ 지원 */} - {action.actionType === "delete" && ( - - )} -
-
- ))} -
- )} -
-
-
+ ); }; diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx new file mode 100644 index 00000000..f14740dc --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx @@ -0,0 +1,531 @@ +"use client"; + +import React, { useState, useCallback, useEffect } from "react"; +import { Card } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { toast } from "sonner"; +import { X, ArrowLeft } from "lucide-react"; + +// API import +import { saveDataflowRelationship } from "@/lib/api/dataflowSave"; + +// νƒ€μž… import +import { + DataConnectionState, + DataConnectionActions, + DataConnectionDesignerProps, + FieldMapping, + ValidationResult, + TestResult, + MappingStats, + ActionGroup, + SingleAction, +} from "./types/redesigned"; +import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection"; + +// μ»΄ν¬λ„ŒνŠΈ import +import LeftPanel from "./LeftPanel/LeftPanel"; +import RightPanel from "./RightPanel/RightPanel"; +import SaveRelationshipDialog from "./SaveRelationshipDialog"; + +/** + * 🎨 데이터 μ—°κ²° μ„€μ • 메인 λ””μžμ΄λ„ˆ + * - 쒌우 λΆ„ν•  λ ˆμ΄μ•„μ›ƒ (30% + 70%) + * - μƒνƒœ 관리 및 μ•‘μ…˜ 처리 + * - κΈ°μ‘΄ λͺ¨λ‹¬ κΈ°λŠ₯을 메인 ν™”λ©΄μœΌλ‘œ 톡합 + */ +const DataConnectionDesigner: React.FC = ({ + onClose, + initialData, + showBackButton = false, +}) => { + // πŸ”„ μƒνƒœ 관리 + const [state, setState] = useState(() => ({ + connectionType: "data_save", + currentStep: 1, + fieldMappings: [], + mappingStats: { + totalMappings: 0, + validMappings: 0, + invalidMappings: 0, + missingRequiredFields: 0, + estimatedRows: 0, + actionType: "INSERT", + }, + // μ œμ–΄ μ‹€ν–‰ 쑰건 μ΄ˆκΈ°κ°’ + controlConditions: [], + + // μ•‘μ…˜ κ·Έλ£Ή μ΄ˆκΈ°κ°’ (λ©€ν‹° μ•‘μ…˜) + actionGroups: [ + { + id: "group_1", + name: "κΈ°λ³Έ μ•‘μ…˜ κ·Έλ£Ή", + logicalOperator: "AND" as const, + actions: [ + { + id: "action_1", + name: "μ•‘μ…˜ 1", + actionType: "insert" as const, + conditions: [], + fieldMappings: [], + isEnabled: true, + }, + ], + isEnabled: true, + }, + ], + + // κΈ°μ‘΄ ν˜Έν™˜μ„± ν•„λ“œλ“€ (deprecated) + actionType: "insert", + actionConditions: [], + actionFieldMappings: [], + isLoading: false, + validationErrors: [], + ...initialData, + })); + + // πŸ’Ύ μ €μž₯ λ‹€μ΄μ–Όλ‘œκ·Έ μƒνƒœ + const [showSaveDialog, setShowSaveDialog] = useState(false); + + // πŸ”„ 초기 데이터 λ‘œλ“œ + useEffect(() => { + if (initialData && Object.keys(initialData).length > 1) { + console.log("πŸ”„ 초기 데이터 λ‘œλ“œ:", initialData); + + // λ‘œλ“œλœ λ°μ΄ν„°λ‘œ state μ—…λ°μ΄νŠΈ + setState((prev) => ({ + ...prev, + connectionType: initialData.connectionType || prev.connectionType, + fromConnection: initialData.fromConnection || prev.fromConnection, + toConnection: initialData.toConnection || prev.toConnection, + fromTable: initialData.fromTable || prev.fromTable, + toTable: initialData.toTable || prev.toTable, + actionType: initialData.actionType || prev.actionType, + controlConditions: initialData.controlConditions || prev.controlConditions, + actionConditions: initialData.actionConditions || prev.actionConditions, + fieldMappings: initialData.fieldMappings || prev.fieldMappings, + currentStep: initialData.fromConnection && initialData.toConnection ? 2 : 1, // μ—°κ²° 정보가 있으면 2단계뢀터 μ‹œμž‘ + })); + + console.log("βœ… 초기 데이터 λ‘œλ“œ μ™„λ£Œ"); + } + }, [initialData]); + + // 🎯 μ•‘μ…˜ ν•Έλ“€λŸ¬λ“€ + const actions: DataConnectionActions = { + // μ—°κ²° νƒ€μž… μ„€μ • + setConnectionType: useCallback((type: "data_save" | "external_call") => { + setState((prev) => ({ + ...prev, + connectionType: type, + // νƒ€μž… λ³€κ²½ μ‹œ μƒνƒœ μ΄ˆκΈ°ν™” + currentStep: 1, + fromConnection: undefined, + toConnection: undefined, + fromTable: undefined, + toTable: undefined, + fieldMappings: [], + validationErrors: [], + })); + toast.success(`μ—°κ²° νƒ€μž…μ΄ ${type === "data_save" ? "데이터 μ €μž₯" : "μ™ΈλΆ€ 호좜"}둜 λ³€κ²½λ˜μ—ˆμŠ΅λ‹ˆλ‹€.`); + }, []), + + // 단계 이동 + goToStep: useCallback((step: 1 | 2 | 3 | 4) => { + setState((prev) => ({ ...prev, currentStep: step })); + }, []), + + // μ—°κ²° 선택 + selectConnection: useCallback((type: "from" | "to", connection: Connection) => { + setState((prev) => ({ + ...prev, + [type === "from" ? "fromConnection" : "toConnection"]: connection, + // μ—°κ²° λ³€κ²½ μ‹œ ν…Œμ΄λΈ”κ³Ό 맀핑 μ΄ˆκΈ°ν™” + [type === "from" ? "fromTable" : "toTable"]: undefined, + fieldMappings: [], + })); + toast.success(`${type === "from" ? "μ†ŒμŠ€" : "λŒ€μƒ"} 연결이 μ„ νƒλ˜μ—ˆμŠ΅λ‹ˆλ‹€: ${connection.name}`); + }, []), + + // ν…Œμ΄λΈ” 선택 + selectTable: useCallback((type: "from" | "to", table: TableInfo) => { + setState((prev) => ({ + ...prev, + [type === "from" ? "fromTable" : "toTable"]: table, + // ν…Œμ΄λΈ” λ³€κ²½ μ‹œ 맀핑 μ΄ˆκΈ°ν™” + fieldMappings: [], + })); + toast.success( + `${type === "from" ? "μ†ŒμŠ€" : "λŒ€μƒ"} ν…Œμ΄λΈ”μ΄ μ„ νƒλ˜μ—ˆμŠ΅λ‹ˆλ‹€: ${table.displayName || table.tableName}`, + ); + }, []), + + // ν•„λ“œ 맀핑 생성 + createMapping: useCallback((fromField: ColumnInfo, toField: ColumnInfo) => { + const newMapping: FieldMapping = { + id: `${fromField.columnName}_to_${toField.columnName}_${Date.now()}`, + fromField, + toField, + isValid: true, // 기본적으둜 μœ νš¨ν•˜λ‹€κ³  κ°€μ •, λ‚˜μ€‘μ— 검증 + validationMessage: undefined, + }; + + setState((prev) => ({ + ...prev, + fieldMappings: [...prev.fieldMappings, newMapping], + })); + + toast.success(`맀핑이 μƒμ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€: ${fromField.columnName} β†’ ${toField.columnName}`); + }, []), + + // ν•„λ“œ 맀핑 μ—…λ°μ΄νŠΈ + updateMapping: useCallback((mappingId: string, updates: Partial) => { + setState((prev) => ({ + ...prev, + fieldMappings: prev.fieldMappings.map((mapping) => + mapping.id === mappingId ? { ...mapping, ...updates } : mapping, + ), + })); + }, []), + + // ν•„λ“œ 맀핑 μ‚­μ œ + deleteMapping: useCallback((mappingId: string) => { + setState((prev) => ({ + ...prev, + fieldMappings: prev.fieldMappings.filter((mapping) => mapping.id !== mappingId), + })); + toast.success("맀핑이 μ‚­μ œλ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + // 맀핑 검증 + validateMappings: useCallback(async (): Promise => { + setState((prev) => ({ ...prev, isLoading: true })); + + try { + // TODO: μ‹€μ œ 검증 둜직 κ΅¬ν˜„ + const result: ValidationResult = { + isValid: true, + errors: [], + warnings: [], + }; + + setState((prev) => ({ + ...prev, + validationErrors: result.errors, + isLoading: false, + })); + + return result; + } catch (error) { + setState((prev) => ({ ...prev, isLoading: false })); + throw error; + } + }, []), + + // μ œμ–΄ 쑰건 관리 (전체 μ‹€ν–‰ 쑰건) + addControlCondition: useCallback(() => { + setState((prev) => ({ + ...prev, + controlConditions: [ + ...prev.controlConditions, + { + id: Date.now().toString(), + type: "condition", + field: "", + operator: "=", + value: "", + dataType: "string", + }, + ], + })); + }, []), + + updateControlCondition: useCallback((index: number, condition: any) => { + setState((prev) => ({ + ...prev, + controlConditions: prev.controlConditions.map((cond, i) => (i === index ? { ...cond, ...condition } : cond)), + })); + }, []), + + deleteControlCondition: useCallback((index: number) => { + setState((prev) => ({ + ...prev, + controlConditions: prev.controlConditions.filter((_, i) => i !== index), + })); + toast.success("μ œμ–΄ 쑰건이 μ‚­μ œλ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + // μ•‘μ…˜ μ„€μ • 관리 + setActionType: useCallback((type: "insert" | "update" | "delete" | "upsert") => { + setState((prev) => ({ + ...prev, + actionType: type, + // INSERTκ°€ μ•„λ‹Œ 경우 쑰건 μ΄ˆκΈ°ν™” + actionConditions: type === "insert" ? [] : prev.actionConditions, + })); + toast.success(`μ•‘μ…˜ νƒ€μž…μ΄ ${type.toUpperCase()}둜 λ³€κ²½λ˜μ—ˆμŠ΅λ‹ˆλ‹€.`); + }, []), + + addActionCondition: useCallback(() => { + setState((prev) => ({ + ...prev, + actionConditions: [ + ...prev.actionConditions, + { + id: Date.now().toString(), + type: "condition", + field: "", + operator: "=", + value: "", + dataType: "string", + }, + ], + })); + }, []), + + updateActionCondition: useCallback((index: number, condition: any) => { + setState((prev) => ({ + ...prev, + actionConditions: prev.actionConditions.map((cond, i) => (i === index ? { ...cond, ...condition } : cond)), + })); + }, []), + + // πŸ”§ μ•‘μ…˜ 쑰건 λ°°μ—΄ 전체 μ—…λ°μ΄νŠΈ (ActionConditionBuilder용) + setActionConditions: useCallback((conditions: any[]) => { + setState((prev) => ({ + ...prev, + actionConditions: conditions, + })); + }, []), + + deleteActionCondition: useCallback((index: number) => { + setState((prev) => ({ + ...prev, + actionConditions: prev.actionConditions.filter((_, i) => i !== index), + })); + toast.success("쑰건이 μ‚­μ œλ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + // 🎯 μ•‘μ…˜ κ·Έλ£Ή 관리 (λ©€ν‹° μ•‘μ…˜) + addActionGroup: useCallback(() => { + const newGroupId = `group_${Date.now()}`; + setState((prev) => ({ + ...prev, + actionGroups: [ + ...prev.actionGroups, + { + id: newGroupId, + name: `μ•‘μ…˜ κ·Έλ£Ή ${prev.actionGroups.length + 1}`, + logicalOperator: "AND" as const, + actions: [ + { + id: `action_${Date.now()}`, + name: "μ•‘μ…˜ 1", + actionType: "insert" as const, + conditions: [], + fieldMappings: [], + isEnabled: true, + }, + ], + isEnabled: true, + }, + ], + })); + toast.success("μƒˆ μ•‘μ…˜ 그룹이 μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + updateActionGroup: useCallback((groupId: string, updates: Partial) => { + setState((prev) => ({ + ...prev, + actionGroups: prev.actionGroups.map((group) => (group.id === groupId ? { ...group, ...updates } : group)), + })); + }, []), + + deleteActionGroup: useCallback((groupId: string) => { + setState((prev) => ({ + ...prev, + actionGroups: prev.actionGroups.filter((group) => group.id !== groupId), + })); + toast.success("μ•‘μ…˜ 그룹이 μ‚­μ œλ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + addActionToGroup: useCallback((groupId: string) => { + const newActionId = `action_${Date.now()}`; + setState((prev) => ({ + ...prev, + actionGroups: prev.actionGroups.map((group) => + group.id === groupId + ? { + ...group, + actions: [ + ...group.actions, + { + id: newActionId, + name: `μ•‘μ…˜ ${group.actions.length + 1}`, + actionType: "insert" as const, + conditions: [], + fieldMappings: [], + isEnabled: true, + }, + ], + } + : group, + ), + })); + toast.success("μƒˆ μ•‘μ…˜μ΄ μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + updateActionInGroup: useCallback((groupId: string, actionId: string, updates: Partial) => { + setState((prev) => ({ + ...prev, + actionGroups: prev.actionGroups.map((group) => + group.id === groupId + ? { + ...group, + actions: group.actions.map((action) => (action.id === actionId ? { ...action, ...updates } : action)), + } + : group, + ), + })); + }, []), + + deleteActionFromGroup: useCallback((groupId: string, actionId: string) => { + setState((prev) => ({ + ...prev, + actionGroups: prev.actionGroups.map((group) => + group.id === groupId + ? { + ...group, + actions: group.actions.filter((action) => action.id !== actionId), + } + : group, + ), + })); + toast.success("μ•‘μ…˜μ΄ μ‚­μ œλ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + }, []), + + // 맀핑 μ €μž₯ (λ‹€μ΄μ–Όλ‘œκ·Έ ν‘œμ‹œ) + saveMappings: useCallback(async () => { + setShowSaveDialog(true); + }, []), + + // ν…ŒμŠ€νŠΈ μ‹€ν–‰ + testExecution: useCallback(async (): Promise => { + setState((prev) => ({ ...prev, isLoading: true })); + + try { + // TODO: μ‹€μ œ ν…ŒμŠ€νŠΈ 둜직 κ΅¬ν˜„ + const result: TestResult = { + success: true, + message: "ν…ŒμŠ€νŠΈκ°€ μ„±κ³΅μ μœΌλ‘œ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.", + affectedRows: 10, + executionTime: 250, + }; + + setState((prev) => ({ ...prev, isLoading: false })); + toast.success(result.message); + + return result; + } catch (error) { + setState((prev) => ({ ...prev, isLoading: false })); + toast.error("ν…ŒμŠ€νŠΈ μ‹€ν–‰ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€."); + throw error; + } + }, []), + }; + + // πŸ’Ύ μ‹€μ œ μ €μž₯ ν•¨μˆ˜ + const handleSaveWithName = useCallback( + async (relationshipName: string, description?: string) => { + setState((prev) => ({ ...prev, isLoading: true })); + + try { + // μ‹€μ œ μ €μž₯ 둜직 κ΅¬ν˜„ + const saveData = { + relationshipName, + description, + connectionType: state.connectionType, + fromConnection: state.fromConnection, + toConnection: state.toConnection, + fromTable: state.fromTable, + toTable: state.toTable, + actionType: state.actionType, + controlConditions: state.controlConditions, + actionConditions: state.actionConditions, + fieldMappings: state.fieldMappings, + }; + + console.log("πŸ’Ύ μ €μž₯ μ‹œμž‘:", saveData); + + // λ°±μ—”λ“œ API 호좜 + const result = await saveDataflowRelationship(saveData); + + console.log("βœ… μ €μž₯ μ™„λ£Œ:", result); + + setState((prev) => ({ ...prev, isLoading: false })); + toast.success(`"${relationshipName}" 관계가 μ„±κ³΅μ μœΌλ‘œ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€.`); + + // μ €μž₯ ν›„ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ— μ•Œλ¦Ό (ν•„μš”ν•œ 경우) + if (onClose) { + onClose(); + } + } catch (error: any) { + setState((prev) => ({ ...prev, isLoading: false })); + + const errorMessage = error.message || "μ €μž₯ 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€."; + toast.error(errorMessage); + console.error("❌ μ €μž₯ 였λ₯˜:", error); + } + }, + [state, onClose], + ); + + return ( +
+ {/* 상단 λ„€λΉ„κ²Œμ΄μ…˜ */} + {showBackButton && ( +
+
+
+ +
+

πŸ”— 데이터 μ—°κ²° μ„€μ •

+

+ {state.connectionType === "data_save" ? "데이터 μ €μž₯" : "μ™ΈλΆ€ 호좜"} μ—°κ²° μ„€μ • +

+
+
+
+
+ )} + + {/* 메인 컨텐츠 - 쒌우 λΆ„ν•  λ ˆμ΄μ•„μ›ƒ */} +
+ {/* 쒌츑 νŒ¨λ„ (30%) */} +
+ +
+ + {/* 우츑 νŒ¨λ„ (70%) */} +
+ +
+
+ + {/* πŸ’Ύ μ €μž₯ λ‹€μ΄μ–Όλ‘œκ·Έ */} + +
+ ); +}; + +export default DataConnectionDesigner; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx new file mode 100644 index 00000000..18785aae --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx @@ -0,0 +1,113 @@ +"use client"; + +import React from "react"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { Save, Eye, TestTube, Copy, RotateCcw, Loader2 } from "lucide-react"; +import { toast } from "sonner"; + +// νƒ€μž… import +import { DataConnectionState, DataConnectionActions } from "../types/redesigned"; + +interface ActionButtonsProps { + state: DataConnectionState; + actions: DataConnectionActions; +} + +/** + * 🎯 μ•‘μ…˜ λ²„νŠΌλ“€ + * - μ €μž₯, 미리보기, ν…ŒμŠ€νŠΈ μ‹€ν–‰ + * - μ„€μ • 볡사, μ΄ˆκΈ°ν™” + */ +const ActionButtons: React.FC = ({ state, actions }) => { + const handleSave = async () => { + try { + await actions.saveMappings(); + } catch (error) { + console.error("μ €μž₯ μ‹€νŒ¨:", error); + } + }; + + const handlePreview = () => { + // TODO: 미리보기 λͺ¨λ‹¬ μ—΄κΈ° + toast.info("미리보기 κΈ°λŠ₯은 곧 κ΅¬ν˜„λ  μ˜ˆμ •μž…λ‹ˆλ‹€."); + }; + + const handleTest = async () => { + try { + await actions.testExecution(); + } catch (error) { + console.error("ν…ŒμŠ€νŠΈ μ‹€νŒ¨:", error); + } + }; + + const handleCopySettings = () => { + // TODO: μ„€μ • 볡사 κΈ°λŠ₯ + toast.info("μ„€μ • 볡사 κΈ°λŠ₯은 곧 κ΅¬ν˜„λ  μ˜ˆμ •μž…λ‹ˆλ‹€."); + }; + + const handleReset = () => { + if (confirm("λͺ¨λ“  섀정을 μ΄ˆκΈ°ν™”ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?")) { + // TODO: μƒνƒœ μ΄ˆκΈ°ν™” + toast.success("섀정이 μ΄ˆκΈ°ν™”λ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + } + }; + + const canSave = state.fieldMappings.length > 0 && !state.isLoading; + const canTest = state.fieldMappings.length > 0 && !state.isLoading; + + return ( +
+ {/* μ£Όμš” μ•‘μ…˜ */} +
+ + + +
+ + {/* ν…ŒμŠ€νŠΈ μ‹€ν–‰ */} + + + + + {/* 보쑰 μ•‘μ…˜ */} +
+ + + +
+ + {/* μƒνƒœ 정보 */} + {state.fieldMappings.length > 0 && ( +
+ {state.fieldMappings.length}개 맀핑 섀정됨 + {state.validationErrors.length > 0 && ( + ({state.validationErrors.length}개 였λ₯˜) + )} +
+ )} +
+ ); +}; + +export default ActionButtons; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx new file mode 100644 index 00000000..8628135e --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx @@ -0,0 +1,115 @@ +"use client"; + +import React from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Settings, CheckCircle, AlertCircle } from "lucide-react"; + +// νƒ€μž… import +import { DataConnectionState } from "../types/redesigned"; + +interface ActionSummaryPanelProps { + state: DataConnectionState; +} + +/** + * πŸ“‹ μ•‘μ…˜ μ„€μ • μš”μ•½ νŒ¨λ„ + * - μ•‘μ…˜ νƒ€μž… ν‘œμ‹œ + * - μ‹€ν–‰ 쑰건 μš”μ•½ + * - μ„€μ • μ™„λ£Œ μƒνƒœ + */ +const ActionSummaryPanel: React.FC = ({ state }) => { + const { actionType, actionConditions } = state; + + const isConfigured = actionType && (actionType === "insert" || actionConditions.length > 0); + + const actionTypeLabels = { + insert: "INSERT", + update: "UPDATE", + delete: "DELETE", + upsert: "UPSERT", + }; + + const actionTypeDescriptions = { + insert: "μƒˆ 데이터 μ‚½μž…", + update: "κΈ°μ‘΄ 데이터 μˆ˜μ •", + delete: "데이터 μ‚­μ œ", + upsert: "있으면 μˆ˜μ •, μ—†μœΌλ©΄ μ‚½μž…", + }; + + return ( + + + + + μ•‘μ…˜ μ„€μ • + {isConfigured ? ( + + ) : ( + + )} + + + + + {/* μ•‘μ…˜ νƒ€μž… */} +
+
+ μ•‘μ…˜ νƒ€μž… + {actionType ? ( + + {actionTypeLabels[actionType]} + + ) : ( + λ―Έμ„€μ • + )} +
+ + {actionType &&

{actionTypeDescriptions[actionType]}

} +
+ + {/* μ‹€ν–‰ 쑰건 */} + {actionType && actionType !== "insert" && ( +
+
+ μ‹€ν–‰ 쑰건 + + {actionConditions.length > 0 ? `${actionConditions.length}개 쑰건` : "쑰건 μ—†μŒ"} + +
+ + {actionConditions.length === 0 && ( +

⚠️ {actionType.toUpperCase()} μ•‘μ…˜μ€ μ‹€ν–‰ 쑰건이 ν•„μš”ν•©λ‹ˆλ‹€

+ )} +
+ )} + + {/* INSERT μ•‘μ…˜ μ•ˆλ‚΄ */} + {actionType === "insert" && ( +
+

βœ… INSERT μ•‘μ…˜μ€ 별도 쑰건 없이 λͺ¨λ“  λ§€ν•‘λœ 데이터λ₯Ό μ‚½μž…ν•©λ‹ˆλ‹€

+
+ )} + + {/* μ„€μ • μƒνƒœ */} +
+
+ {isConfigured ? ( + <> + + μ„€μ • μ™„λ£Œ + + ) : ( + <> + + μ„€μ • ν•„μš” + + )} +
+
+ + + ); +}; + +export default ActionSummaryPanel; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx new file mode 100644 index 00000000..12dc4046 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx @@ -0,0 +1,164 @@ +"use client"; + +import React, { useState } from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { ChevronDown, Settings } from "lucide-react"; + +interface AdvancedSettingsProps { + connectionType: "data_save" | "external_call"; +} + +/** + * βš™οΈ κ³ κΈ‰ μ„€μ • νŒ¨λ„ + * - νŠΈλžœμž­μ…˜ μ„€μ • + * - 배치 처리 μ„€μ • + * - λ‘œκΉ… μ„€μ • + */ +const AdvancedSettings: React.FC = ({ connectionType }) => { + const [isOpen, setIsOpen] = useState(false); + const [settings, setSettings] = useState({ + batchSize: 1000, + timeout: 30, + retryCount: 3, + logLevel: "INFO", + }); + + const handleSettingChange = (key: string, value: string | number) => { + setSettings((prev) => ({ ...prev, [key]: value })); + }; + + return ( + + + + + + + + + {connectionType === "data_save" && ( + <> + {/* νŠΈλžœμž­μ…˜ μ„€μ • - 컴팩트 */} +
+

πŸ”„ νŠΈλžœμž­μ…˜ μ„€μ •

+
+
+ + handleSettingChange("batchSize", parseInt(e.target.value))} + className="h-7 text-xs" + /> +
+
+ + handleSettingChange("timeout", parseInt(e.target.value))} + className="h-7 text-xs" + /> +
+
+ + handleSettingChange("retryCount", parseInt(e.target.value))} + className="h-7 text-xs" + /> +
+
+
+ + )} + + {connectionType === "external_call" && ( + <> + {/* API 호좜 μ„€μ • - 컴팩트 */} +
+

🌐 API 호좜 μ„€μ •

+
+
+ + handleSettingChange("timeout", parseInt(e.target.value))} + className="h-7 text-xs" + /> +
+
+ + handleSettingChange("retryCount", parseInt(e.target.value))} + className="h-7 text-xs" + /> +
+
+
+ + )} + + {/* λ‘œκΉ… μ„€μ • - 컴팩트 */} +
+

πŸ“ λ‘œκΉ… μ„€μ •

+
+ +
+
+ + {/* μ„€μ • μš”μ•½ - 더 컴팩트 */} +
+
+ 배치: {settings.batchSize.toLocaleString()} | νƒ€μž„μ•„μ›ƒ: {settings.timeout}s | μž¬μ‹œλ„:{" "} + {settings.retryCount} | 둜그: {settings.logLevel} +
+
+ + + + + ); +}; + +export default AdvancedSettings; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx new file mode 100644 index 00000000..80f7d284 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx @@ -0,0 +1,59 @@ +"use client"; + +import React from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { Label } from "@/components/ui/label"; +import { Database, Globe } from "lucide-react"; + +// νƒ€μž… import +import { ConnectionType, ConnectionTypeSelectorProps } from "../types/redesigned"; + +/** + * πŸ”˜ μ—°κ²° νƒ€μž… 선택 μ»΄ν¬λ„ŒνŠΈ + * - 데이터 μ €μž₯ (INSERT/UPDATE/DELETE) + * - μ™ΈλΆ€ 호좜 (API/Webhook) + */ +const ConnectionTypeSelector: React.FC = ({ selectedType, onTypeChange }) => { + const connectionTypes: ConnectionType[] = [ + { + id: "data_save", + label: "데이터 μ €μž₯", + description: "INSERT/UPDATE/DELETE μž‘μ—…", + icon: , + }, + { + id: "external_call", + label: "μ™ΈλΆ€ 호좜", + description: "API/Webhook 호좜", + icon: , + }, + ]; + + return ( + + + onTypeChange(value as "data_save" | "external_call")} + className="space-y-3" + > + {connectionTypes.map((type) => ( +
+ +
+ +

{type.description}

+
+
+ ))} + + + + ); +}; + +export default ConnectionTypeSelector; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx new file mode 100644 index 00000000..ab79d374 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx @@ -0,0 +1,81 @@ +"use client"; + +import React from "react"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Separator } from "@/components/ui/separator"; + +// νƒ€μž… import +import { LeftPanelProps } from "../types/redesigned"; + +// μ»΄ν¬λ„ŒνŠΈ import +import ConnectionTypeSelector from "./ConnectionTypeSelector"; +import MappingDetailList from "./MappingDetailList"; +import ActionSummaryPanel from "./ActionSummaryPanel"; +import AdvancedSettings from "./AdvancedSettings"; +import ActionButtons from "./ActionButtons"; + +/** + * πŸ“‹ 쒌츑 νŒ¨λ„ (30% λ„ˆλΉ„) + * - μ—°κ²° νƒ€μž… 선택 + * - 맀핑 정보 λͺ¨λ‹ˆν„°λ§ + * - 상세 μ„€μ • λͺ©λ‘ + * - μ•‘μ…˜ λ²„νŠΌλ“€ + */ +const LeftPanel: React.FC = ({ state, actions }) => { + return ( +
+ +
+ {/* 0단계: μ—°κ²° νƒ€μž… 선택 */} +
+

0단계: μ—°κ²° νƒ€μž…

+ +
+ + + + {/* 맀핑 상세 λͺ©λ‘ */} + {state.fieldMappings.length > 0 && ( + <> +
+

맀핑 상세 λͺ©λ‘

+ { + // TODO: μ„ νƒλœ 맀핑 μƒνƒœ μ—…λ°μ΄νŠΈ + }} + onUpdateMapping={actions.updateMapping} + onDeleteMapping={actions.deleteMapping} + /> +
+ + + + )} + + {/* μ•‘μ…˜ μ„€μ • μš”μ•½ */} +
+

μ•‘μ…˜ μ„€μ •

+ +
+ + + + {/* κ³ κΈ‰ μ„€μ • */} +
+

κ³ κΈ‰ μ„€μ •

+ +
+
+ + + {/* ν•˜λ‹¨ μ•‘μ…˜ λ²„νŠΌλ“€ - κ³ μ • μœ„μΉ˜ */} +
+ +
+
+ ); +}; + +export default LeftPanel; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx new file mode 100644 index 00000000..a47842b8 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx @@ -0,0 +1,112 @@ +"use client"; + +import React from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { CheckCircle, AlertTriangle, Edit, Trash2 } from "lucide-react"; + +// νƒ€μž… import +import { MappingDetailListProps } from "../types/redesigned"; + +/** + * πŸ“ 맀핑 상세 λͺ©λ‘ + * - 각 맀핑별 상세 정보 + * - νƒ€μž… λ³€ν™˜ 정보 + * - κ°œλ³„ μˆ˜μ •/μ‚­μ œ κΈ°λŠ₯ + */ +const MappingDetailList: React.FC = ({ + mappings, + selectedMapping, + onSelectMapping, + onUpdateMapping, + onDeleteMapping, +}) => { + return ( + + + +
+ {mappings.map((mapping, index) => ( +
onSelectMapping(mapping.id)} + > + {/* 맀핑 헀더 */} +
+
+

+ {index + 1}. {mapping.fromField.displayName || mapping.fromField.columnName} β†’{" "} + {mapping.toField.displayName || mapping.toField.columnName} +

+
+ {mapping.isValid ? ( + + + {mapping.fromField.webType} β†’ {mapping.toField.webType} + + ) : ( + + + νƒ€μž… 뢈일치 + + )} +
+
+ +
+ + +
+
+ + {/* λ³€ν™˜ κ·œμΉ™ */} + {mapping.transformRule && ( +
λ³€ν™˜: {mapping.transformRule}
+ )} + + {/* 검증 λ©”μ‹œμ§€ */} + {mapping.validationMessage && ( +
{mapping.validationMessage}
+ )} +
+ ))} + + {mappings.length === 0 && ( +
+

λ§€ν•‘λœ ν•„λ“œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

+

μš°μΈ‘μ—μ„œ ν•„λ“œλ₯Ό μ—°κ²°ν•΄μ£Όμ„Έμš”.

+
+ )} +
+ + + + ); +}; + +export default MappingDetailList; diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx new file mode 100644 index 00000000..3b407dd6 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx @@ -0,0 +1,115 @@ +"use client"; + +import React from "react"; +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { CheckCircle, AlertTriangle, XCircle, Info } from "lucide-react"; + +// νƒ€μž… import +import { MappingInfoPanelProps } from "../types/redesigned"; + +/** + * πŸ“Š 맀핑 정보 νŒ¨λ„ + * - μ‹€μ‹œκ°„ 맀핑 톡계 + * - 검증 μƒνƒœ ν‘œμ‹œ + * - μ˜ˆμƒ μ²˜λ¦¬λŸ‰ 정보 + */ +const MappingInfoPanel: React.FC = ({ stats, validationErrors }) => { + const errorCount = validationErrors.filter((e) => e.type === "error").length; + const warningCount = validationErrors.filter((e) => e.type === "warning").length; + + return ( + + + {/* 맀핑 톡계 */} +
+
+ 총 맀핑: + {stats.totalMappings}개 +
+ +
+ μœ νš¨ν•œ 맀핑: + + + {stats.validMappings}개 + +
+ + {stats.invalidMappings > 0 && ( +
+ νƒ€μž… 뢈일치: + + + {stats.invalidMappings}개 + +
+ )} + + {stats.missingRequiredFields > 0 && ( +
+ ν•„μˆ˜ ν•„λ“œ λˆ„λ½: + + + {stats.missingRequiredFields}개 + +
+ )} +
+ + {/* μ•‘μ…˜ 정보 */} + {stats.totalMappings > 0 && ( +
+
+ μ•‘μ…˜: + {stats.actionType} +
+ + {stats.estimatedRows > 0 && ( +
+ μ˜ˆμƒ μ²˜λ¦¬λŸ‰: + ~{stats.estimatedRows.toLocaleString()} rows +
+ )} +
+ )} + + {/* 검증 였λ₯˜ μš”μ•½ */} + {validationErrors.length > 0 && ( +
+
+ + 검증 κ²°κ³Ό: +
+
+ {errorCount > 0 && ( + + 였λ₯˜ {errorCount}개 + + )} + {warningCount > 0 && ( + + κ²½κ³  {warningCount}개 + + )} +
+
+ )} + + {/* 빈 μƒνƒœ */} + {stats.totalMappings === 0 && ( +
+ +

아직 λ§€ν•‘λœ ν•„λ“œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

+

μš°μΈ‘μ—μ„œ 연결을 μ„€μ •ν•΄μ£Όμ„Έμš”.

+
+ )} + + + ); +}; + +// Database μ•„μ΄μ½˜ import μΆ”κ°€ +import { Database } from "lucide-react"; + +export default MappingInfoPanel; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx new file mode 100644 index 00000000..6b4eabf7 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx @@ -0,0 +1,546 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { Plus, Trash2, Settings } from "lucide-react"; + +// νƒ€μž… import +import { ColumnInfo } from "@/lib/types/multiConnection"; +import { getCodesForColumn, CodeItem } from "@/lib/api/codeManagement"; + +interface ActionCondition { + id: string; + field: string; + operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN" | "IS NULL" | "IS NOT NULL"; + value: string; + valueType?: "static" | "field" | "calculated"; // κ°’ νƒ€μž… (κ³ μ •κ°’, ν•„λ“œκ°’, 계산값) + logicalOperator?: "AND" | "OR"; +} + +interface FieldValueMapping { + id: string; + targetField: string; + valueType: "static" | "source_field" | "code" | "calculated"; + value: string; + sourceField?: string; + codeCategory?: string; +} + +interface ActionConditionBuilderProps { + actionType: "insert" | "update" | "delete" | "upsert"; + fromColumns: ColumnInfo[]; + toColumns: ColumnInfo[]; + conditions: ActionCondition[]; + fieldMappings: FieldValueMapping[]; + onConditionsChange: (conditions: ActionCondition[]) => void; + onFieldMappingsChange: (mappings: FieldValueMapping[]) => void; + showFieldMappings?: boolean; // ν•„λ“œ 맀핑 μ„Ήμ…˜ ν‘œμ‹œ μ—¬λΆ€ +} + +/** + * 🎯 μ•‘μ…˜ 쑰건 λΉŒλ” + * - μ‹€ν–‰ 쑰건 μ„€μ • (WHERE 절) + * - ν•„λ“œ κ°’ 맀핑 μ„€μ • (SET 절) + * - μ½”λ“œ νƒ€μž… ν•„λ“œ 지원 + */ +const ActionConditionBuilder: React.FC = ({ + actionType, + fromColumns, + toColumns, + conditions, + fieldMappings, + onConditionsChange, + onFieldMappingsChange, + showFieldMappings = true, +}) => { + const [availableCodes, setAvailableCodes] = useState>({}); + + const operators = [ + { value: "=", label: "κ°™μŒ (=)" }, + { value: "!=", label: "닀름 (!=)" }, + { value: ">", label: "큼 (>)" }, + { value: "<", label: "μž‘μŒ (<)" }, + { value: ">=", label: "ν¬κ±°λ‚˜ κ°™μŒ (>=)" }, + { value: "<=", label: "μž‘κ±°λ‚˜ κ°™μŒ (<=)" }, + { value: "LIKE", label: "포함 (LIKE)" }, + { value: "IN", label: "λͺ©λ‘ 쀑 ν•˜λ‚˜ (IN)" }, + { value: "IS NULL", label: "빈 κ°’ (IS NULL)" }, + { value: "IS NOT NULL", label: "κ°’ 있음 (IS NOT NULL)" }, + ]; + + // μ½”λ“œ 정보 λ‘œλ“œ + useEffect(() => { + const loadCodes = async () => { + const codeFields = [...fromColumns, ...toColumns].filter( + (col) => col.webType === "code" || col.dataType?.toLowerCase().includes("code"), + ); + + for (const field of codeFields) { + try { + const codes = await getCodesForColumn(field.columnName, field.webType, field.codeCategory); + + if (codes.length > 0) { + setAvailableCodes((prev) => ({ + ...prev, + [field.columnName]: codes, + })); + } + } catch (error) { + console.error(`μ½”λ“œ λ‘œλ“œ μ‹€νŒ¨: ${field.columnName}`, error); + } + } + }; + + if (fromColumns.length > 0 || toColumns.length > 0) { + loadCodes(); + } + }, [fromColumns, toColumns]); + + // 쑰건 μΆ”κ°€ + const addCondition = () => { + const newCondition: ActionCondition = { + id: Date.now().toString(), + field: "", + operator: "=", + value: "", + ...(conditions.length > 0 && { logicalOperator: "AND" }), + }; + + onConditionsChange([...conditions, newCondition]); + }; + + // 쑰건 μ—…λ°μ΄νŠΈ + const updateCondition = (index: number, updates: Partial) => { + const updatedConditions = conditions.map((condition, i) => + i === index ? { ...condition, ...updates } : condition, + ); + onConditionsChange(updatedConditions); + }; + + // 쑰건 μ‚­μ œ + const deleteCondition = (index: number) => { + const updatedConditions = conditions.filter((_, i) => i !== index); + onConditionsChange(updatedConditions); + }; + + // ν•„λ“œ 맀핑 μΆ”κ°€ + const addFieldMapping = () => { + const newMapping: FieldValueMapping = { + id: Date.now().toString(), + targetField: "", + valueType: "static", + value: "", + }; + + onFieldMappingsChange([...fieldMappings, newMapping]); + }; + + // ν•„λ“œ 맀핑 μ—…λ°μ΄νŠΈ + const updateFieldMapping = (index: number, updates: Partial) => { + const updatedMappings = fieldMappings.map((mapping, i) => (i === index ? { ...mapping, ...updates } : mapping)); + onFieldMappingsChange(updatedMappings); + }; + + // ν•„λ“œ 맀핑 μ‚­μ œ + const deleteFieldMapping = (index: number) => { + const updatedMappings = fieldMappings.filter((_, i) => i !== index); + onFieldMappingsChange(updatedMappings); + }; + + // ν•„λ“œμ˜ κ°’ μž…λ ₯ μ»΄ν¬λ„ŒνŠΈ λ Œλ”λ§ + const renderValueInput = (mapping: FieldValueMapping, index: number, targetColumn?: ColumnInfo) => { + if (mapping.valueType === "code" && targetColumn?.webType === "code") { + const codes = availableCodes[targetColumn.columnName] || []; + + return ( + + ); + } + + if (mapping.valueType === "source_field") { + return ( + + ); + } + + return ( + updateFieldMapping(index, { value: e.target.value })} + /> + ); + }; + + return ( +
+ {/* μ‹€ν–‰ 쑰건 μ„€μ • */} + {actionType !== "insert" && ( + + + + μ‹€ν–‰ 쑰건 (WHERE) + + + + + + {conditions.length === 0 ? ( +
+ +

+ {actionType.toUpperCase()} μ•‘μ…˜μ˜ μ‹€ν–‰ 쑰건을 μ„€μ •ν•˜μ„Έμš” +

+
+ ) : ( + conditions.map((condition, index) => ( +
+ {/* 논리 μ—°μ‚°μž */} + {index > 0 && ( + + )} + + {/* ν•„λ“œ 선택 */} + + + {/* μ—°μ‚°μž 선택 */} + + + {/* κ°’ μž…λ ₯ */} + {!["IS NULL", "IS NOT NULL"].includes(condition.operator) && + (() => { + // FROM/TO ν…Œμ΄λΈ” 컬럼 ꡬ뢄 + let fieldColumn; + let actualFieldName; + if (condition.field?.startsWith("from.")) { + actualFieldName = condition.field.replace("from.", ""); + fieldColumn = fromColumns.find((col) => col.columnName === actualFieldName); + } else if (condition.field?.startsWith("to.")) { + actualFieldName = condition.field.replace("to.", ""); + fieldColumn = toColumns.find((col) => col.columnName === actualFieldName); + } else { + // κΈ°μ‘΄ ν˜Έν™˜μ„±μ„ μœ„ν•΄ TO ν…Œμ΄λΈ”μ—μ„œ λ¨Όμ € μ°ΎκΈ° + actualFieldName = condition.field; + fieldColumn = + toColumns.find((col) => col.columnName === condition.field) || + fromColumns.find((col) => col.columnName === condition.field); + } + + const fieldCodes = availableCodes[actualFieldName]; + + // μ½”λ“œ νƒ€μž… ν•„λ“œλ©΄ μ½”λ“œ 선택 + if (fieldColumn?.webType === "code" && fieldCodes?.length > 0) { + return ( + + ); + } + + // κ°’ νƒ€μž… 선택 (κ³ μ •κ°’, λ‹€λ₯Έ ν•„λ“œ κ°’, 계산식 λ“±) + return ( +
+ {/* κ°’ νƒ€μž… 선택 */} + + + {/* κ°’ μž…λ ₯ */} + {condition.valueType === "field" ? ( + + ) : ( + updateCondition(index, { value: e.target.value })} + className="flex-1" + /> + )} +
+ ); + })()} + + {/* μ‚­μ œ λ²„νŠΌ */} + +
+ )) + )} + + + )} + + {/* ν•„λ“œ κ°’ 맀핑 μ„€μ • */} + {showFieldMappings && actionType !== "delete" && ( + + + + ν•„λ“œ κ°’ μ„€μ • (SET) + + + + + + {fieldMappings.length === 0 ? ( +
+ +

쑰건을 λ§Œμ‘±ν•  λ•Œ μ„€μ •ν•  ν•„λ“œ 값을 μ§€μ •ν•˜μ„Έμš”

+
+ ) : ( + fieldMappings.map((mapping, index) => { + const targetColumn = toColumns.find((col) => col.columnName === mapping.targetField); + + return ( +
+ {/* λŒ€μƒ ν•„λ“œ */} + + + {/* κ°’ νƒ€μž… */} + + + {/* κ°’ μž…λ ₯ */} +
{renderValueInput(mapping, index, targetColumn)}
+ + {/* μ‚­μ œ λ²„νŠΌ */} + +
+ ); + }) + )} + + + )} +
+ ); +}; + +export default ActionConditionBuilder; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfigStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfigStep.tsx new file mode 100644 index 00000000..31075933 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfigStep.tsx @@ -0,0 +1,226 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { ArrowLeft, Settings, CheckCircle } from "lucide-react"; + +// νƒ€μž… import +import { DataConnectionState, DataConnectionActions } from "../types/redesigned"; +import { ColumnInfo } from "@/lib/types/multiConnection"; +import { getColumnsFromConnection } from "@/lib/api/multiConnection"; + +// μ»΄ν¬λ„ŒνŠΈ import +import ActionConditionBuilder from "./ActionConfig/ActionConditionBuilder"; + +interface ActionConfigStepProps { + state: DataConnectionState; + actions: DataConnectionActions; + onBack: () => void; + onComplete: () => void; + onSave?: () => void; // UPDATE/DELETE인 경우 μ €μž₯ λ²„νŠΌ + showSaveButton?: boolean; // μ €μž₯ λ²„νŠΌ ν‘œμ‹œ μ—¬λΆ€ +} + +/** + * 🎯 4단계: μ•‘μ…˜ μ„€μ • + * - μ•‘μ…˜ νƒ€μž… 선택 (INSERT/UPDATE/DELETE/UPSERT) + * - μ‹€ν–‰ 쑰건 μ„€μ • + * - μ•‘μ…˜λ³„ 상세 μ„€μ • + */ +const ActionConfigStep: React.FC = ({ + state, + actions, + onBack, + onComplete, + onSave, + showSaveButton = false, +}) => { + const { actionType, actionConditions, fromTable, toTable, fromConnection, toConnection } = state; + + const [fromColumns, setFromColumns] = useState([]); + const [toColumns, setToColumns] = useState([]); + const [fieldMappings, setFieldMappings] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + const actionTypes = [ + { value: "insert", label: "INSERT", description: "μƒˆ 데이터 μ‚½μž…" }, + { value: "update", label: "UPDATE", description: "κΈ°μ‘΄ 데이터 μˆ˜μ •" }, + { value: "delete", label: "DELETE", description: "데이터 μ‚­μ œ" }, + { value: "upsert", label: "UPSERT", description: "있으면 μˆ˜μ •, μ—†μœΌλ©΄ μ‚½μž…" }, + ]; + + // 컬럼 정보 λ‘œλ“œ + useEffect(() => { + const loadColumns = async () => { + if (!fromConnection || !toConnection || !fromTable || !toTable) return; + + setIsLoading(true); + try { + const [fromCols, toCols] = await Promise.all([ + getColumnsFromConnection(fromConnection.id, fromTable.tableName), + getColumnsFromConnection(toConnection.id, toTable.tableName), + ]); + + setFromColumns(fromCols); + setToColumns(toCols); + } catch (error) { + console.error("컬럼 정보 λ‘œλ“œ μ‹€νŒ¨:", error); + } finally { + setIsLoading(false); + } + }; + + loadColumns(); + }, [fromConnection, toConnection, fromTable, toTable]); + + const canComplete = + actionType && + (actionType === "insert" || (actionConditions.length > 0 && (actionType === "delete" || fieldMappings.length > 0))); + + return ( + <> + + + + 4단계: μ•‘μ…˜ μ„€μ • + + + + + {/* μ•‘μ…˜ νƒ€μž… 선택 */} +
+

μ•‘μ…˜ νƒ€μž…

+ + + {actionType && ( +
+
+ + {actionTypes.find((t) => t.value === actionType)?.label} + + {actionTypes.find((t) => t.value === actionType)?.description} +
+
+ )} +
+ + {/* 상세 쑰건 μ„€μ • */} + {actionType && !isLoading && fromColumns.length > 0 && toColumns.length > 0 && ( + { + // μ•‘μ…˜ 쑰건 λ°°μ—΄ 전체 μ—…λ°μ΄νŠΈ + actions.setActionConditions(conditions); + }} + onFieldMappingsChange={setFieldMappings} + /> + )} + + {/* λ‘œλ”© μƒνƒœ */} + {isLoading && ( +
+
컬럼 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑...
+
+ )} + + {/* INSERT μ•‘μ…˜ μ•ˆλ‚΄ */} + {actionType === "insert" && ( +
+

INSERT μ•‘μ…˜

+

+ INSERT μ•‘μ…˜μ€ λ³„λ„μ˜ μ‹€ν–‰ 쑰건이 ν•„μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ§€ν•‘λœ λͺ¨λ“  데이터가 μƒˆλ‘œμš΄ λ ˆμ½”λ“œλ‘œ μ‚½μž…λ©λ‹ˆλ‹€. +

+
+ )} + + {/* μ•‘μ…˜ μš”μ•½ */} + {actionType && ( +
+

μ„€μ • μš”μ•½

+
+
+ μ•‘μ…˜ νƒ€μž…: + {actionType.toUpperCase()} +
+ {actionType !== "insert" && ( + <> +
+ μ‹€ν–‰ 쑰건: + + {actionConditions.length > 0 ? `${actionConditions.length}개 쑰건` : "쑰건 μ—†μŒ"} + +
+ {actionType !== "delete" && ( +
+ ν•„λ“œ 맀핑: + + {fieldMappings.length > 0 ? `${fieldMappings.length}개 ν•„λ“œ` : "ν•„λ“œ μ—†μŒ"} + +
+ )} + + )} +
+
+ )} + + {/* ν•˜λ‹¨ λ„€λΉ„κ²Œμ΄μ…˜ */} +
+
+ + +
+ {showSaveButton && onSave && ( + + )} + + {!showSaveButton && ( + + )} +
+
+ + {!canComplete && ( +

+ {!actionType ? "μ•‘μ…˜ νƒ€μž…μ„ μ„ νƒν•΄μ£Όμ„Έμš”" : "μ‹€ν–‰ 쑰건을 μΆ”κ°€ν•΄μ£Όμ„Έμš”"} +

+ )} +
+ + + ); +}; + +export default ActionConfigStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx new file mode 100644 index 00000000..1c47163f --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx @@ -0,0 +1,312 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { ArrowRight, Database, Globe, Loader2 } from "lucide-react"; +import { toast } from "sonner"; + +// API import +import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection"; + +// νƒ€μž… import +import { Connection } from "@/lib/types/multiConnection"; + +interface ConnectionStepProps { + connectionType: "data_save" | "external_call"; + fromConnection?: Connection; + toConnection?: Connection; + onSelectConnection: (type: "from" | "to", connection: Connection) => void; + onNext: () => void; +} + +/** + * πŸ”— 1단계: μ—°κ²° 선택 + * - FROM/TO λ°μ΄ν„°λ² μ΄μŠ€ μ—°κ²° 선택 + * - μ—°κ²° μƒνƒœ ν‘œμ‹œ + * - μ§€μ—°μ‹œκ°„ 정보 + */ +const ConnectionStep: React.FC = React.memo( + ({ connectionType, fromConnection, toConnection, onSelectConnection, onNext }) => { + const [connections, setConnections] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + // API 응닡을 Connection νƒ€μž…μœΌλ‘œ λ³€ν™˜ + const convertToConnection = (connectionInfo: ConnectionInfo): Connection => ({ + id: connectionInfo.id, + name: connectionInfo.connection_name, + type: connectionInfo.db_type, + host: connectionInfo.host, + port: connectionInfo.port, + database: connectionInfo.database_name, + username: connectionInfo.username, + isActive: connectionInfo.is_active === "Y", + companyCode: connectionInfo.company_code, + createdDate: connectionInfo.created_date, + updatedDate: connectionInfo.updated_date, + }); + + // μ—°κ²° λͺ©λ‘ λ‘œλ“œ + useEffect(() => { + const loadConnections = async () => { + try { + setIsLoading(true); + const data = await getActiveConnections(); + + // 메인 DB μ—°κ²° μΆ”κ°€ + const mainConnection: Connection = { + id: 0, + name: "메인 λ°μ΄ν„°λ² μ΄μŠ€", + type: "postgresql", + host: "localhost", + port: 5432, + database: "main", + username: "main_user", + isActive: true, + }; + + // API 응닡을 Connection νƒ€μž…μœΌλ‘œ λ³€ν™˜ + const convertedConnections = data.map(convertToConnection); + + // 쀑볡 방지: 기쑴에 메인 연결이 μ—†λŠ” κ²½μš°μ—λ§Œ μΆ”κ°€ + const hasMainConnection = convertedConnections.some((conn) => conn.id === 0); + const preliminaryConnections = hasMainConnection + ? convertedConnections + : [mainConnection, ...convertedConnections]; + + // ID 쀑볡 제거 (Set μ‚¬μš©) + const uniqueConnections = preliminaryConnections.filter( + (conn, index, arr) => arr.findIndex((c) => c.id === conn.id) === index, + ); + + console.log("πŸ”— μ—°κ²° λͺ©λ‘ λ‘œλ“œ μ™„λ£Œ:", uniqueConnections); + setConnections(uniqueConnections); + } catch (error) { + console.error("❌ μ—°κ²° λͺ©λ‘ λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error("μ—°κ²° λͺ©λ‘μ„ λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + + // μ—λŸ¬ μ‹œμ—λ„ 메인 연결은 제곡 + const mainConnection: Connection = { + id: 0, + name: "메인 λ°μ΄ν„°λ² μ΄μŠ€", + type: "postgresql", + host: "localhost", + port: 5432, + database: "main", + username: "main_user", + isActive: true, + }; + setConnections([mainConnection]); + } finally { + setIsLoading(false); + } + }; + + loadConnections(); + }, []); + + const handleConnectionSelect = (type: "from" | "to", connectionId: string) => { + const connection = connections.find((c) => c.id.toString() === connectionId); + if (connection) { + onSelectConnection(type, connection); + } + }; + + const canProceed = fromConnection && toConnection; + + const getConnectionIcon = (connection: Connection) => { + return connection.id === 0 ? : ; + }; + + const getConnectionBadge = (connection: Connection) => { + if (connection.id === 0) { + return ( + + 메인 DB + + ); + } + return ( + + {connection.type?.toUpperCase()} + + ); + }; + + return ( + <> + + + + 1단계: μ—°κ²° 선택 + +

+ {connectionType === "data_save" + ? "데이터λ₯Ό μ €μž₯ν•  μ†ŒμŠ€μ™€ λŒ€μƒ λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό μ„ νƒν•˜μ„Έμš”." + : "μ™ΈλΆ€ ν˜ΈμΆœμ„ μœ„ν•œ μ†ŒμŠ€μ™€ λŒ€μƒ 연결을 μ„ νƒν•˜μ„Έμš”."} +

+ + + + {isLoading ? ( +
+ + μ—°κ²° λͺ©λ‘μ„ λΆˆλŸ¬μ˜€λŠ” 쀑... +
+ ) : ( + <> + {/* FROM μ—°κ²° 선택 */} +
+
+

FROM μ—°κ²° (μ†ŒμŠ€)

+ {fromConnection && ( +
+ + 🟒 연결됨 + + μ§€μ—°μ‹œκ°„: ~23ms +
+ )} +
+ + + + {fromConnection && ( +
+
+ {getConnectionIcon(fromConnection)} + {fromConnection.name} + {getConnectionBadge(fromConnection)} +
+
+

+ 호슀트: {fromConnection.host}:{fromConnection.port} +

+

λ°μ΄ν„°λ² μ΄μŠ€: {fromConnection.database}

+
+
+ )} +
+ + {/* TO μ—°κ²° 선택 */} +
+
+

TO μ—°κ²° (λŒ€μƒ)

+ {toConnection && ( +
+ + 🟒 연결됨 + + μ§€μ—°μ‹œκ°„: ~45ms +
+ )} +
+ + + + {toConnection && ( +
+
+ {getConnectionIcon(toConnection)} + {toConnection.name} + {getConnectionBadge(toConnection)} +
+
+

+ 호슀트: {toConnection.host}:{toConnection.port} +

+

λ°μ΄ν„°λ² μ΄μŠ€: {toConnection.database}

+
+
+ )} +
+ + {/* μ—°κ²° 맀핑 ν‘œμ‹œ */} + {fromConnection && toConnection && ( +
+
+
+
{fromConnection.name}
+
μ†ŒμŠ€
+
+ + + +
+
{toConnection.name}
+
λŒ€μƒ
+
+
+ +
+ + πŸ’‘ μ—°κ²° 맀핑 μ„€μ • μ™„λ£Œ + +
+
+ )} + + {/* λ‹€μŒ 단계 λ²„νŠΌ */} +
+ +
+ + )} + + + ); + }, +); + +ConnectionStep.displayName = "ConnectionStep"; + +export default ConnectionStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx new file mode 100644 index 00000000..ee10f051 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx @@ -0,0 +1,462 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { ArrowLeft, CheckCircle, AlertCircle, Settings, Plus, Trash2 } from "lucide-react"; + +// νƒ€μž… import +import { DataConnectionState, DataConnectionActions } from "../types/redesigned"; +import { ColumnInfo } from "@/lib/types/multiConnection"; +import { getColumnsFromConnection } from "@/lib/api/multiConnection"; +import { getCodesForColumn, CodeItem } from "@/lib/api/codeManagement"; + +// μ»΄ν¬λ„ŒνŠΈ import + +interface ControlConditionStepProps { + state: DataConnectionState; + actions: DataConnectionActions; + onBack: () => void; + onNext: () => void; +} + +/** + * 🎯 4단계: μ œμ–΄ 쑰건 μ„€μ • + * - 전체 μ œμ–΄κ°€ μ–Έμ œ 싀행될지 μ„€μ • + * - INSERT/UPDATE/DELETE 트리거 쑰건 + */ +const ControlConditionStep: React.FC = ({ state, actions, onBack, onNext }) => { + const { controlConditions, fromTable, toTable, fromConnection, toConnection } = state; + + const [fromColumns, setFromColumns] = useState([]); + const [toColumns, setToColumns] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [availableCodes, setAvailableCodes] = useState>({}); + + // 컬럼 정보 λ‘œλ“œ + useEffect(() => { + const loadColumns = async () => { + console.log("πŸ”„ ControlConditionStep 컬럼 λ‘œλ“œ μ‹œμž‘"); + console.log("fromConnection:", fromConnection); + console.log("toConnection:", toConnection); + console.log("fromTable:", fromTable); + console.log("toTable:", toTable); + + if (!fromConnection || !toConnection || !fromTable || !toTable) { + console.log("❌ ν•„μˆ˜ 정보 λˆ„λ½μœΌλ‘œ 컬럼 λ‘œλ“œ 쀑단"); + return; + } + + setIsLoading(true); + try { + console.log( + `πŸš€ 컬럼 쑰회 μ‹œμž‘: FROM=${fromConnection.id}/${fromTable.tableName}, TO=${toConnection.id}/${toTable.tableName}`, + ); + + const [fromCols, toCols] = await Promise.all([ + getColumnsFromConnection(fromConnection.id, fromTable.tableName), + getColumnsFromConnection(toConnection.id, toTable.tableName), + ]); + + console.log(`βœ… 컬럼 쑰회 μ™„λ£Œ: FROM=${fromCols.length}개, TO=${toCols.length}개`); + setFromColumns(fromCols); + setToColumns(toCols); + } catch (error) { + console.error("❌ 컬럼 정보 λ‘œλ“œ μ‹€νŒ¨:", error); + } finally { + setIsLoading(false); + } + }; + + loadColumns(); + }, [fromConnection, toConnection, fromTable, toTable]); + + // μ½”λ“œ νƒ€μž… 컬럼의 μ½”λ“œ λ‘œλ“œ + useEffect(() => { + const loadCodes = async () => { + const allColumns = [...fromColumns, ...toColumns]; + const codeColumns = allColumns.filter( + (col) => col.webType === "code" || col.dataType?.toLowerCase().includes("code"), + ); + + if (codeColumns.length === 0) return; + + console.log("πŸ” μ½”λ“œ νƒ€μž… μ»¬λŸΌλ“€:", codeColumns); + + const codePromises = codeColumns.map(async (col) => { + try { + const codes = await getCodesForColumn(col.columnName, col.webType, col.codeCategory); + return { columnName: col.columnName, codes }; + } catch (error) { + console.error(`μ½”λ“œ λ‘œλ”© μ‹€νŒ¨ (${col.columnName}):`, error); + return { columnName: col.columnName, codes: [] }; + } + }); + + const results = await Promise.all(codePromises); + const codeMap: Record = {}; + + results.forEach(({ columnName, codes }) => { + codeMap[columnName] = codes; + }); + + console.log("πŸ“‹ λ‘œλ”©λœ μ½”λ“œλ“€:", codeMap); + setAvailableCodes(codeMap); + }; + + if (fromColumns.length > 0 || toColumns.length > 0) { + loadCodes(); + } + }, [fromColumns, toColumns]); + + // μ™„λ£Œ κ°€λŠ₯ μ—¬λΆ€ 확인 + const canProceed = + controlConditions.length === 0 || + controlConditions.some( + (condition) => + condition.field && + condition.operator && + (condition.value !== "" || ["IS NULL", "IS NOT NULL"].includes(condition.operator)), + ); + + const isCompleted = canProceed; + + return ( + <> + + + {isCompleted ? ( + + ) : ( + + )} + 4단계: μ œμ–΄ μ‹€ν–‰ 쑰건 + +

+ 이 전체 μ œμ–΄κ°€ μ–Έμ œ 싀행될지 μ„€μ •ν•©λ‹ˆλ‹€. 쑰건을 μ„€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ 항상 μ‹€ν–‰λ©λ‹ˆλ‹€. +

+ + + +
+ {/* μ œμ–΄ μ‹€ν–‰ 쑰건 μ•ˆλ‚΄ */} +
+

μ œμ–΄ μ‹€ν–‰ μ‘°κ±΄μ΄λž€?

+
+

+ β€’ 전체 μ œμ–΄μ˜ 트리거 쑰건을 μ„€μ •ν•©λ‹ˆλ‹€ +

+

β€’ 예: "μƒνƒœκ°€ 'ν™œμ„±'이고 μœ ν˜•μ΄ 'A'인 κ²½μš°μ—λ§Œ 데이터 동기화 μ‹€ν–‰"

+

β€’ 쑰건을 μ„€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ λͺ¨λ“  κ²½μš°μ— μ‹€ν–‰λ©λ‹ˆλ‹€

+
+
+ + {/* κ°„λ‹¨ν•œ 쑰건 μΆ”κ°€ UI */} + {!isLoading && (fromColumns.length > 0 || toColumns.length > 0 || controlConditions.length > 0) && ( +
+
+

μ‹€ν–‰ 쑰건 (WHERE)

+ +
+ + {controlConditions.length === 0 ? ( +
+ +

μ œμ–΄ μ‹€ν–‰ 쑰건을 μ„€μ •ν•˜μ„Έμš”

+

"쑰건 μΆ”κ°€" λ²„νŠΌμ„ ν΄λ¦­ν•˜μ—¬ μ‹œμž‘ν•˜μ„Έμš”

+
+ ) : ( +
+ {controlConditions.map((condition, index) => ( +
+
+ {/* 논리 μ—°μ‚°μž */} + {index > 0 && ( + + )} + + {/* ν•„λ“œ 선택 */} + + + {/* μ—°μ‚°μž 선택 */} + + + {/* κ°’ μž…λ ₯ */} + {!["IS NULL", "IS NOT NULL"].includes(condition.operator || "") && + (() => { + // μ„ νƒλœ ν•„λ“œκ°€ μ½”λ“œ νƒ€μž…μΈμ§€ 확인 + const selectedField = [...fromColumns, ...toColumns].find( + (col) => col.columnName === condition.field, + ); + const isCodeField = + selectedField && + (selectedField.webType === "code" || + selectedField.dataType?.toLowerCase().includes("code")); + const fieldCodes = condition.field ? availableCodes[condition.field] : []; + + // 디버깅 정보 좜λ ₯ + console.log("πŸ” κ°’ μž…λ ₯ ν•„λ“œ 디버깅:", { + conditionField: condition.field, + selectedField: selectedField, + webType: selectedField?.webType, + dataType: selectedField?.dataType, + isCodeField: isCodeField, + fieldCodes: fieldCodes, + availableCodesKeys: Object.keys(availableCodes), + }); + + if (isCodeField && fieldCodes && fieldCodes.length > 0) { + // μ½”λ“œ νƒ€μž… ν•„λ“œλ©΄ μ½”λ“œ 선택 λ“œλ‘­λ‹€μš΄ + return ( + + ); + } else { + // 일반 ν•„λ“œλ©΄ ν…μŠ€νŠΈ μž…λ ₯ + return ( + + actions.updateControlCondition(index, { + ...condition, + value: e.target.value, + }) + } + className="w-32" + /> + ); + } + })()} + + {/* μ‚­μ œ λ²„νŠΌ */} + +
+
+ ))} +
+ )} +
+ )} + + {/* λ‘œλ”© μƒνƒœ */} + {isLoading && ( +
+
컬럼 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑...
+
+ )} + + {/* 쑰건 μ—†μŒ μ•ˆλ‚΄ */} + {!isLoading && controlConditions.length === 0 && ( +
+ +

μ œμ–΄ μ‹€ν–‰ 쑰건 μ—†μŒ

+

+ ν˜„μž¬ μ œμ–΄ μ‹€ν–‰ 쑰건이 μ„€μ •λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. +
+ λͺ¨λ“  κ²½μš°μ— μ œμ–΄κ°€ μ‹€ν–‰λ©λ‹ˆλ‹€. +

+ +
+ )} + + {/* 컬럼 정보 λ‘œλ“œ μ‹€νŒ¨ μ‹œ μ•ˆλ‚΄ */} + {!isLoading && fromColumns.length === 0 && toColumns.length === 0 && controlConditions.length === 0 && ( +
+

컬럼 정보λ₯Ό 뢈러올 수 μ—†μŠ΅λ‹ˆλ‹€

+
+

β€’ μ™ΈλΆ€ λ°μ΄ν„°λ² μ΄μŠ€ 연결에 λ¬Έμ œκ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€

+

β€’ 쑰건 없이 μ§„ν–‰ν•˜λ©΄ 항상 μ‹€ν–‰λ©λ‹ˆλ‹€

+

β€’ λ‚˜μ€‘μ— μˆ˜λ™μœΌλ‘œ 쑰건을 μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€

+
+ +
+ )} + + {/* μ„€μ • μš”μ•½ */} + {controlConditions.length > 0 && ( +
+

μ„€μ • μš”μ•½

+
+
+ μ œμ–΄ μ‹€ν–‰ 쑰건: + 0 ? "default" : "secondary"}> + {controlConditions.length > 0 ? `${controlConditions.length}개 쑰건` : "쑰건 μ—†μŒ"} + +
+
+ μ‹€ν–‰ 방식: + + {controlConditions.length === 0 ? "항상 μ‹€ν–‰" : "쑰건뢀 μ‹€ν–‰"} + +
+
+
+ )} +
+ + {/* ν•˜λ‹¨ λ„€λΉ„κ²Œμ΄μ…˜ */} +
+
+ + + +
+
+ + + ); +}; + +export default ControlConditionStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx new file mode 100644 index 00000000..d7ec2f7b --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx @@ -0,0 +1,199 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { ArrowLeft, Link, Loader2, CheckCircle } from "lucide-react"; +import { toast } from "sonner"; + +// API import +import { getColumnsFromConnection } from "@/lib/api/multiConnection"; + +// νƒ€μž… import +import { Connection, TableInfo, ColumnInfo } from "@/lib/types/multiConnection"; +import { FieldMapping } from "../types/redesigned"; + +// μ»΄ν¬λ„ŒνŠΈ import +import FieldMappingCanvas from "./VisualMapping/FieldMappingCanvas"; + +interface FieldMappingStepProps { + fromTable?: TableInfo; + toTable?: TableInfo; + fromConnection?: Connection; + toConnection?: Connection; + fieldMappings: FieldMapping[]; + onCreateMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void; + onDeleteMapping: (mappingId: string) => void; + onNext: () => void; + onBack: () => void; +} + +/** + * 🎯 3단계: μ‹œκ°μ  ν•„λ“œ 맀핑 + * - SVG 기반 μ—°κ²°μ„  ν‘œμ‹œ + * - λ“œλž˜κ·Έ μ•€ λ“œλ‘­ 지원 (ν–₯ν›„) + * - μ‹€μ‹œκ°„ 맀핑 μ—…λ°μ΄νŠΈ + */ +const FieldMappingStep: React.FC = ({ + fromTable, + toTable, + fromConnection, + toConnection, + fieldMappings, + onCreateMapping, + onDeleteMapping, + onNext, + onBack, +}) => { + const [fromColumns, setFromColumns] = useState([]); + const [toColumns, setToColumns] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + // 컬럼 정보 λ‘œλ“œ + useEffect(() => { + const loadColumns = async () => { + console.log("πŸ” 컬럼 λ‘œλ”© μ‹œμž‘:", { + fromConnection: fromConnection?.id, + toConnection: toConnection?.id, + fromTable: fromTable?.tableName, + toTable: toTable?.tableName, + }); + + if (!fromConnection || !toConnection || !fromTable || !toTable) { + console.warn("⚠️ ν•„μˆ˜ 정보 λˆ„λ½:", { + fromConnection: !!fromConnection, + toConnection: !!toConnection, + fromTable: !!fromTable, + toTable: !!toTable, + }); + return; + } + + try { + setIsLoading(true); + console.log("πŸ“‘ API 호좜 μ‹œμž‘:", { + fromAPI: `getColumnsFromConnection(${fromConnection.id}, "${fromTable.tableName}")`, + toAPI: `getColumnsFromConnection(${toConnection.id}, "${toTable.tableName}")`, + }); + + const [fromCols, toCols] = await Promise.all([ + getColumnsFromConnection(fromConnection.id, fromTable.tableName), + getColumnsFromConnection(toConnection.id, toTable.tableName), + ]); + + console.log("πŸ” 원본 API 응닡 확인:", { + fromCols: fromCols, + toCols: toCols, + fromType: typeof fromCols, + toType: typeof toCols, + fromIsArray: Array.isArray(fromCols), + toIsArray: Array.isArray(toCols), + }); + + // μ•ˆμ „ν•œ λ°°μ—΄ 처리 + const safeFromCols = Array.isArray(fromCols) ? fromCols : []; + const safeToCols = Array.isArray(toCols) ? toCols : []; + + console.log("βœ… 컬럼 λ‘œλ”© 성곡:", { + fromColumns: safeFromCols.length, + toColumns: safeToCols.length, + fromData: safeFromCols.slice(0, 2), // 처음 2개만 λ‘œκΉ… + toData: safeToCols.slice(0, 2), + originalFromType: typeof fromCols, + originalToType: typeof toCols, + }); + + setFromColumns(safeFromCols); + setToColumns(safeToCols); + } catch (error) { + console.error("❌ 컬럼 정보 λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error("ν•„λ“œ 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + } finally { + setIsLoading(false); + } + }; + + loadColumns(); + }, [fromConnection, toConnection, fromTable, toTable]); + + if (isLoading) { + return ( + + + ν•„λ“œ 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑... + + ); + } + + return ( + <> + + + + 3단계: 컬럼 맀핑 + + + + + {/* 맀핑 μΊ”λ²„μŠ€ - 전체 μ˜μ—­ μ‚¬μš© */} +
+ {isLoading ? ( +
+
컬럼 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑...
+
+ ) : fromColumns.length > 0 && toColumns.length > 0 ? ( + + ) : ( +
+
컬럼 정보λ₯Ό 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.
+
+ FROM 컬럼: {fromColumns.length}개, TO 컬럼: {toColumns.length}개 +
+ +
+ )} +
+ + {/* ν•˜λ‹¨ λ„€λΉ„κ²Œμ΄μ…˜ - κ³ μ • */} +
+
+ + +
+ {fieldMappings.length > 0 ? `${fieldMappings.length}개 맀핑 μ™„λ£Œ` : "μ»¬λŸΌμ„ μ„ νƒν•΄μ„œ λ§€ν•‘ν•˜μ„Έμš”"} +
+ + +
+
+ + + ); +}; + +export default FieldMappingStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx new file mode 100644 index 00000000..06366358 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx @@ -0,0 +1,571 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Switch } from "@/components/ui/switch"; +import { Separator } from "@/components/ui/separator"; +import { + ChevronDown, + ChevronRight, + Plus, + Trash2, + Copy, + Settings2, + ArrowLeft, + Save, + Play, + AlertTriangle, +} from "lucide-react"; +import { toast } from "sonner"; + +// API import +import { getColumnsFromConnection } from "@/lib/api/multiConnection"; + +// νƒ€μž… import +import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection"; +import { ActionGroup, SingleAction, FieldMapping } from "../types/redesigned"; + +// μ»΄ν¬λ„ŒνŠΈ import +import ActionConditionBuilder from "./ActionConfig/ActionConditionBuilder"; +import FieldMappingCanvas from "./VisualMapping/FieldMappingCanvas"; + +interface MultiActionConfigStepProps { + fromTable?: TableInfo; + toTable?: TableInfo; + fromConnection?: Connection; + toConnection?: Connection; + // μ œμ–΄ 쑰건 κ΄€λ ¨ + controlConditions: any[]; + onUpdateControlCondition: (index: number, condition: any) => void; + onDeleteControlCondition: (index: number) => void; + onAddControlCondition: () => void; + // μ•‘μ…˜ κ·Έλ£Ή κ΄€λ ¨ + actionGroups: ActionGroup[]; + onUpdateActionGroup: (groupId: string, updates: Partial) => void; + onDeleteActionGroup: (groupId: string) => void; + onAddActionGroup: () => void; + onAddActionToGroup: (groupId: string) => void; + onUpdateActionInGroup: (groupId: string, actionId: string, updates: Partial) => void; + onDeleteActionFromGroup: (groupId: string, actionId: string) => void; + // ν•„λ“œ 맀핑 κ΄€λ ¨ + fieldMappings: FieldMapping[]; + onCreateMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void; + onDeleteMapping: (mappingId: string) => void; + // λ„€λΉ„κ²Œμ΄μ…˜ + onNext: () => void; + onBack: () => void; +} + +/** + * 🎯 4단계: ν†΅ν•©λœ λ©€ν‹° μ•‘μ…˜ μ„€μ • + * - μ œμ–΄ 쑰건 μ„€μ • + * - μ—¬λŸ¬ μ•‘μ…˜ κ·Έλ£Ή 관리 + * - AND/OR 논리 μ—°μ‚°μž + * - μ•‘μ…˜λ³„ 쑰건 μ„€μ • + * - INSERT μ•‘μ…˜ μ‹œ 컬럼 맀핑 + */ +const MultiActionConfigStep: React.FC = ({ + fromTable, + toTable, + fromConnection, + toConnection, + controlConditions, + onUpdateControlCondition, + onDeleteControlCondition, + onAddControlCondition, + actionGroups, + onUpdateActionGroup, + onDeleteActionGroup, + onAddActionGroup, + onAddActionToGroup, + onUpdateActionInGroup, + onDeleteActionFromGroup, + fieldMappings, + onCreateMapping, + onDeleteMapping, + onNext, + onBack, +}) => { + const [fromColumns, setFromColumns] = useState([]); + const [toColumns, setToColumns] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [expandedGroups, setExpandedGroups] = useState>(new Set(["group_1"])); // 첫 번째 그룹은 κΈ°λ³Έ μ—΄λ¦Ό + const [activeTab, setActiveTab] = useState<"control" | "actions" | "mapping">("control"); // ν˜„μž¬ ν™œμ„± νƒ­ + + // 컬럼 정보 λ‘œλ“œ + useEffect(() => { + const loadColumns = async () => { + if (!fromConnection || !toConnection || !fromTable || !toTable) { + return; + } + + try { + setIsLoading(true); + const [fromCols, toCols] = await Promise.all([ + getColumnsFromConnection(fromConnection.id, fromTable.tableName), + getColumnsFromConnection(toConnection.id, toTable.tableName), + ]); + + setFromColumns(Array.isArray(fromCols) ? fromCols : []); + setToColumns(Array.isArray(toCols) ? toCols : []); + } catch (error) { + console.error("❌ 컬럼 정보 λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error("ν•„λ“œ 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + } finally { + setIsLoading(false); + } + }; + + loadColumns(); + }, [fromConnection, toConnection, fromTable, toTable]); + + // κ·Έλ£Ή ν™•μž₯/μΆ•μ†Œ ν† κΈ€ + const toggleGroupExpansion = (groupId: string) => { + setExpandedGroups((prev) => { + const newSet = new Set(prev); + if (newSet.has(groupId)) { + newSet.delete(groupId); + } else { + newSet.add(groupId); + } + return newSet; + }); + }; + + // μ•‘μ…˜ νƒ€μž…λ³„ μ•„μ΄μ½˜ + const getActionTypeIcon = (actionType: string) => { + switch (actionType) { + case "insert": + return "βž•"; + case "update": + return "✏️"; + case "delete": + return "πŸ—‘οΈ"; + case "upsert": + return "πŸ”„"; + default: + return "βš™οΈ"; + } + }; + + // 논리 μ—°μ‚°μžλ³„ 색상 + const getLogicalOperatorColor = (operator: string) => { + switch (operator) { + case "AND": + return "bg-blue-100 text-blue-800"; + case "OR": + return "bg-orange-100 text-orange-800"; + default: + return "bg-gray-100 text-gray-800"; + } + }; + + // INSERT μ•‘μ…˜μ΄ μžˆλŠ”μ§€ 확인 + const hasInsertActions = actionGroups.some((group) => + group.actions.some((action) => action.actionType === "insert" && action.isEnabled), + ); + + // νƒ­ 정보 + const tabs = [ + { id: "control" as const, label: "μ œμ–΄ 쑰건", icon: "🎯", description: "전체 μ œμ–΄ μ‹€ν–‰ 쑰건" }, + { id: "actions" as const, label: "μ•‘μ…˜ μ„€μ •", icon: "βš™οΈ", description: "μ•‘μ…˜ κ·Έλ£Ή 및 μ‹€ν–‰ 쑰건" }, + ...(hasInsertActions + ? [{ id: "mapping" as const, label: "컬럼 맀핑", icon: "πŸ”—", description: "INSERT μ•‘μ…˜ ν•„λ“œ 맀핑" }] + : []), + ]; + + return ( + <> + + + + 4단계: μ•‘μ…˜ 및 맀핑 μ„€μ • + +

μ œμ–΄ 쑰건, μ•‘μ…˜ κ·Έλ£Ή, ν•„λ“œ 맀핑을 μ„€μ •ν•˜μ„Έμš”

+ + + + {/* νƒ­ 헀더 */} +
+ {tabs.map((tab) => ( + + ))} +
+ + {/* νƒ­ μ„€λͺ… */} +
+

{tabs.find((tab) => tab.id === activeTab)?.description}

+
+ + {/* 탭별 컨텐츠 */} +
+ {activeTab === "control" && ( +
+ {/* μ œμ–΄ 쑰건 μ„Ήμ…˜ */} +
+

μ œμ–΄ 쑰건

+ +
+ + {controlConditions.length === 0 ? ( +
+
+ +

μ œμ–΄ 쑰건이 μ—†μŠ΅λ‹ˆλ‹€

+

쑰건을 μΆ”κ°€ν•˜λ©΄ ν•΄λ‹Ή 쑰건이 좩쑱될 λ•Œλ§Œ μ•‘μ…˜μ΄ μ‹€ν–‰λ©λ‹ˆλ‹€

+
+
+ ) : ( +
+ {controlConditions.map((condition, index) => ( +
+ 쑰건 {index + 1} +
+ {/* 여기에 쑰건 νŽΈμ§‘ μ»΄ν¬λ„ŒνŠΈ μΆ”κ°€ */} +
쑰건 μ„€μ •: {JSON.stringify(condition)}
+
+ +
+ ))} +
+ )} +
+ )} + + {activeTab === "actions" && ( +
+ {/* μ•‘μ…˜ κ·Έλ£Ή 헀더 */} +
+
+

μ•‘μ…˜ κ·Έλ£Ή

+ + {actionGroups.filter((g) => g.isEnabled).length}개 ν™œμ„±ν™” + +
+ +
+ + {/* μ•‘μ…˜ κ·Έλ£Ή λͺ©λ‘ */} +
+ {actionGroups.map((group, groupIndex) => ( +
+ {/* κ·Έλ£Ή 헀더 */} + toggleGroupExpansion(group.id)} + > + +
+
+ {expandedGroups.has(group.id) ? ( + + ) : ( + + )} + +
+ onUpdateActionGroup(group.id, { name: e.target.value })} + className="h-8 w-40" + onClick={(e) => e.stopPropagation()} + /> + + {group.logicalOperator} + + + {group.actions.length}개 μ•‘μ…˜ + +
+
+ +
+ {/* κ·Έλ£Ή 논리 μ—°μ‚°μž 선택 */} + + + {/* κ·Έλ£Ή ν™œμ„±ν™”/λΉ„ν™œμ„±ν™” */} + onUpdateActionGroup(group.id, { isEnabled: checked })} + onClick={(e) => e.stopPropagation()} + /> + + {/* κ·Έλ£Ή μ‚­μ œ */} + {actionGroups.length > 1 && ( + + )} +
+
+ + + {/* κ·Έλ£Ή λ‚΄μš© */} + +
+ {/* μ•‘μ…˜ μΆ”κ°€ λ²„νŠΌ */} +
+ +
+ + {/* μ•‘μ…˜ λͺ©λ‘ */} +
+ {group.actions.map((action, actionIndex) => ( +
+ {/* μ•‘μ…˜ 헀더 */} +
+
+ {getActionTypeIcon(action.actionType)} + + onUpdateActionInGroup(group.id, action.id, { name: e.target.value }) + } + className="h-8 w-32" + /> + +
+ +
+ + onUpdateActionInGroup(group.id, action.id, { isEnabled: checked }) + } + /> + {group.actions.length > 1 && ( + + )} +
+
+ + {/* μ•‘μ…˜ 쑰건 μ„€μ • */} + + onUpdateActionInGroup(group.id, action.id, { conditions }) + } + onFieldMappingsChange={(fieldMappings) => + onUpdateActionInGroup(group.id, action.id, { fieldMappings }) + } + /> +
+ ))} +
+ + {/* κ·Έλ£Ή 둜직 μ„€λͺ… */} +
+
+ +
+
{group.logicalOperator} 쑰건 그룹
+
+ {group.logicalOperator === "AND" + ? "이 그룹의 λͺ¨λ“  μ•‘μ…˜μ΄ μ‹€ν–‰ κ°€λŠ₯ν•œ 쑰건일 λ•Œλ§Œ μ‹€ν–‰λ©λ‹ˆλ‹€." + : "이 그룹의 μ•‘μ…˜ 쀑 ν•˜λ‚˜λΌλ„ μ‹€ν–‰ κ°€λŠ₯ν•œ 쑰건이면 ν•΄λ‹Ή μ•‘μ…˜λ§Œ μ‹€ν–‰λ©λ‹ˆλ‹€."} +
+
+
+
+
+ + + + {/* κ·Έλ£Ή κ°„ μ—°κ²°μ„  (λ§ˆμ§€λ§‰ 그룹이 μ•„λ‹Œ 경우) */} + {groupIndex < actionGroups.length - 1 && ( +
+
+
+ λ‹€μŒ κ·Έλ£Ή +
+
+
+ )} +
+ ))} +
+
+ )} + + {activeTab === "mapping" && hasInsertActions && ( +
+ {/* 컬럼 맀핑 헀더 */} +
+
+

컬럼 맀핑

+ + {fieldMappings.length}개 맀핑 + +
+
INSERT μ•‘μ…˜μ— ν•„μš”ν•œ ν•„λ“œλ“€μ„ λ§€ν•‘ν•˜μ„Έμš”
+
+ + {/* 컬럼 맀핑 μΊ”λ²„μŠ€ */} + {isLoading ? ( +
+
컬럼 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑...
+
+ ) : fromColumns.length > 0 && toColumns.length > 0 ? ( +
+ +
+ ) : ( +
+ +
컬럼 정보λ₯Ό 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.
+
+ FROM 컬럼: {fromColumns.length}개, TO 컬럼: {toColumns.length}개 +
+
+ )} + + {/* λ§€ν•‘λ˜μ§€ μ•Šμ€ ν•„λ“œ 처리 μ˜΅μ…˜ */} +
+

+ + λ§€ν•‘λ˜μ§€ μ•Šμ€ ν•„λ“œ 처리 +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ )} +
+ + {/* ν•˜λ‹¨ λ„€λΉ„κ²Œμ΄μ…˜ */} +
+
+ + +
+ {actionGroups.filter((g) => g.isEnabled).length}개 κ·Έλ£Ή, 총{" "} + {actionGroups.reduce((sum, g) => sum + g.actions.filter((a) => a.isEnabled).length, 0)}개 μ•‘μ…˜ +
+ + +
+
+ + + ); +}; + +export default MultiActionConfigStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx new file mode 100644 index 00000000..14f01f3a --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx @@ -0,0 +1,141 @@ +"use client"; + +import React from "react"; +import { Card } from "@/components/ui/card"; + +// νƒ€μž… import +import { RightPanelProps } from "../types/redesigned"; + +// μ»΄ν¬λ„ŒνŠΈ import +import StepProgress from "./StepProgress"; +import ConnectionStep from "./ConnectionStep"; +import TableStep from "./TableStep"; +import FieldMappingStep from "./FieldMappingStep"; +import ControlConditionStep from "./ControlConditionStep"; +import ActionConfigStep from "./ActionConfigStep"; +import MultiActionConfigStep from "./MultiActionConfigStep"; + +/** + * 🎯 우츑 νŒ¨λ„ (70% λ„ˆλΉ„) + * - 단계별 진행 UI + * - μ—°κ²° β†’ ν…Œμ΄λΈ” β†’ ν•„λ“œ 맀핑 + * - μ‹œκ°μ  맀핑 μ˜μ—­ + */ +const RightPanel: React.FC = ({ state, actions }) => { + // μ™„λ£Œλœ 단계 계산 + const completedSteps: number[] = []; + + if (state.fromConnection && state.toConnection) { + completedSteps.push(1); + } + + if (state.fromTable && state.toTable) { + completedSteps.push(2); + } + + // μƒˆλ‘œμš΄ 단계 μˆœμ„œμ— λ”°λ₯Έ μ™„λ£Œ 쑰건 + const needsFieldMapping = state.actionType === "insert" || state.actionType === "upsert"; + + // 3단계: μ œμ–΄ 쑰건 (ν…Œμ΄λΈ” 선택 ν›„ λ°”λ‘œ μ ‘κ·Ό κ°€λŠ₯) + if (state.fromTable && state.toTable) { + completedSteps.push(3); + } + + // 4단계: μ•‘μ…˜ μ„€μ • + if (state.actionType) { + completedSteps.push(4); + } + + // 5단계: 컬럼 맀핑 (INSERT/UPSERT인 κ²½μš°μ—λ§Œ) + if (needsFieldMapping && state.fieldMappings.length > 0) { + completedSteps.push(5); + } + + const renderCurrentStep = () => { + switch (state.currentStep) { + case 1: + return ( + actions.goToStep(2)} + /> + ); + + case 2: + return ( + actions.goToStep(3)} // 3단계(μ œμ–΄ 쑰건)둜 + onBack={() => actions.goToStep(1)} + /> + ); + + case 3: + // 3단계: μ œμ–΄ 쑰건 + return ( + actions.goToStep(2)} + onNext={() => actions.goToStep(4)} + /> + ); + + case 4: + // 4단계: ν†΅ν•©λœ λ©€ν‹° μ•‘μ…˜ μ„€μ • (μ œμ–΄ 쑰건 + μ•‘μ…˜ μ„€μ • + 컬럼 맀핑) + return ( + { + // μ™„λ£Œ 처리 - μ €μž₯ 및 μƒμœ„ μ»΄ν¬λ„ŒνŠΈ μ•Œλ¦Ό + actions.saveMappings(); + }} + onBack={() => actions.goToStep(3)} + /> + ); + + default: + return null; + } + }; + + return ( +
+ {/* 단계 진행 ν‘œμ‹œ */} +
+ +
+ + {/* ν˜„μž¬ 단계 컨텐츠 */} +
+ {renderCurrentStep()} +
+
+ ); +}; + +export default RightPanel; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx new file mode 100644 index 00000000..340320ea --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx @@ -0,0 +1,90 @@ +"use client"; + +import React from "react"; +import { Button } from "@/components/ui/button"; +import { CheckCircle, Circle, ArrowRight } from "lucide-react"; + +// νƒ€μž… import +import { StepProgressProps } from "../types/redesigned"; + +/** + * πŸ“Š 단계 진행 ν‘œμ‹œ + * - ν˜„μž¬ 단계 ν•˜μ΄λΌμ΄νŠΈ + * - μ™„λ£Œλœ 단계 체크 ν‘œμ‹œ + * - 클릭으둜 단계 이동 + */ +const StepProgress: React.FC = ({ currentStep, completedSteps, onStepClick }) => { + const steps = [ + { number: 1, title: "μ—°κ²° 선택", description: "FROM/TO λ°μ΄ν„°λ² μ΄μŠ€ μ—°κ²°" }, + { number: 2, title: "ν…Œμ΄λΈ” 선택", description: "μ†ŒμŠ€/λŒ€μƒ ν…Œμ΄λΈ” 선택" }, + { number: 3, title: "μ œμ–΄ 쑰건", description: "전체 μ œμ–΄ μ‹€ν–‰ 쑰건 μ„€μ •" }, + { number: 4, title: "μ•‘μ…˜ 및 맀핑", description: "μ•‘μ…˜ μ„€μ • 및 컬럼 맀핑" }, + ]; + + const getStepStatus = (stepNumber: number) => { + if (completedSteps.includes(stepNumber)) return "completed"; + if (stepNumber === currentStep) return "current"; + return "pending"; + }; + + const getStepIcon = (stepNumber: number) => { + const status = getStepStatus(stepNumber); + + if (status === "completed") { + return ; + } + + return ( + + ); + }; + + const canClickStep = (stepNumber: number) => { + // ν˜„μž¬ λ‹¨κ³„μ΄κ±°λ‚˜ μ™„λ£Œλœ λ‹¨κ³„λ§Œ 클릭 κ°€λŠ₯ + return stepNumber === currentStep || completedSteps.includes(stepNumber); + }; + + return ( +
+ {steps.map((step, index) => ( + + {/* 단계 */} +
+ +
+ + {/* ν™”μ‚΄ν‘œ (λ§ˆμ§€λ§‰ 단계 μ œμ™Έ) */} + {index < steps.length - 1 && } + + ))} +
+ ); +}; + +export default StepProgress; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx new file mode 100644 index 00000000..568303a7 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx @@ -0,0 +1,343 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { ArrowLeft, ArrowRight, Table, Search, Loader2 } from "lucide-react"; +import { toast } from "sonner"; + +// API import +import { getTablesFromConnection, getBatchTablesWithColumns } from "@/lib/api/multiConnection"; + +// νƒ€μž… import +import { Connection, TableInfo } from "@/lib/types/multiConnection"; + +interface TableStepProps { + fromConnection?: Connection; + toConnection?: Connection; + fromTable?: TableInfo; + toTable?: TableInfo; + onSelectTable: (type: "from" | "to", table: TableInfo) => void; + onNext: () => void; + onBack: () => void; +} + +/** + * πŸ“‹ 2단계: ν…Œμ΄λΈ” 선택 + * - FROM/TO ν…Œμ΄λΈ” 선택 + * - ν…Œμ΄λΈ” 검색 κΈ°λŠ₯ + * - 컬럼 수 정보 ν‘œμ‹œ + */ +const TableStep: React.FC = ({ + fromConnection, + toConnection, + fromTable, + toTable, + onSelectTable, + onNext, + onBack, +}) => { + const [fromTables, setFromTables] = useState([]); + const [toTables, setToTables] = useState([]); + const [fromSearch, setFromSearch] = useState(""); + const [toSearch, setToSearch] = useState(""); + const [isLoadingFrom, setIsLoadingFrom] = useState(false); + const [isLoadingTo, setIsLoadingTo] = useState(false); + const [tableColumnCounts, setTableColumnCounts] = useState>({}); + + // FROM ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ (배치 쑰회) + useEffect(() => { + if (fromConnection) { + const loadFromTables = async () => { + try { + setIsLoadingFrom(true); + console.log("πŸš€ FROM ν…Œμ΄λΈ” 배치 쑰회 μ‹œμž‘"); + + // 배치 쑰회둜 ν…Œμ΄λΈ” 정보와 컬럼 수λ₯Ό ν•œλ²ˆμ— κ°€μ Έμ˜€κΈ° + const batchResult = await getBatchTablesWithColumns(fromConnection.id); + + console.log("βœ… FROM ν…Œμ΄λΈ” 배치 쑰회 μ™„λ£Œ:", batchResult); + + // TableInfo ν˜•μ‹μœΌλ‘œ λ³€ν™˜ + const tables: TableInfo[] = batchResult.map((item) => ({ + tableName: item.tableName, + displayName: item.displayName || item.tableName, + })); + + setFromTables(tables); + + // 컬럼 수 정보λ₯Ό state에 μ €μž₯ + const columnCounts: Record = {}; + batchResult.forEach((item) => { + columnCounts[`from_${item.tableName}`] = item.columnCount; + }); + + setTableColumnCounts((prev) => ({ + ...prev, + ...columnCounts, + })); + + console.log(`πŸ“Š FROM ν…Œμ΄λΈ” ${tables.length}개 λ‘œλ“œ μ™„λ£Œ, 컬럼 수:`, columnCounts); + } catch (error) { + console.error("FROM ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error("μ†ŒμŠ€ ν…Œμ΄λΈ” λͺ©λ‘μ„ λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + } finally { + setIsLoadingFrom(false); + } + }; + loadFromTables(); + } + }, [fromConnection]); + + // TO ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ (배치 쑰회) + useEffect(() => { + if (toConnection) { + const loadToTables = async () => { + try { + setIsLoadingTo(true); + console.log("πŸš€ TO ν…Œμ΄λΈ” 배치 쑰회 μ‹œμž‘"); + + // 배치 쑰회둜 ν…Œμ΄λΈ” 정보와 컬럼 수λ₯Ό ν•œλ²ˆμ— κ°€μ Έμ˜€κΈ° + const batchResult = await getBatchTablesWithColumns(toConnection.id); + + console.log("βœ… TO ν…Œμ΄λΈ” 배치 쑰회 μ™„λ£Œ:", batchResult); + + // TableInfo ν˜•μ‹μœΌλ‘œ λ³€ν™˜ + const tables: TableInfo[] = batchResult.map((item) => ({ + tableName: item.tableName, + displayName: item.displayName || item.tableName, + })); + + setToTables(tables); + + // 컬럼 수 정보λ₯Ό state에 μ €μž₯ + const columnCounts: Record = {}; + batchResult.forEach((item) => { + columnCounts[`to_${item.tableName}`] = item.columnCount; + }); + + setTableColumnCounts((prev) => ({ + ...prev, + ...columnCounts, + })); + + console.log(`πŸ“Š TO ν…Œμ΄λΈ” ${tables.length}개 λ‘œλ“œ μ™„λ£Œ, 컬럼 수:`, columnCounts); + } catch (error) { + console.error("TO ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ μ‹€νŒ¨:", error); + toast.error("λŒ€μƒ ν…Œμ΄λΈ” λͺ©λ‘μ„ λΆˆλŸ¬μ˜€λŠ”λ° μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€."); + } finally { + setIsLoadingTo(false); + } + }; + loadToTables(); + } + }, [toConnection]); + + // ν…Œμ΄λΈ” 필터링 + const filteredFromTables = fromTables.filter((table) => + (table.displayName || table.tableName).toLowerCase().includes(fromSearch.toLowerCase()), + ); + + const filteredToTables = toTables.filter((table) => + (table.displayName || table.tableName).toLowerCase().includes(toSearch.toLowerCase()), + ); + + const handleTableSelect = (type: "from" | "to", tableName: string) => { + const tables = type === "from" ? fromTables : toTables; + const table = tables.find((t) => t.tableName === tableName); + if (table) { + onSelectTable(type, table); + } + }; + + const canProceed = fromTable && toTable; + + const renderTableItem = (table: TableInfo, type: "from" | "to") => { + const displayName = + table.displayName && table.displayName !== table.tableName ? table.displayName : table.tableName; + + const columnCount = tableColumnCounts[`${type}_${table.tableName}`]; + + return ( +
+
+ + {displayName} + + + {columnCount !== undefined ? columnCount : table.columnCount || 0}개 컬럼 + + + ); + }; + + return ( + <> + + +
+ 2단계: ν…Œμ΄λΈ” 선택 + +

μ—°κ²°λœ λ°μ΄ν„°λ² μ΄μŠ€μ—μ„œ μ†ŒμŠ€μ™€ λŒ€μƒ ν…Œμ΄λΈ”μ„ μ„ νƒν•˜μ„Έμš”.

+ + + + {/* FROM ν…Œμ΄λΈ” 선택 */} +
+
+

FROM ν…Œμ΄λΈ” (μ†ŒμŠ€)

+ + {fromConnection?.name} + +
+ + {/* 검색 */} +
+ + setFromSearch(e.target.value)} + className="pl-9" + /> +
+ + {/* ν…Œμ΄λΈ” 선택 */} + {isLoadingFrom ? ( +
+ + ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ 쀑... +
+ ) : ( + + )} + + {fromTable && ( +
+
+ {fromTable.displayName || fromTable.tableName} + + πŸ“Š {tableColumnCounts[`from_${fromTable.tableName}`] || fromTable.columnCount || 0}개 컬럼 + +
+ {fromTable.description &&

{fromTable.description}

} +
+ )} +
+ + {/* TO ν…Œμ΄λΈ” 선택 */} +
+
+

TO ν…Œμ΄λΈ” (λŒ€μƒ)

+ + {toConnection?.name} + +
+ + {/* 검색 */} +
+ + setToSearch(e.target.value)} + className="pl-9" + /> +
+ + {/* ν…Œμ΄λΈ” 선택 */} + {isLoadingTo ? ( +
+ + ν…Œμ΄λΈ” λͺ©λ‘ λ‘œλ“œ 쀑... +
+ ) : ( + + )} + + {toTable && ( +
+
+ {toTable.displayName || toTable.tableName} + + πŸ“Š {tableColumnCounts[`to_${toTable.tableName}`] || toTable.columnCount || 0}개 컬럼 + +
+ {toTable.description &&

{toTable.description}

} +
+ )} +
+ + {/* ν…Œμ΄λΈ” 맀핑 ν‘œμ‹œ */} + {fromTable && toTable && ( +
+
+
+
{fromTable.displayName || fromTable.tableName}
+
+ {tableColumnCounts[`from_${fromTable.tableName}`] || fromTable.columnCount || 0}개 컬럼 +
+
+ + + +
+
{toTable.displayName || toTable.tableName}
+
+ {tableColumnCounts[`to_${toTable.tableName}`] || toTable.columnCount || 0}개 컬럼 +
+
+
+ +
+ + πŸ’‘ ν…Œμ΄λΈ” 맀핑: {fromTable.displayName || fromTable.tableName} β†’{" "} + {toTable.displayName || toTable.tableName} + +
+
+ )} + + {/* λ„€λΉ„κ²Œμ΄μ…˜ λ²„νŠΌ */} +
+ + + +
+ + + ); +}; + +export default TableStep; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/ConnectionLine.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/ConnectionLine.tsx new file mode 100644 index 00000000..b0735f1c --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/ConnectionLine.tsx @@ -0,0 +1,152 @@ +"use client"; + +import React, { useState } from "react"; +import { X } from "lucide-react"; + +interface ConnectionLineProps { + id: string; + fromX: number; + fromY: number; + toX: number; + toY: number; + isValid: boolean; + mapping: any; + onDelete: () => void; +} + +/** + * πŸ”— SVG μ—°κ²°μ„  μ»΄ν¬λ„ŒνŠΈ + * - 베지어 κ³‘μ„ μœΌλ‘œ λΆ€λ“œλŸ¬μš΄ μ—°κ²°μ„  ν‘œμ‹œ + * - μœ νš¨μ„±μ— λ”°λ₯Έ 색상 λ³€κ²½ + * - ν˜Έλ²„ μ‹œ μ‚­μ œ λ²„νŠΌ ν‘œμ‹œ + */ +const ConnectionLine: React.FC = ({ id, fromX, fromY, toX, toY, isValid, mapping, onDelete }) => { + const [isHovered, setIsHovered] = useState(false); + + // 베지어 곑선 μ œμ–΄μ  계산 + const controlPointOffset = Math.abs(toX - fromX) * 0.5; + const controlPoint1X = fromX + controlPointOffset; + const controlPoint1Y = fromY; + const controlPoint2X = toX - controlPointOffset; + const controlPoint2Y = toY; + + // 패슀 생성 + const pathData = `M ${fromX} ${fromY} C ${controlPoint1X} ${controlPoint1Y}, ${controlPoint2X} ${controlPoint2Y}, ${toX} ${toY}`; + + // 색상 κ²°μ • + const strokeColor = isValid + ? isHovered + ? "#10b981" // green-500 hover + : "#22c55e" // green-500 + : isHovered + ? "#f97316" // orange-500 hover + : "#fb923c"; // orange-400 + + // 쀑간점 계산 (μ‚­μ œ λ²„νŠΌ μœ„μΉ˜) + const midX = (fromX + toX) / 2; + const midY = (fromY + toY) / 2; + + return ( + + {/* μ—°κ²°μ„  - 더 λΆ€λ“œλŸ½κ³  덜 λ°©ν•΄λ˜λŠ” μŠ€νƒ€μΌ */} + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ pointerEvents: "stroke" }} + /> + + {/* μ—°κ²°μ„  μœ„μ˜ 투λͺ…ν•œ 넓은 μ˜μ—­ (ν˜Έλ²„ κ°μ§€μš©) */} + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ pointerEvents: "stroke" }} + /> + + {/* μ‹œμž‘μ  원 */} + + + {/* 끝점 원 */} + + + {/* ν˜Έλ²„ μ‹œ μ‚­μ œ λ²„νŠΌ */} + {isHovered && ( + + {/* μ‚­μ œ λ²„νŠΌ λ°°κ²½ */} + { + e.stopPropagation(); + onDelete(); + }} + style={{ pointerEvents: "all" }} + /> + + {/* X μ•„μ΄μ½˜ */} + { + e.stopPropagation(); + onDelete(); + }} + style={{ pointerEvents: "all" }} + > + + + + )} + + {/* 맀핑 정보 툴팁 (ν˜Έλ²„ μ‹œ) */} + {isHovered && ( + + + + {mapping.fromField.webType} β†’ {mapping.toField.webType} + + + )} + + ); +}; + +export default ConnectionLine; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx new file mode 100644 index 00000000..44853bb5 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx @@ -0,0 +1,194 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Badge } from "@/components/ui/badge"; +import { Link, GripVertical } from "lucide-react"; + +// νƒ€μž… import +import { ColumnInfo } from "@/lib/types/multiConnection"; + +interface FieldColumnProps { + fields: ColumnInfo[]; + type: "from" | "to"; + selectedField: ColumnInfo | null; + onFieldSelect: (field: ColumnInfo | null) => void; + onFieldPositionUpdate: (fieldId: string, element: HTMLElement) => void; + isFieldMapped: (field: ColumnInfo, type: "from" | "to") => boolean; + onDragStart?: (field: ColumnInfo) => void; + onDragEnd?: () => void; + onDrop?: (targetField: ColumnInfo, sourceField: ColumnInfo) => void; + isDragOver?: boolean; + draggedField?: ColumnInfo | null; +} + +/** + * πŸ“‹ ν•„λ“œ 컬럼 μ»΄ν¬λ„ŒνŠΈ + * - ν•„λ“œ λͺ©λ‘ ν‘œμ‹œ + * - 선택 μƒνƒœ 관리 + * - μœ„μΉ˜ 정보 μ—…λ°μ΄νŠΈ + */ +const FieldColumn: React.FC = ({ + fields, + type, + selectedField, + onFieldSelect, + onFieldPositionUpdate, + isFieldMapped, + onDragStart, + onDragEnd, + onDrop, + isDragOver, + draggedField, +}) => { + const fieldRefs = useRef>({}); + + // ν•„λ“œ μœ„μΉ˜ μ—…λ°μ΄νŠΈ + useEffect(() => { + const updatePositions = () => { + Object.entries(fieldRefs.current).forEach(([fieldId, element]) => { + if (element) { + onFieldPositionUpdate(fieldId, element); + } + }); + }; + + // μ•½κ°„μ˜ 지연을 두어 DOM이 μ™„μ „νžˆ λ Œλ”λ§λœ ν›„ μœ„μΉ˜ μ—…λ°μ΄νŠΈ + const timeoutId = setTimeout(updatePositions, 100); + + return () => clearTimeout(timeoutId); + }, [fields.length]); // fields λ°°μ—΄ λŒ€μ‹  length만 μ˜μ‘΄μ„±μœΌλ‘œ μ‚¬μš© + + // λ“œλž˜κ·Έ μ•€ λ“œλ‘­ ν•Έλ“€λŸ¬ + const handleDragStart = (e: React.DragEvent, field: ColumnInfo) => { + if (type === "from" && onDragStart) { + e.dataTransfer.setData("text/plain", JSON.stringify(field)); + e.dataTransfer.effectAllowed = "copy"; + onDragStart(field); + } + }; + + const handleDragEnd = (e: React.DragEvent) => { + if (onDragEnd) { + onDragEnd(); + } + }; + + const handleDragOver = (e: React.DragEvent) => { + if (type === "to") { + e.preventDefault(); + e.dataTransfer.dropEffect = "copy"; + } + }; + + const handleDrop = (e: React.DragEvent, targetField: ColumnInfo) => { + if (type === "to" && onDrop) { + e.preventDefault(); + + // 이미 λ§€ν•‘λœ TO ν•„λ“œμΈμ§€ 확인 + const isMapped = isFieldMapped(targetField, "to"); + if (isMapped) { + // 이미 λ§€ν•‘λœ ν•„λ“œμ—λŠ” λ“œλ‘­ν•  수 μ—†μŒμ„ μ‹œκ°μ μœΌλ‘œ ν‘œμ‹œ + return; + } + + try { + const sourceFieldData = e.dataTransfer.getData("text/plain"); + const sourceField = JSON.parse(sourceFieldData) as ColumnInfo; + onDrop(targetField, sourceField); + } catch (error) { + console.error("λ“œλ‘­ 처리 쀑 였λ₯˜:", error); + } + } + }; + + // ν•„λ“œ λ Œλ”λ§ + const renderField = (field: ColumnInfo, index: number) => { + const fieldId = `${type}_${field.columnName}`; + const isSelected = selectedField?.columnName === field.columnName; + const isMapped = isFieldMapped(field, type); + const displayName = field.displayName || field.columnName; + const isDragging = draggedField?.columnName === field.columnName; + const isDropTarget = type === "to" && isDragOver && draggedField && !isMapped; + const isBlockedDropTarget = type === "to" && isDragOver && draggedField && isMapped; + + return ( +
{ + if (el) { + fieldRefs.current[fieldId] = el; + } + }} + className={`relative cursor-pointer rounded-lg border p-3 transition-all duration-200 ${ + isDragging + ? "border-primary bg-primary/20 scale-105 transform opacity-50 shadow-lg" + : isSelected + ? "border-primary bg-primary/10 shadow-md" + : isMapped + ? "border-green-500 bg-green-50 shadow-sm" + : isBlockedDropTarget + ? "border-red-400 bg-red-50 shadow-md" + : isDropTarget + ? "border-blue-400 bg-blue-50 shadow-md" + : "border-border hover:bg-muted/50 hover:shadow-sm" + } `} + draggable={type === "from" && !isMapped} + onDragStart={(e) => handleDragStart(e, field)} + onDragEnd={handleDragEnd} + onDragOver={handleDragOver} + onDrop={(e) => handleDrop(e, field)} + onClick={() => onFieldSelect(isSelected ? null : field)} + > + {/* 연결점 ν‘œμ‹œ */} +
+ +
+
+ {type === "from" && !isMapped && } + {displayName} + {isMapped && } +
+ + {field.webType || field.dataType || "unknown"} + +
+ + {field.description &&

{field.description}

} + + {/* 선택 μƒνƒœ ν‘œμ‹œ */} + {isSelected &&
} +
+ ); + }; + + return ( +
+ +
+ {fields.map((field, index) => renderField(field, index))} + + {fields.length === 0 && ( +
+

ν•„λ“œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

+

ν…Œμ΄λΈ”μ„ μ„ νƒν•΄μ£Όμ„Έμš”.

+
+ )} +
+ +
+ ); +}; + +export default FieldColumn; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx new file mode 100644 index 00000000..03f16dcb --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx @@ -0,0 +1,325 @@ +"use client"; + +import React, { useState, useRef, useEffect, useCallback } from "react"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Search, Link, Unlink } from "lucide-react"; +import { toast } from "sonner"; + +// νƒ€μž… import +import { ColumnInfo } from "@/lib/types/multiConnection"; +import { FieldMapping, FieldMappingCanvasProps } from "../../types/redesigned"; + +// μ»΄ν¬λ„ŒνŠΈ import +import FieldColumn from "./FieldColumn"; +import MappingControls from "./MappingControls"; + +/** + * 🎨 μ‹œκ°μ  ν•„λ“œ 맀핑 μΊ”λ²„μŠ€ + * - SVG 기반 μ—°κ²°μ„  ν‘œμ‹œ + * - λ“œλž˜κ·Έ μ•€ λ“œλ‘­ 지원 (ν–₯ν›„) + * - μ‹€μ‹œκ°„ μ—°κ²°μ„  μ—…λ°μ΄νŠΈ + */ +const FieldMappingCanvas: React.FC = ({ + fromFields, + toFields, + mappings, + onCreateMapping, + onDeleteMapping, +}) => { + const [fromSearch, setFromSearch] = useState(""); + const [toSearch, setToSearch] = useState(""); + const [selectedFromField, setSelectedFromField] = useState(null); + const [selectedToField, setSelectedToField] = useState(null); + const [fieldPositions, setFieldPositions] = useState>({}); + + // λ“œλž˜κ·Έ μ•€ λ“œλ‘­ μƒνƒœ + const [draggedField, setDraggedField] = useState(null); + const [isDragOver, setIsDragOver] = useState(false); + + const canvasRef = useRef(null); + const fromColumnRef = useRef(null); + const toColumnRef = useRef(null); + const fieldRefs = useRef>({}); + + // ν•„λ“œ 필터링 - μ•ˆμ „ν•œ λ°°μ—΄ 처리 + const safeFromFields = Array.isArray(fromFields) ? fromFields : []; + const safeToFields = Array.isArray(toFields) ? toFields : []; + + const filteredFromFields = safeFromFields.filter((field) => { + const fieldName = field.displayName || field.columnName || ""; + return fieldName.toLowerCase().includes(fromSearch.toLowerCase()); + }); + + const filteredToFields = safeToFields.filter((field) => { + const fieldName = field.displayName || field.columnName || ""; + return fieldName.toLowerCase().includes(toSearch.toLowerCase()); + }); + + // 맀핑 생성 + const handleCreateMapping = useCallback(() => { + if (selectedFromField && selectedToField) { + // μ•ˆμ „ν•œ 맀핑 λ°°μ—΄ 처리 + const safeMappings = Array.isArray(mappings) ? mappings : []; + + // N:1 맀핑 방지 - TO ν•„λ“œκ°€ 이미 λ§€ν•‘λ˜μ–΄ μžˆλŠ”μ§€ 확인 + const existingToMapping = safeMappings.find((m) => m.toField.columnName === selectedToField.columnName); + + if (existingToMapping) { + toast.error( + `λŒ€μƒ ν•„λ“œ '${selectedToField.displayName || selectedToField.columnName}'λŠ” 이미 λ§€ν•‘λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.\nN:1 맀핑은 ν—ˆμš©λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.`, + ); + setSelectedFromField(null); + setSelectedToField(null); + return; + } + + // λ™μΌν•œ 맀핑 쀑볡 체크 + const existingMapping = safeMappings.find( + (m) => + m.fromField.columnName === selectedFromField.columnName && + m.toField.columnName === selectedToField.columnName, + ); + + if (existingMapping) { + setSelectedFromField(null); + setSelectedToField(null); + return; + } + + onCreateMapping(selectedFromField, selectedToField); + setSelectedFromField(null); + setSelectedToField(null); + } + }, [selectedFromField, selectedToField, mappings, onCreateMapping]); + + // λ“œλž˜κ·Έ μ•€ λ“œλ‘­ ν•Έλ“€λŸ¬λ“€ + const handleDragStart = useCallback((field: ColumnInfo) => { + setDraggedField(field); + setSelectedFromField(field); // λ“œλž˜κ·Έ μ‹œμž‘ μ‹œ 선택 μƒνƒœλ‘œ ν‘œμ‹œ + }, []); + + const handleDragEnd = useCallback(() => { + setDraggedField(null); + setIsDragOver(false); + }, []); + + // λ“œλž˜κ·Έ μ˜€λ²„ μƒνƒœ 관리 + useEffect(() => { + if (draggedField) { + setIsDragOver(true); + } else { + setIsDragOver(false); + } + }, [draggedField]); + + const handleDrop = useCallback( + (targetField: ColumnInfo, sourceField: ColumnInfo) => { + // μ•ˆμ „ν•œ 맀핑 λ°°μ—΄ 처리 + const safeMappings = Array.isArray(mappings) ? mappings : []; + + // N:1 맀핑 방지 - TO ν•„λ“œκ°€ 이미 λ§€ν•‘λ˜μ–΄ μžˆλŠ”μ§€ 확인 + const existingToMapping = safeMappings.find((m) => m.toField.columnName === targetField.columnName); + + if (existingToMapping) { + toast.error( + `λŒ€μƒ ν•„λ“œ '${targetField.displayName || targetField.columnName}'λŠ” 이미 λ§€ν•‘λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.\nN:1 맀핑은 ν—ˆμš©λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.`, + ); + setDraggedField(null); + setIsDragOver(false); + return; + } + + // λ™μΌν•œ 맀핑 쀑볡 체크 + const existingMapping = mappings.find( + (m) => m.fromField.columnName === sourceField.columnName && m.toField.columnName === targetField.columnName, + ); + + if (existingMapping) { + setDraggedField(null); + setIsDragOver(false); + return; + } + + // 맀핑 생성 + onCreateMapping(sourceField, targetField); + + // μƒνƒœ μ΄ˆκΈ°ν™” + setDraggedField(null); + setIsDragOver(false); + setSelectedFromField(null); + setSelectedToField(null); + }, + [mappings, onCreateMapping], + ); + + // ν•„λ“œ μœ„μΉ˜ μ—…λ°μ΄νŠΈ (λ©”λͺ¨μ΄μ œμ΄μ…˜) + const updateFieldPosition = useCallback((fieldId: string, element: HTMLElement) => { + if (!canvasRef.current) return; + + // fieldRefs에 μ €μž₯ + fieldRefs.current[fieldId] = element; + + const canvasRect = canvasRef.current.getBoundingClientRect(); + const fieldRect = element.getBoundingClientRect(); + + const x = fieldRect.left - canvasRect.left + fieldRect.width / 2; + const y = fieldRect.top - canvasRect.top + fieldRect.height / 2; + + setFieldPositions((prev) => { + // μœ„μΉ˜κ°€ μ‹€μ œλ‘œ λ³€κ²½λœ κ²½μš°μ—λ§Œ μ—…λ°μ΄νŠΈ + const currentPos = prev[fieldId]; + if (currentPos && Math.abs(currentPos.x - x) < 1 && Math.abs(currentPos.y - y) < 1) { + return prev; + } + + return { + ...prev, + [fieldId]: { x, y }, + }; + }); + }, []); + + // 슀크둀 이벀트 λ¦¬μŠ€λ„ˆλ‘œ μ—°κ²°μ„  μœ„μΉ˜ μ—…λ°μ΄νŠΈ + useEffect(() => { + const updatePositionsOnScroll = () => { + // λͺ¨λ“  ν•„λ“œμ˜ μœ„μΉ˜λ₯Ό λ‹€μ‹œ 계산 + Object.entries(fieldRefs.current || {}).forEach(([fieldId, element]) => { + if (element) { + updateFieldPosition(fieldId, element); + } + }); + }; + + // 슀크둀 κ°€λŠ₯ν•œ μ˜μ—­λ“€μ— 이벀트 λ¦¬μŠ€λ„ˆ μΆ”κ°€ + const scrollAreas = document.querySelectorAll("[data-radix-scroll-area-viewport]"); + + scrollAreas.forEach((area) => { + area.addEventListener("scroll", updatePositionsOnScroll, { passive: true }); + }); + + // μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ μ‹œμ—λ„ μœ„μΉ˜ μ—…λ°μ΄νŠΈ + window.addEventListener("resize", updatePositionsOnScroll, { passive: true }); + + return () => { + scrollAreas.forEach((area) => { + area.removeEventListener("scroll", updatePositionsOnScroll); + }); + window.removeEventListener("resize", updatePositionsOnScroll); + }; + }, [updateFieldPosition]); + + // 맀핑 μ—¬λΆ€ 확인 + const isFieldMapped = useCallback( + (field: ColumnInfo, type: "from" | "to") => { + return mappings.some((mapping) => + type === "from" + ? mapping.fromField.columnName === field.columnName + : mapping.toField.columnName === field.columnName, + ); + }, + [mappings], + ); + + // μ—°κ²°μ„  데이터 생성 + + return ( +
+ {/* 맀핑 생성 컨트둀 */} +
+ +
+ + {/* ν•„λ“œ 맀핑 μ˜μ—­ */} +
+ {/* FROM ν•„λ“œ 컬럼 */} +
+
+

FROM ν•„λ“œ

+ + {filteredFromFields.length}개 + +
+ +
+ + setFromSearch(e.target.value)} + className="h-8 pl-9" + /> +
+ +
+ +
+
+ + {/* TO ν•„λ“œ 컬럼 */} +
+
+

TO ν•„λ“œ

+ + {filteredToFields.length}개 + +
+ +
+ + setToSearch(e.target.value)} + className="h-8 pl-9" + /> +
+ +
+ +
+
+
+ + {/* 맀핑 κ·œμΉ™ μ•ˆλ‚΄ */} +
+

πŸ“‹ 맀핑 κ·œμΉ™

+
+

βœ… 1:N 맀핑 ν—ˆμš© (ν•˜λ‚˜μ˜ μ†ŒμŠ€ ν•„λ“œλ₯Ό μ—¬λŸ¬ λŒ€μƒ ν•„λ“œμ— 맀핑)

+

❌ N:1 맀핑 κΈˆμ§€ (μ—¬λŸ¬ μ†ŒμŠ€ ν•„λ“œλ₯Ό ν•˜λ‚˜μ˜ λŒ€μƒ ν•„λ“œμ— 맀핑 λΆˆκ°€)

+

πŸ”’ 이미 λ§€ν•‘λœ λŒ€μƒ ν•„λ“œλŠ” μΆ”κ°€ 맀핑이 μ°¨λ‹¨λ©λ‹ˆλ‹€

+

πŸ”— {mappings.length}개 연결됨

+
+
+
+ ); +}; + +export default FieldMappingCanvas; diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx new file mode 100644 index 00000000..570ac517 --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx @@ -0,0 +1,117 @@ +"use client"; + +import React from "react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Link, ArrowRight, MousePointer, Move } from "lucide-react"; + +// νƒ€μž… import +import { ColumnInfo } from "@/lib/types/multiConnection"; + +interface MappingControlsProps { + selectedFromField: ColumnInfo | null; + selectedToField: ColumnInfo | null; + onCreateMapping: () => void; + canCreate: boolean; +} + +/** + * 🎯 맀핑 생성 컨트둀 + * - μ„ νƒλœ ν•„λ“œ ν‘œμ‹œ + * - 맀핑 생성 λ²„νŠΌ + * - μ‹œκ°μ  ν”Όλ“œλ°± + */ +const MappingControls: React.FC = ({ + selectedFromField, + selectedToField, + onCreateMapping, + canCreate, +}) => { + // μ•ˆλ‚΄ λ©”μ‹œμ§€ ν‘œμ‹œ μ—¬λΆ€ + const showGuidance = !selectedFromField && !selectedToField; + + if (showGuidance) { + return ( +
+
+
+ + 클릭으둜 선택 +
+
λ˜λŠ”
+
+ + λ“œλž˜κ·Έ μ•€ λ“œλ‘­μœΌλ‘œ 맀핑 +
+
+
+ ); + } + + return ( +
+
+
+ μ„ νƒλœ ν•„λ“œ: +
+ {/* FROM ν•„λ“œ */} + + FROM: {selectedFromField?.displayName || selectedFromField?.columnName || "μ—†μŒ"} + + + {/* ν™”μ‚΄ν‘œ */} + + + {/* TO ν•„λ“œ */} + + TO: {selectedToField?.displayName || selectedToField?.columnName || "μ—†μŒ"} + +
+
+ + {/* νƒ€μž… ν˜Έν™˜μ„± ν‘œμ‹œ */} + {selectedFromField && selectedToField && ( +
+
+ νƒ€μž…: + + {selectedFromField.webType || "unknown"} + + + + {selectedToField.webType || "unknown"} + + {/* νƒ€μž… ν˜Έν™˜μ„± μ•„μ΄μ½˜ */} + {selectedFromField.webType === selectedToField.webType ? ( + βœ… + ) : ( + ⚠️ + )} +
+
+ )} +
+ + {/* 맀핑 생성 λ²„νŠΌ */} + +
+ ); +}; + +export default MappingControls; diff --git a/frontend/components/dataflow/connection/redesigned/SaveRelationshipDialog.tsx b/frontend/components/dataflow/connection/redesigned/SaveRelationshipDialog.tsx new file mode 100644 index 00000000..4627f01e --- /dev/null +++ b/frontend/components/dataflow/connection/redesigned/SaveRelationshipDialog.tsx @@ -0,0 +1,150 @@ +"use client"; + +import React, { useState } from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { CheckCircle, Save } from "lucide-react"; + +interface SaveRelationshipDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + onSave: (relationshipName: string, description?: string) => void; + actionType: "insert" | "update" | "delete" | "upsert"; + fromTable?: string; + toTable?: string; +} + +/** + * πŸ’Ύ 관계 μ €μž₯ λ‹€μ΄μ–Όλ‘œκ·Έ + * - 관계 이름 μž…λ ₯ + * - μ„€λͺ… μž…λ ₯ (선택사항) + * - μ•‘μ…˜ νƒ€μž…λ³„ μ œμ•ˆ 이름 + */ +const SaveRelationshipDialog: React.FC = ({ + open, + onOpenChange, + onSave, + actionType, + fromTable, + toTable, +}) => { + const [relationshipName, setRelationshipName] = useState(""); + const [description, setDescription] = useState(""); + + // μ•‘μ…˜ νƒ€μž…λ³„ μ œμ•ˆ 이름 생성 + const generateSuggestedName = () => { + if (!fromTable || !toTable) return ""; + + const actionMap = { + insert: "μž…λ ₯", + update: "μˆ˜μ •", + delete: "μ‚­μ œ", + upsert: "병합", + }; + + return `${fromTable}_${toTable}_${actionMap[actionType]}`; + }; + + const handleSave = () => { + if (!relationshipName.trim()) return; + + onSave(relationshipName.trim(), description.trim() || undefined); + onOpenChange(false); + + // 폼 μ΄ˆκΈ°ν™” + setRelationshipName(""); + setDescription(""); + }; + + const handleSuggestName = () => { + const suggested = generateSuggestedName(); + if (suggested) { + setRelationshipName(suggested); + } + }; + + return ( + + + + + + 관계 μ €μž₯ + + 데이터 μ—°κ²° κ΄€κ³„μ˜ 이름과 μ„€λͺ…을 μž…λ ₯ν•˜μ„Έμš”. + + +
+ {/* 관계 이름 */} +
+ +
+ setRelationshipName(e.target.value)} + className="flex-1" + /> + +
+
+ + {/* μ„€λͺ… (선택사항) */} +
+ +