외부호출 기능(rest API)

frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx

@@ -30,54 +30,70 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
             <ConnectionTypeSelector selectedType={state.connectionType} onTypeChange={actions.setConnectionType} />
           </div>
 
-          <Separator />
+          {/* 외부호출이 아닐 때만 매핑과 액션 설정 표시 */}
+          {state.connectionType !== "external_call" && (
+            <>
+              <Separator />
 
-          {/* 매핑 상세 목록 */}
-          {(() => {
-            // 액션 그룹에서 모든 매핑 수집
-            const allMappings = state.actionGroups.flatMap((group) =>
-              group.actions.flatMap((action) => action.fieldMappings || []),
-            );
+              {/* 매핑 상세 목록 */}
+              {(() => {
+                // 액션 그룹에서 모든 매핑 수집
+                const allMappings = state.actionGroups.flatMap((group) =>
+                  group.actions.flatMap((action) => action.fieldMappings || []),
+                );
 
-            // 기존 fieldMappings와 병합 (중복 제거)
-            const combinedMappings = [...state.fieldMappings, ...allMappings];
-            const uniqueMappings = combinedMappings.filter(
-              (mapping, index, arr) => arr.findIndex((m) => m.id === mapping.id) === index,
-            );
+                // 기존 fieldMappings와 병합 (중복 제거)
+                const combinedMappings = [...state.fieldMappings, ...allMappings];
+                const uniqueMappings = combinedMappings.filter(
+                  (mapping, index, arr) => arr.findIndex((m) => m.id === mapping.id) === index,
+                );
 
-            console.log("🔍 LeftPanel - 매핑 데이터 수집:", {
-              stateFieldMappings: state.fieldMappings,
-              actionGroupMappings: allMappings,
-              combinedMappings: uniqueMappings,
-            });
+                console.log("🔍 LeftPanel - 매핑 데이터 수집:", {
+                  stateFieldMappings: state.fieldMappings,
+                  actionGroupMappings: allMappings,
+                  combinedMappings: uniqueMappings,
+                });
 
-            return (
-              uniqueMappings.length > 0 && (
-                <>
-                  <div>
-                    <h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
-                    <MappingDetailList
-                      mappings={uniqueMappings}
-                      selectedMapping={state.selectedMapping}
-                      onSelectMapping={(mappingId) => {
-                        // TODO: 선택된 매핑 상태 업데이트
-                      }}
-                      onUpdateMapping={actions.updateMapping}
-                      onDeleteMapping={actions.deleteMapping}
-                    />
-                  </div>
+                return (
+                  uniqueMappings.length > 0 && (
+                    <>
+                      <div>
+                        <h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
+                        <MappingDetailList
+                          mappings={uniqueMappings}
+                          selectedMapping={state.selectedMapping}
+                          onSelectMapping={(mappingId) => {
+                            // TODO: 선택된 매핑 상태 업데이트
+                          }}
+                          onUpdateMapping={actions.updateMapping}
+                          onDeleteMapping={actions.deleteMapping}
+                        />
+                      </div>
 
-                  <Separator />
-                </>
-              )
-            );
-          })()}
+                      <Separator />
+                    </>
+                  )
+                );
+              })()}
 
-          {/* 액션 설정 요약 */}
-          <div>
-            <h3 className="text-muted-foreground mb-2 text-sm font-medium">액션 설정</h3>
-            <ActionSummaryPanel state={state} />
-          </div>
+              {/* 액션 설정 요약 */}
+              <div>
+                <h3 className="text-muted-foreground mb-2 text-sm font-medium">액션 설정</h3>
+                <ActionSummaryPanel state={state} />
+              </div>
+            </>
+          )}
+
+          {/* 외부호출일 때는 간단한 설명만 표시 */}
+          {state.connectionType === "external_call" && (
+            <>
+              <Separator />
+              <div className="rounded-md bg-blue-50 p-3">
+                <h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
+                <p className="text-xs text-blue-600">우측 패널에서 REST API 설정을 구성하세요.</p>
+              </div>
+            </>
+          )}
         </div>
       </ScrollArea>
     </div>