Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx

@@ -273,7 +273,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                   .map((column) => (
                     <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                       <div className="flex items-center gap-2">
-                        <span className="text-blue-600">📤</span>
+                        <span className="text-primary">📤</span>
                         <span>{column.displayName || column.columnName}</span>
                         <Badge variant="outline" className="text-xs">
                           {column.webType || column.dataType}
@@ -359,7 +359,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
 
           {/* 선택된 날짜 타입에 대한 설명 */}
           {mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
-            <div className="text-muted-foreground rounded bg-blue-50 p-2 text-xs">
+            <div className="text-muted-foreground rounded bg-accent p-2 text-xs">
               {mapping.value === "#NOW" && "⏰ 현재 날짜와 시간이 저장됩니다"}
               {mapping.value === "#TODAY" && "📅 현재 날짜 (00:00:00)가 저장됩니다"}
               {mapping.value === "#YESTERDAY" && "📅 어제 날짜가 저장됩니다"}
@@ -497,7 +497,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                             .map((column) => (
                               <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                                 <div className="flex items-center gap-2">
-                                  <span className="text-blue-600">📤</span>
+                                  <span className="text-primary">📤</span>
                                   <span>{column.displayName || column.columnName}</span>
                                 </div>
                               </SelectItem>
@@ -625,7 +625,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                                       .map((column) => (
                                         <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                                           <div className="flex items-center gap-2">
-                                            <span className="text-blue-600">📤</span>
+                                            <span className="text-primary">📤</span>
                                             <span>{column.displayName || column.columnName}</span>
                                           </div>
                                         </SelectItem>

frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx

@@ -1,416 +1,187 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
-import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { ArrowRight, Database, Globe, Loader2, AlertTriangle, CheckCircle } from "lucide-react";
-import { toast } from "sonner";
-
-// API import
-import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection";
-import { checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
-
-// 타입 import
-import { Connection } from "@/lib/types/multiConnection";
+import React, { useState } from "react";
+import { Database, ArrowRight, CheckCircle } from "lucide-react";
+import { Connection } from "../types/redesigned";
 
 interface ConnectionStepProps {
-  connectionType: "data_save" | "external_call";
   fromConnection?: Connection;
   toConnection?: Connection;
-  relationshipName?: string;
-  description?: string;
-  diagramId?: number; // 🔧 수정 모드 감지용
-  onSelectConnection: (type: "from" | "to", connection: Connection) => void;
-  onSetRelationshipName: (name: string) => void;
-  onSetDescription: (description: string) => void;
+  onFromConnectionChange: (connection: Connection) => void;
+  onToConnectionChange: (connection: Connection) => void;
   onNext: () => void;
 }
 
-/**
- * 🔗 1단계: 연결 선택
- * - FROM/TO 데이터베이스 연결 선택
- * - 연결 상태 표시
- * - 지연시간 정보
- */
-const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
-  ({
-    connectionType,
-    fromConnection,
-    toConnection,
-    relationshipName,
-    description,
-    diagramId,
-    onSelectConnection,
-    onSetRelationshipName,
-    onSetDescription,
-    onNext,
-  }) => {
-    const [connections, setConnections] = useState<Connection[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [nameCheckStatus, setNameCheckStatus] = useState<"idle" | "checking" | "valid" | "duplicate">("idle");
-
-    // 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,
-    });
-
-    // 🔍 관계명 중복 체크 (디바운스 적용)
-    const checkNameDuplicate = useCallback(
-      async (name: string) => {
-        if (!name.trim()) {
-          setNameCheckStatus("idle");
-          return;
-        }
-
-        setNameCheckStatus("checking");
-
-        try {
-          const result = await checkRelationshipNameDuplicate(name, diagramId);
-          setNameCheckStatus(result.isDuplicate ? "duplicate" : "valid");
-
-          if (result.isDuplicate) {
-            toast.warning(`"${name}" 이름이 이미 사용 중입니다. (${result.duplicateCount}개 발견)`);
-          }
-        } catch (error) {
-          console.error("중복 체크 실패:", error);
-          setNameCheckStatus("idle");
-        }
-      },
-      [diagramId],
-    );
-
-    // 관계명 변경 시 중복 체크 (디바운스)
-    useEffect(() => {
-      if (!relationshipName) {
-        setNameCheckStatus("idle");
-        return;
-      }
-
-      const timeoutId = setTimeout(() => {
-        checkNameDuplicate(relationshipName);
-      }, 500); // 500ms 디바운스
-
-      return () => clearTimeout(timeoutId);
-    }, [relationshipName, checkNameDuplicate]);
-
-    // 연결 목록 로드
-    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 ? <Database className="h-4 w-4" /> : <Globe className="h-4 w-4" />;
-    };
-
-    const getConnectionBadge = (connection: Connection) => {
-      if (connection.id === 0) {
-        return (
-          <Badge variant="default" className="text-xs">
-            메인 DB
-          </Badge>
-        );
-      }
-      return (
-        <Badge variant="secondary" className="text-xs">
-          {connection.type?.toUpperCase()}
-        </Badge>
-      );
-    };
-
-    return (
-      <>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Database className="h-5 w-5" />
-            1단계: 연결 선택
-          </CardTitle>
-          <p className="text-muted-foreground text-sm">
-            {connectionType === "data_save"
-              ? "데이터를 저장할 소스와 대상 데이터베이스를 선택하세요."
-              : "외부 호출을 위한 소스와 대상 연결을 선택하세요."}
-          </p>
-        </CardHeader>
-
-        <CardContent className="max-h-[calc(100vh-400px)] min-h-[400px] space-y-6 overflow-y-auto">
-          {/* 관계 정보 입력 */}
-          <div className="bg-muted/30 space-y-4 rounded-lg border p-4">
-            <h3 className="font-medium">관계 정보</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="relationshipName">관계 이름 *</Label>
-                <div className="relative">
-                  <Input
-                    id="relationshipName"
-                    placeholder="예: 사용자 데이터 동기화"
-                    value={relationshipName || ""}
-                    onChange={(e) => onSetRelationshipName(e.target.value)}
-                    className={`pr-10 ${
-                      nameCheckStatus === "duplicate"
-                        ? "border-red-500 focus:border-red-500"
-                        : nameCheckStatus === "valid"
-                          ? "border-green-500 focus:border-green-500"
-                          : ""
-                    }`}
-                  />
-                  <div className="absolute top-1/2 right-3 -translate-y-1/2">
-                    {nameCheckStatus === "checking" && (
-                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
-                    )}
-                    {nameCheckStatus === "valid" && <CheckCircle className="h-4 w-4 text-green-500" />}
-                    {nameCheckStatus === "duplicate" && <AlertTriangle className="h-4 w-4 text-red-500" />}
-                  </div>
-                </div>
-                {nameCheckStatus === "duplicate" && <p className="text-sm text-red-600">이미 사용 중인 이름입니다.</p>}
-                {nameCheckStatus === "valid" && <p className="text-sm text-green-600">사용 가능한 이름입니다.</p>}
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="description">설명</Label>
-                <Textarea
-                  id="description"
-                  placeholder="이 관계에 대한 설명을 입력하세요"
-                  value={description || ""}
-                  onChange={(e) => onSetDescription(e.target.value)}
-                  rows={2}
-                />
-              </div>
-            </div>
-          </div>
-
-          {isLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="mr-2 h-6 w-6 animate-spin" />
-              <span>연결 목록을 불러오는 중...</span>
-            </div>
-          ) : (
-            <>
-              {/* FROM 연결 선택 */}
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-medium">FROM 연결 (소스)</h3>
-                  {fromConnection && (
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className="text-green-600">
-                        🟢 연결됨
-                      </Badge>
-                      <span className="text-muted-foreground text-xs">지연시간: ~23ms</span>
-                    </div>
-                  )}
-                </div>
-
-                <Select
-                  value={fromConnection?.id.toString() || ""}
-                  onValueChange={(value) => handleConnectionSelect("from", value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="소스 연결을 선택하세요" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {connections.length === 0 ? (
-                      <div className="text-muted-foreground p-4 text-center">연결 정보가 없습니다.</div>
-                    ) : (
-                      connections.map((connection, index) => (
-                        <SelectItem key={`from_${connection.id}_${index}`} value={connection.id.toString()}>
-                          <div className="flex items-center gap-2">
-                            {getConnectionIcon(connection)}
-                            <span>{connection.name}</span>
-                            {getConnectionBadge(connection)}
-                          </div>
-                        </SelectItem>
-                      ))
-                    )}
-                  </SelectContent>
-                </Select>
-
-                {fromConnection && (
-                  <div className="bg-muted/50 rounded-lg p-3">
-                    <div className="mb-2 flex items-center gap-2">
-                      {getConnectionIcon(fromConnection)}
-                      <span className="font-medium">{fromConnection.name}</span>
-                      {getConnectionBadge(fromConnection)}
-                    </div>
-                    <div className="text-muted-foreground space-y-1 text-xs">
-                      <p>
-                        호스트: {fromConnection.host}:{fromConnection.port}
-                      </p>
-                      <p>데이터베이스: {fromConnection.database}</p>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* TO 연결 선택 */}
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-medium">TO 연결 (대상)</h3>
-                  {toConnection && (
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className="text-green-600">
-                        🟢 연결됨
-                      </Badge>
-                      <span className="text-muted-foreground text-xs">지연시간: ~45ms</span>
-                    </div>
-                  )}
-                </div>
-
-                <Select
-                  value={toConnection?.id.toString() || ""}
-                  onValueChange={(value) => handleConnectionSelect("to", value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="대상 연결을 선택하세요" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {connections.length === 0 ? (
-                      <div className="text-muted-foreground p-4 text-center">연결 정보가 없습니다.</div>
-                    ) : (
-                      connections.map((connection, index) => (
-                        <SelectItem key={`to_${connection.id}_${index}`} value={connection.id.toString()}>
-                          <div className="flex items-center gap-2">
-                            {getConnectionIcon(connection)}
-                            <span>{connection.name}</span>
-                            {getConnectionBadge(connection)}
-                          </div>
-                        </SelectItem>
-                      ))
-                    )}
-                  </SelectContent>
-                </Select>
-
-                {toConnection && (
-                  <div className="bg-muted/50 rounded-lg p-3">
-                    <div className="mb-2 flex items-center gap-2">
-                      {getConnectionIcon(toConnection)}
-                      <span className="font-medium">{toConnection.name}</span>
-                      {getConnectionBadge(toConnection)}
-                    </div>
-                    <div className="text-muted-foreground space-y-1 text-xs">
-                      <p>
-                        호스트: {toConnection.host}:{toConnection.port}
-                      </p>
-                      <p>데이터베이스: {toConnection.database}</p>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 연결 매핑 표시 */}
-              {fromConnection && toConnection && (
-                <div className="bg-primary/5 border-primary/20 rounded-lg border p-4">
-                  <div className="flex items-center justify-center gap-4">
-                    <div className="text-center">
-                      <div className="font-medium">{fromConnection.name}</div>
-                      <div className="text-muted-foreground text-xs">소스</div>
-                    </div>
-
-                    <ArrowRight className="text-primary h-5 w-5" />
-
-                    <div className="text-center">
-                      <div className="font-medium">{toConnection.name}</div>
-                      <div className="text-muted-foreground text-xs">대상</div>
-                    </div>
-                  </div>
-
-                  <div className="mt-3 text-center">
-                    <Badge variant="outline" className="text-primary">
-                      💡 연결 매핑 설정 완료
-                    </Badge>
-                  </div>
-                </div>
-              )}
-
-              {/* 다음 단계 버튼 */}
-              <div className="flex justify-end pt-4">
-                <Button onClick={onNext} disabled={!canProceed} className="flex items-center gap-2">
-                  다음: 테이블 선택
-                  <ArrowRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </>
-    );
+// 임시 연결 데이터 (실제로는 API에서 가져올 것)
+const mockConnections: Connection[] = [
+  {
+    id: "conn1",
+    name: "메인 데이터베이스",
+    type: "PostgreSQL",
+    host: "localhost",
+    port: 5432,
+    database: "main_db",
+    username: "admin",
+    tables: []
   },
-);
+  {
+    id: "conn2", 
+    name: "외부 API",
+    type: "REST API",
+    host: "api.example.com",
+    port: 443,
+    database: "external",
+    username: "api_user",
+    tables: []
+  },
+  {
+    id: "conn3",
+    name: "백업 데이터베이스",
+    type: "MySQL",
+    host: "backup.local",
+    port: 3306,
+    database: "backup_db",
+    username: "backup_user",
+    tables: []
+  }
+];
 
-ConnectionStep.displayName = "ConnectionStep";
+export const ConnectionStep: React.FC<ConnectionStepProps> = ({
+  fromConnection,
+  toConnection,
+  onFromConnectionChange,
+  onToConnectionChange,
+  onNext,
+}) => {
+  const [selectedFrom, setSelectedFrom] = useState<string>(fromConnection?.id || "");
+  const [selectedTo, setSelectedTo] = useState<string>(toConnection?.id || "");
 
-export default ConnectionStep;
+  const handleFromSelect = (connectionId: string) => {
+    const connection = mockConnections.find(c => c.id === connectionId);
+    if (connection) {
+      setSelectedFrom(connectionId);
+      onFromConnectionChange(connection);
+    }
+  };
+
+  const handleToSelect = (connectionId: string) => {
+    const connection = mockConnections.find(c => c.id === connectionId);
+    if (connection) {
+      setSelectedTo(connectionId);
+      onToConnectionChange(connection);
+    }
+  };
+
+  const canProceed = selectedFrom && selectedTo && selectedFrom !== selectedTo;
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+          연결 선택
+        </h2>
+        <p className="text-muted-foreground">
+          데이터를 가져올 연결과 저장할 연결을 선택하세요
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* FROM 연결 */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold">1</span>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
+            <span className="text-sm text-gray-500">(데이터 소스)</span>
+          </div>
+          
+          <div className="space-y-2">
+            {mockConnections.map((connection) => (
+              <div
+                key={connection.id}
+                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
+                  selectedFrom === connection.id
+                    ? "border-primary bg-accent shadow-md"
+                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                }`}
+                onClick={() => handleFromSelect(connection.id)}
+              >
+                <div className="flex items-center gap-3">
+                  <Database className="w-6 h-6 text-primary" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <p className="text-sm text-muted-foreground">{connection.type}</p>
+                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                  </div>
+                  {selectedFrom === connection.id && (
+                    <CheckCircle className="w-5 h-5 text-primary" />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 화살표 */}
+        <div className="hidden lg:flex items-center justify-center">
+          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
+            <ArrowRight className="w-6 h-6 text-orange-600" />
+          </div>
+        </div>
+
+        {/* TO 연결 */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+              <span className="text-green-600 font-bold">2</span>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900">TO 연결</h3>
+            <span className="text-sm text-gray-500">(데이터 대상)</span>
+          </div>
+          
+          <div className="space-y-2">
+            {mockConnections.map((connection) => (
+              <div
+                key={connection.id}
+                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
+                  selectedTo === connection.id
+                    ? "border-green-500 bg-green-50 shadow-md"
+                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                }`}
+                onClick={() => handleToSelect(connection.id)}
+              >
+                <div className="flex items-center gap-3">
+                  <Database className="w-6 h-6 text-green-600" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <p className="text-sm text-muted-foreground">{connection.type}</p>
+                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                  </div>
+                  {selectedTo === connection.id && (
+                    <CheckCircle className="w-5 h-5 text-green-600" />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 다음 버튼 */}
+      <div className="flex justify-end">
+        <button
+          onClick={onNext}
+          disabled={!canProceed}
+          className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+            canProceed
+              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+        >
+          다음 단계: 테이블 선택
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx

@@ -148,7 +148,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
       <CardContent className="flex h-full flex-col overflow-hidden p-0">
         <div className="min-h-0 flex-1 space-y-6 overflow-y-auto p-4">
           {/* 제어 실행 조건 안내 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+          <div className="rounded-lg border border-primary/20 bg-accent p-4">
             <h4 className="mb-2 text-sm font-medium text-blue-800">제어 실행 조건이란?</h4>
             <div className="space-y-1 text-sm text-blue-700">
               <p>
@@ -363,7 +363,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
                           variant="ghost"
                           size="sm"
                           onClick={() => actions.deleteControlCondition(index)}
-                          className="text-red-600 hover:text-red-700"
+                          className="text-destructive hover:text-red-700"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>

frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx

@@ -1,199 +1,232 @@
 "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";
+import React, { useState } from "react";
+import { ArrowLeft, Save, CheckCircle, XCircle, AlertCircle } from "lucide-react";
+import { TableInfo, FieldMapping, ColumnInfo } from "../types/redesigned";
 
 interface FieldMappingStepProps {
   fromTable?: TableInfo;
   toTable?: TableInfo;
-  fromConnection?: Connection;
-  toConnection?: Connection;
   fieldMappings: FieldMapping[];
-  onCreateMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void;
-  onDeleteMapping: (mappingId: string) => void;
-  onNext: () => void;
+  onMappingsChange: (mappings: FieldMapping[]) => void;
   onBack: () => void;
+  onSave: () => void;
 }
 
-/**
- * 🎯 3단계: 시각적 필드 매핑
- * - SVG 기반 연결선 표시
- * - 드래그 앤 드롭 지원 (향후)
- * - 실시간 매핑 업데이트
- */
-const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
+export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
   fromTable,
   toTable,
-  fromConnection,
-  toConnection,
   fieldMappings,
-  onCreateMapping,
-  onDeleteMapping,
-  onNext,
+  onMappingsChange,
   onBack,
+  onSave,
 }) => {
-  const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
-  const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [draggedField, setDraggedField] = useState<ColumnInfo | null>(null);
 
-  // 컬럼 정보 로드
-  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);
-      }
+  const createMapping = (fromField: ColumnInfo, toField: ColumnInfo) => {
+    const mapping: FieldMapping = {
+      id: `${fromField.name}-${toField.name}`,
+      fromField,
+      toField,
+      isValid: fromField.type === toField.type,
+      validationMessage: fromField.type !== toField.type ? "타입이 다릅니다" : undefined
     };
 
-    loadColumns();
-  }, [fromConnection, toConnection, fromTable, toTable]);
+    const newMappings = [...fieldMappings, mapping];
+    onMappingsChange(newMappings);
+  };
 
-  if (isLoading) {
-    return (
-      <CardContent className="flex items-center justify-center py-12">
-        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
-        <span>필드 정보를 불러오는 중...</span>
-      </CardContent>
-    );
-  }
+  const removeMapping = (mappingId: string) => {
+    const newMappings = fieldMappings.filter(m => m.id !== mappingId);
+    onMappingsChange(newMappings);
+  };
+
+  const handleDragStart = (field: ColumnInfo) => {
+    setDraggedField(field);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent, toField: ColumnInfo) => {
+    e.preventDefault();
+    if (draggedField) {
+      createMapping(draggedField, toField);
+      setDraggedField(null);
+    }
+  };
+
+  const getMappedFromField = (toFieldName: string) => {
+    return fieldMappings.find(m => m.toField.name === toFieldName)?.fromField;
+  };
+
+  const isFieldMapped = (fieldName: string) => {
+    return fieldMappings.some(m => m.fromField.name === fieldName || m.toField.name === fieldName);
+  };
 
   return (
-    <>
-      <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2">
-          <Link className="h-5 w-5" />
-          3단계: 컬럼 매핑
-        </CardTitle>
-      </CardHeader>
+    <div className="space-y-8">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+          필드 매핑
+        </h2>
+        <p className="text-muted-foreground">
+          소스 테이블의 필드를 대상 테이블의 필드에 드래그하여 매핑하세요
+        </p>
+      </div>
 
-      <CardContent className="flex h-full flex-col p-0">
-        {/* 매핑 캔버스 - 전체 영역 사용 */}
-        <div className="min-h-0 flex-1 p-4">
-          {isLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <div className="text-muted-foreground">컬럼 정보를 불러오는 중...</div>
-            </div>
-          ) : fromColumns.length > 0 && toColumns.length > 0 ? (
-            <FieldMappingCanvas
-              fromFields={fromColumns}
-              toFields={toColumns}
-              mappings={fieldMappings}
-              onCreateMapping={onCreateMapping}
-              onDeleteMapping={onDeleteMapping}
-            />
-          ) : (
-            <div className="flex h-full flex-col items-center justify-center space-y-3">
-              <div className="text-muted-foreground">컬럼 정보를 찾을 수 없습니다.</div>
-              <div className="text-muted-foreground text-xs">
-                FROM 컬럼: {fromColumns.length}개, TO 컬럼: {toColumns.length}개
-              </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  console.log("🔄 수동 재로딩 시도");
-                  setFromColumns([]);
-                  setToColumns([]);
-                  // useEffect가 재실행되도록 강제 업데이트
-                  setIsLoading(true);
-                  setTimeout(() => setIsLoading(false), 100);
-                }}
-              >
-                다시 시도
-              </Button>
-            </div>
-          )}
+      {/* 매핑 통계 */}
+      <div className="grid grid-cols-4 gap-4">
+        <div className="bg-accent p-4 rounded-lg border border-primary/20">
+          <div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
+          <div className="text-sm text-blue-700">총 매핑</div>
         </div>
+        <div className="bg-green-50 p-4 rounded-lg border border-green-200">
+          <div className="text-2xl font-bold text-green-900">
+            {fieldMappings.filter(m => m.isValid).length}
+          </div>
+          <div className="text-sm text-green-700">유효한 매핑</div>
+        </div>
+        <div className="bg-destructive/10 p-4 rounded-lg border border-destructive/20">
+          <div className="text-2xl font-bold text-red-900">
+            {fieldMappings.filter(m => !m.isValid).length}
+          </div>
+          <div className="text-sm text-red-700">오류 매핑</div>
+        </div>
+        <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
+          <div className="text-2xl font-bold text-yellow-900">
+            {(toTable?.columns.length || 0) - fieldMappings.length}
+          </div>
+          <div className="text-sm text-yellow-700">미매핑 필드</div>
+        </div>
+      </div>
 
-        {/* 하단 네비게이션 - 고정 */}
-        <div className="flex-shrink-0 border-t bg-white p-4">
-          <div className="flex items-center justify-between">
-            <Button variant="outline" onClick={onBack} className="flex items-center gap-2">
-              <ArrowLeft className="h-4 w-4" />
-              이전
-            </Button>
-
-            <div className="text-muted-foreground text-sm">
-              {fieldMappings.length > 0 ? `${fieldMappings.length}개 매핑 완료` : "컬럼을 선택해서 매핑하세요"}
+      {/* 매핑 영역 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* FROM 테이블 필드들 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            <div className="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold text-sm">FROM</span>
             </div>
-
-            <Button onClick={onNext} disabled={fieldMappings.length === 0} className="flex items-center gap-2">
-              <CheckCircle className="h-4 w-4" />
-              저장
-            </Button>
+            {fromTable?.name} 필드들
+          </h3>
+          
+          <div className="space-y-2">
+            {fromTable?.columns.map((field) => (
+              <div
+                key={field.name}
+                draggable
+                onDragStart={() => handleDragStart(field)}
+                className={`p-3 rounded-lg border-2 cursor-move transition-all duration-200 ${
+                  isFieldMapped(field.name)
+                    ? "border-green-300 bg-green-50 opacity-60"
+                    : "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="font-medium text-gray-900">{field.name}</div>
+                    <div className="text-sm text-muted-foreground">{field.type}</div>
+                    {field.primaryKey && (
+                      <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                        PK
+                      </span>
+                    )}
+                  </div>
+                  {isFieldMapped(field.name) && (
+                    <CheckCircle className="w-5 h-5 text-green-600" />
+                  )}
+                </div>
+              </div>
+            ))}
           </div>
         </div>
-      </CardContent>
-    </>
-  );
-};
 
-export default FieldMappingStep;
+        {/* TO 테이블 필드들 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
+              <span className="text-green-600 font-bold text-sm">TO</span>
+            </div>
+            {toTable?.name} 필드들
+          </h3>
+          
+          <div className="space-y-2">
+            {toTable?.columns.map((field) => {
+              const mappedFromField = getMappedFromField(field.name);
+              return (
+                <div
+                  key={field.name}
+                  onDragOver={handleDragOver}
+                  onDrop={(e) => handleDrop(e, field)}
+                  className={`p-3 rounded-lg border-2 transition-all duration-200 ${
+                    mappedFromField
+                      ? "border-green-300 bg-green-50"
+                      : "border-gray-200 bg-gray-50 hover:border-green-300 hover:bg-green-25"
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-medium text-gray-900">{field.name}</div>
+                      <div className="text-sm text-muted-foreground">{field.type}</div>
+                      {field.primaryKey && (
+                        <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                          PK
+                        </span>
+                      )}
+                      {mappedFromField && (
+                        <div className="text-xs text-green-700 mt-1">
+                          ← {mappedFromField.name} ({mappedFromField.type})
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {mappedFromField && (
+                        <button
+                          onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
+                          className="text-red-500 hover:text-red-700"
+                        >
+                          <XCircle className="w-4 h-4" />
+                        </button>
+                      )}
+                      {mappedFromField && (
+                        <div>
+                          {fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
+                            <CheckCircle className="w-5 h-5 text-green-600" />
+                          ) : (
+                            <AlertCircle className="w-5 h-5 text-destructive" />
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* 버튼들 */}
+      <div className="flex justify-between">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          이전 단계
+        </button>
+        
+        <button
+          onClick={onSave}
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
+        >
+          <Save className="w-4 h-4" />
+          연결 설정 저장
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx

@@ -154,7 +154,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
   const getLogicalOperatorColor = (operator: string) => {
     switch (operator) {
       case "AND":
-        return "bg-blue-100 text-blue-800";
+        return "bg-primary/20 text-blue-800";
       case "OR":
         return "bg-orange-100 text-orange-800";
       default:
@@ -265,7 +265,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
 
               {/* 그룹 간 논리 연산자 선택 */}
               {actionGroups.length > 1 && (
-                <div className="rounded-md border bg-blue-50 p-3">
+                <div className="rounded-md border bg-accent p-3">
                   <div className="mb-2 flex items-center gap-2">
                     <h4 className="text-sm font-medium text-blue-900">그룹 간 실행 조건</h4>
                   </div>
@@ -643,9 +643,9 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
                             </div>
 
                             {/* 그룹 로직 설명 */}
-                            <div className="mt-4 rounded-md bg-blue-50 p-3">
+                            <div className="mt-4 rounded-md bg-accent p-3">
                               <div className="flex items-start gap-2">
-                                <AlertTriangle className="mt-0.5 h-4 w-4 text-blue-600" />
+                                <AlertTriangle className="mt-0.5 h-4 w-4 text-primary" />
                                 <div className="text-sm">
                                   <div className="font-medium text-blue-900">{group.logicalOperator} 조건 그룹</div>
                                   <div className="text-blue-700">

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

@@ -71,7 +71,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
             {/* 헤더 */}
             <div className="flex-shrink-0 px-4 py-2">
               <div className="flex items-center gap-3 border-b pb-2">
-                <Globe className="h-5 w-5 text-blue-600" />
+                <Globe className="h-5 w-5 text-primary" />
                 <h2 className="text-lg font-semibold">외부 호출 설정</h2>
               </div>
               <p className="text-muted-foreground mt-1 text-sm">
@@ -89,7 +89,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     value={state.relationshipName || ""}
                     onChange={(e) => actions.setRelationshipName(e.target.value)}
                     placeholder="외부호출 관계의 이름을 입력하세요"
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <div>
@@ -99,7 +99,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     onChange={(e) => actions.setDescription(e.target.value)}
                     placeholder="외부호출의 용도나 설명을 입력하세요"
                     rows={2}
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
               </div>

frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx

@@ -1,90 +1,70 @@
 "use client";
 
 import React from "react";
-import { Button } from "@/components/ui/button";
-import { CheckCircle, Circle, ArrowRight } from "lucide-react";
+import { Check, ArrowRight } from "lucide-react";
 
-// 타입 import
-import { StepProgressProps } from "../types/redesigned";
+interface StepProgressProps {
+  currentStep: 1 | 2 | 3;
+  onStepChange: (step: 1 | 2 | 3) => void;
+}
 
-/**
- * 📊 단계 진행 표시
- * - 현재 단계 하이라이트
- * - 완료된 단계 체크 표시
- * - 클릭으로 단계 이동
- */
-const StepProgress: React.FC<StepProgressProps> = ({ 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 <CheckCircle className="h-5 w-5 text-green-600" />;
-    }
-
-    return (
-      <Circle className={`h-5 w-5 ${status === "current" ? "text-primary fill-primary" : "text-muted-foreground"}`} />
-    );
-  };
-
-  const canClickStep = (stepNumber: number) => {
-    // 현재 단계이거나 완료된 단계만 클릭 가능
-    return stepNumber === currentStep || completedSteps.includes(stepNumber);
-  };
+const steps = [
+  { id: 1, title: "연결 선택", description: "FROM/TO 연결 설정" },
+  { id: 2, title: "테이블 선택", description: "소스/타겟 테이블 선택" },
+  { id: 3, title: "필드 매핑", description: "시각적 필드 매핑" },
+];
 
+export const StepProgress: React.FC<StepProgressProps> = ({
+  currentStep,
+  onStepChange,
+}) => {
   return (
-    <div className="mx-auto flex max-w-4xl items-center justify-between">
-      {steps.map((step, index) => (
-        <React.Fragment key={step.number}>
-          {/* 단계 */}
-          <div className="flex items-center">
-            <Button
-              variant="ghost"
-              className={`flex h-auto items-center gap-3 p-3 ${
-                canClickStep(step.number) ? "hover:bg-muted/50 cursor-pointer" : "cursor-default"
+    <div className="bg-white border-b border-gray-200 px-6 py-4">
+      <div className="flex items-center justify-between">
+        {steps.map((step, index) => (
+          <React.Fragment key={step.id}>
+            <div
+              className={`flex items-center gap-3 cursor-pointer transition-all duration-200 ${
+                step.id <= currentStep ? "opacity-100" : "opacity-50"
               }`}
-              onClick={() => canClickStep(step.number) && onStepClick(step.number as 1 | 2 | 3 | 4 | 5)}
-              disabled={!canClickStep(step.number)}
+              onClick={() => step.id <= currentStep && onStepChange(step.id as 1 | 2 | 3)}
             >
-              {/* 아이콘 */}
-              <div className="flex-shrink-0">{getStepIcon(step.number)}</div>
-
-              {/* 텍스트 */}
-              <div className="text-left">
-                <div
-                  className={`text-sm font-medium ${
-                    getStepStatus(step.number) === "current"
-                      ? "text-primary"
-                      : getStepStatus(step.number) === "completed"
-                        ? "text-foreground"
-                        : "text-muted-foreground"
-                  }`}
-                >
-                  {step.title}
-                </div>
-                <div className="text-muted-foreground text-xs">{step.description}</div>
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-200 ${
+                  step.id < currentStep
+                    ? "bg-green-500 text-white"
+                    : step.id === currentStep
+                    ? "bg-orange-500 text-white"
+                    : "bg-gray-200 text-muted-foreground"
+                }`}
+              >
+                {step.id < currentStep ? (
+                  <Check className="w-4 h-4" />
+                ) : (
+                  step.id
+                )}
               </div>
-            </Button>
-          </div>
-
-          {/* 화살표 (마지막 단계 제외) */}
-          {index < steps.length - 1 && <ArrowRight className="text-muted-foreground mx-2 h-4 w-4" />}
-        </React.Fragment>
-      ))}
+              
+              <div>
+                <h3 className={`text-sm font-medium ${
+                  step.id <= currentStep ? "text-gray-900" : "text-gray-500"
+                }`}>
+                  {step.title}
+                </h3>
+                <p className={`text-xs ${
+                  step.id <= currentStep ? "text-muted-foreground" : "text-gray-400"
+                }`}>
+                  {step.description}
+                </p>
+              </div>
+            </div>
+            
+            {index < steps.length - 1 && (
+              <ArrowRight className="w-4 h-4 text-gray-400 mx-4" />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
     </div>
   );
-};
-
-export default StepProgress;
+};

frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx

@@ -1,343 +1,212 @@
 "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";
+import React, { useState } from "react";
+import { Table, ArrowLeft, ArrowRight, CheckCircle, Database } from "lucide-react";
+import { Connection, TableInfo } from "../types/redesigned";
 
 interface TableStepProps {
   fromConnection?: Connection;
   toConnection?: Connection;
   fromTable?: TableInfo;
   toTable?: TableInfo;
-  onSelectTable: (type: "from" | "to", table: TableInfo) => void;
+  onFromTableChange: (table: TableInfo) => void;
+  onToTableChange: (table: TableInfo) => void;
   onNext: () => void;
   onBack: () => void;
 }
 
-/**
- * 📋 2단계: 테이블 선택
- * - FROM/TO 테이블 선택
- * - 테이블 검색 기능
- * - 컬럼 수 정보 표시
- */
-const TableStep: React.FC<TableStepProps> = ({
+// 임시 테이블 데이터
+const mockTables: TableInfo[] = [
+  {
+    name: "users",
+    schema: "public",
+    columns: [
+      { name: "id", type: "integer", nullable: false, primaryKey: true },
+      { name: "name", type: "varchar", nullable: false, primaryKey: false },
+      { name: "email", type: "varchar", nullable: true, primaryKey: false },
+      { name: "created_at", type: "timestamp", nullable: false, primaryKey: false }
+    ],
+    rowCount: 1250
+  },
+  {
+    name: "orders",
+    schema: "public", 
+    columns: [
+      { name: "id", type: "integer", nullable: false, primaryKey: true },
+      { name: "user_id", type: "integer", nullable: false, primaryKey: false, foreignKey: true },
+      { name: "product_name", type: "varchar", nullable: false, primaryKey: false },
+      { name: "amount", type: "decimal", nullable: false, primaryKey: false },
+      { name: "order_date", type: "timestamp", nullable: false, primaryKey: false }
+    ],
+    rowCount: 3420
+  },
+  {
+    name: "products",
+    schema: "public",
+    columns: [
+      { name: "id", type: "integer", nullable: false, primaryKey: true },
+      { name: "name", type: "varchar", nullable: false, primaryKey: false },
+      { name: "price", type: "decimal", nullable: false, primaryKey: false },
+      { name: "category", type: "varchar", nullable: true, primaryKey: false }
+    ],
+    rowCount: 156
+  }
+];
+
+export const TableStep: React.FC<TableStepProps> = ({
   fromConnection,
   toConnection,
   fromTable,
   toTable,
-  onSelectTable,
+  onFromTableChange,
+  onToTableChange,
   onNext,
   onBack,
 }) => {
-  const [fromTables, setFromTables] = useState<TableInfo[]>([]);
-  const [toTables, setToTables] = useState<TableInfo[]>([]);
-  const [fromSearch, setFromSearch] = useState("");
-  const [toSearch, setToSearch] = useState("");
-  const [isLoadingFrom, setIsLoadingFrom] = useState(false);
-  const [isLoadingTo, setIsLoadingTo] = useState(false);
-  const [tableColumnCounts, setTableColumnCounts] = useState<Record<string, number>>({});
+  const [selectedFromTable, setSelectedFromTable] = useState<string>(fromTable?.name || "");
+  const [selectedToTable, setSelectedToTable] = useState<string>(toTable?.name || "");
 
-  // 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<string, number> = {};
-          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<string, number> = {};
-          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);
+  const handleFromTableSelect = (tableName: string) => {
+    const table = mockTables.find(t => t.name === tableName);
     if (table) {
-      onSelectTable(type, table);
+      setSelectedFromTable(tableName);
+      onFromTableChange(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 (
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Table className="h-4 w-4" />
-          <span>{displayName}</span>
-        </div>
-        <Badge variant="outline" className="text-xs">
-          {columnCount !== undefined ? columnCount : table.columnCount || 0}개 컬럼
-        </Badge>
-      </div>
-    );
+  const handleToTableSelect = (tableName: string) => {
+    const table = mockTables.find(t => t.name === tableName);
+    if (table) {
+      setSelectedToTable(tableName);
+      onToTableChange(table);
+    }
   };
 
+  const canProceed = selectedFromTable && selectedToTable;
+
   return (
-    <>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Table className="h-5 w-5" />
-          2단계: 테이블 선택
-        </CardTitle>
-        <p className="text-muted-foreground text-sm">연결된 데이터베이스에서 소스와 대상 테이블을 선택하세요.</p>
-      </CardHeader>
+    <div className="space-y-8">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+          테이블 선택
+        </h2>
+        <p className="text-muted-foreground">
+          소스 테이블과 대상 테이블을 선택하세요
+        </p>
+      </div>
 
-      <CardContent className="max-h-[calc(100vh-400px)] min-h-[400px] space-y-6 overflow-y-auto">
-        {/* FROM 테이블 선택 */}
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h3 className="font-medium">FROM 테이블 (소스)</h3>
-            <Badge variant="outline" className="text-xs">
-              {fromConnection?.name}
-            </Badge>
+      {/* 연결 정보 표시 */}
+      <div className="bg-gray-50 rounded-lg p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Database className="w-5 h-5 text-primary" />
+            <span className="font-medium text-gray-900">{fromConnection?.name}</span>
+            <span className="text-sm text-gray-500">→</span>
+            <Database className="w-5 h-5 text-green-600" />
+            <span className="font-medium text-gray-900">{toConnection?.name}</span>
           </div>
-
-          {/* 검색 */}
-          <div className="relative">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-            <Input
-              placeholder="테이블 검색..."
-              value={fromSearch}
-              onChange={(e) => setFromSearch(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-
-          {/* 테이블 선택 */}
-          {isLoadingFrom ? (
-            <div className="flex items-center justify-center py-4">
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              <span className="text-sm">테이블 목록 로드 중...</span>
-            </div>
-          ) : (
-            <Select value={fromTable?.tableName || ""} onValueChange={(value) => handleTableSelect("from", value)}>
-              <SelectTrigger>
-                <SelectValue placeholder="소스 테이블을 선택하세요" />
-              </SelectTrigger>
-              <SelectContent>
-                {filteredFromTables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {renderTableItem(table, "from")}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          {fromTable && (
-            <div className="bg-muted/50 rounded-lg p-3">
-              <div className="mb-2 flex items-center justify-between">
-                <span className="font-medium">{fromTable.displayName || fromTable.tableName}</span>
-                <Badge variant="secondary">
-                  📊 {tableColumnCounts[`from_${fromTable.tableName}`] || fromTable.columnCount || 0}개 컬럼
-                </Badge>
-              </div>
-              {fromTable.description && <p className="text-muted-foreground text-xs">{fromTable.description}</p>}
-            </div>
-          )}
         </div>
+      </div>
 
-        {/* TO 테이블 선택 */}
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h3 className="font-medium">TO 테이블 (대상)</h3>
-            <Badge variant="outline" className="text-xs">
-              {toConnection?.name}
-            </Badge>
-          </div>
-
-          {/* 검색 */}
-          <div className="relative">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-            <Input
-              placeholder="테이블 검색..."
-              value={toSearch}
-              onChange={(e) => setToSearch(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-
-          {/* 테이블 선택 */}
-          {isLoadingTo ? (
-            <div className="flex items-center justify-center py-4">
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              <span className="text-sm">테이블 목록 로드 중...</span>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* FROM 테이블 */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold">1</span>
             </div>
-          ) : (
-            <Select value={toTable?.tableName || ""} onValueChange={(value) => handleTableSelect("to", value)}>
-              <SelectTrigger>
-                <SelectValue placeholder="대상 테이블을 선택하세요" />
-              </SelectTrigger>
-              <SelectContent>
-                {filteredToTables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {renderTableItem(table, "to")}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          {toTable && (
-            <div className="bg-muted/50 rounded-lg p-3">
-              <div className="mb-2 flex items-center justify-between">
-                <span className="font-medium">{toTable.displayName || toTable.tableName}</span>
-                <Badge variant="secondary">
-                  📊 {tableColumnCounts[`to_${toTable.tableName}`] || toTable.columnCount || 0}개 컬럼
-                </Badge>
-              </div>
-              {toTable.description && <p className="text-muted-foreground text-xs">{toTable.description}</p>}
-            </div>
-          )}
-        </div>
-
-        {/* 테이블 매핑 표시 */}
-        {fromTable && toTable && (
-          <div className="bg-primary/5 border-primary/20 rounded-lg border p-4">
-            <div className="flex items-center justify-center gap-4">
-              <div className="text-center">
-                <div className="font-medium">{fromTable.displayName || fromTable.tableName}</div>
-                <div className="text-muted-foreground text-xs">
-                  {tableColumnCounts[`from_${fromTable.tableName}`] || fromTable.columnCount || 0}개 컬럼
+            <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
+            <span className="text-sm text-gray-500">(FROM)</span>
+          </div>
+          
+          <div className="space-y-2">
+            {mockTables.map((table) => (
+              <div
+                key={table.name}
+                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
+                  selectedFromTable === table.name
+                    ? "border-primary bg-accent shadow-md"
+                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                }`}
+                onClick={() => handleFromTableSelect(table.name)}
+              >
+                <div className="flex items-center gap-3">
+                  <Table className="w-6 h-6 text-primary" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
+                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                  </div>
+                  {selectedFromTable === table.name && (
+                    <CheckCircle className="w-5 h-5 text-primary" />
+                  )}
                 </div>
               </div>
+            ))}
+          </div>
+        </div>
 
-              <ArrowRight className="text-primary h-5 w-5" />
-
-              <div className="text-center">
-                <div className="font-medium">{toTable.displayName || toTable.tableName}</div>
-                <div className="text-muted-foreground text-xs">
-                  {tableColumnCounts[`to_${toTable.tableName}`] || toTable.columnCount || 0}개 컬럼
+        {/* TO 테이블 */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+              <span className="text-green-600 font-bold">2</span>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900">대상 테이블</h3>
+            <span className="text-sm text-gray-500">(TO)</span>
+          </div>
+          
+          <div className="space-y-2">
+            {mockTables.map((table) => (
+              <div
+                key={table.name}
+                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
+                  selectedToTable === table.name
+                    ? "border-green-500 bg-green-50 shadow-md"
+                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                }`}
+                onClick={() => handleToTableSelect(table.name)}
+              >
+                <div className="flex items-center gap-3">
+                  <Table className="w-6 h-6 text-green-600" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
+                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                  </div>
+                  {selectedToTable === table.name && (
+                    <CheckCircle className="w-5 h-5 text-green-600" />
+                  )}
                 </div>
               </div>
-            </div>
-
-            <div className="mt-3 text-center">
-              <Badge variant="outline" className="text-primary">
-                💡 테이블 매핑: {fromTable.displayName || fromTable.tableName} →{" "}
-                {toTable.displayName || toTable.tableName}
-              </Badge>
-            </div>
+            ))}
           </div>
-        )}
-
-        {/* 네비게이션 버튼 */}
-        <div className="flex justify-between pt-4">
-          <Button variant="outline" onClick={onBack} className="flex items-center gap-2">
-            <ArrowLeft className="h-4 w-4" />
-            이전: 연결 선택
-          </Button>
-
-          <Button onClick={onNext} disabled={!canProceed} className="flex items-center gap-2">
-            다음: 컬럼 매핑
-            <ArrowRight className="h-4 w-4" />
-          </Button>
         </div>
-      </CardContent>
-    </>
+      </div>
+
+      {/* 버튼들 */}
+      <div className="flex justify-between">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          이전 단계
+        </button>
+        
+        <button
+          onClick={onNext}
+          disabled={!canProceed}
+          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+            canProceed
+              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+        >
+          다음 단계: 필드 매핑
+          <ArrowRight className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
   );
-};
-
-export default TableStep;
+};

frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx

@@ -128,9 +128,9 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
               : isMapped
                 ? "border-green-500 bg-green-50 shadow-sm"
                 : isBlockedDropTarget
-                  ? "border-red-400 bg-red-50 shadow-md"
+                  ? "border-red-400 bg-destructive/10 shadow-md"
                   : isDropTarget
-                    ? "border-blue-400 bg-blue-50 shadow-md"
+                    ? "border-blue-400 bg-accent shadow-md"
                     : "border-border hover:bg-muted/50 hover:shadow-sm"
         } `}
         draggable={type === "from" && !isMapped}

frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx

@@ -311,7 +311,7 @@ const FieldMappingCanvas: React.FC<FieldMappingCanvasProps> = ({
       </div>
 
       {/* 매핑 규칙 안내 */}
-      <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+      <div className="mt-4 rounded-lg border border-primary/20 bg-accent p-3">
         <h4 className="mb-2 text-sm font-medium">📋 매핑 규칙</h4>
         <div className="text-muted-foreground space-y-1 text-xs">
           <p>✅ 1:N 매핑 허용 (하나의 소스 필드를 여러 대상 필드에 매핑)</p>