메일 관리 작업 저장용 커밋

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

@@ -1,115 +1,146 @@
 "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 { CheckCircle, XCircle, AlertCircle, Database } from "lucide-react";
+import { MappingStats, FieldMapping } from "../types/redesigned";
 
-// 타입 import
-import { MappingInfoPanelProps } from "../types/redesigned";
-
-/**
- * 📊 매핑 정보 패널
- * - 실시간 매핑 통계
- * - 검증 상태 표시
- * - 예상 처리량 정보
- */
-const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({ stats, validationErrors }) => {
-  const errorCount = validationErrors.filter((e) => e.type === "error").length;
-  const warningCount = validationErrors.filter((e) => e.type === "warning").length;
+interface MappingInfoPanelProps {
+  mappingStats: MappingStats;
+  fieldMappings: FieldMapping[];
+  selectedMapping?: string;
+  onMappingSelect: (mappingId: string) => void;
+}
 
+export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
+  mappingStats,
+  fieldMappings,
+  selectedMapping,
+  onMappingSelect,
+}) => {
   return (
-    <Card>
-      <CardContent className="space-y-3 p-4">
-        {/* 매핑 통계 */}
-        <div className="grid grid-cols-2 gap-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">총 매핑:</span>
-            <Badge variant="outline">{stats.totalMappings}개</Badge>
+    <div className="p-6">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+        매핑 정보
+      </h2>
+
+      {/* 통계 카드 */}
+      <div className="grid grid-cols-2 gap-3 mb-6">
+        <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+          <div className="flex items-center gap-2">
+            <CheckCircle className="w-4 h-4 text-green-600" />
+            <span className="text-sm font-medium text-green-800">유효한 매핑</span>
           </div>
-
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">유효한 매핑:</span>
-            <Badge variant="outline" className="text-green-600">
-              <CheckCircle className="mr-1 h-3 w-3" />
-              {stats.validMappings}개
-            </Badge>
+          <div className="text-2xl font-bold text-green-900 mt-1">
+            {mappingStats.validMappings}
           </div>
-
-          {stats.invalidMappings > 0 && (
-            <div className="flex justify-between">
-              <span className="text-muted-foreground">타입 불일치:</span>
-              <Badge variant="outline" className="text-orange-600">
-                <AlertTriangle className="mr-1 h-3 w-3" />
-                {stats.invalidMappings}개
-              </Badge>
-            </div>
-          )}
-
-          {stats.missingRequiredFields > 0 && (
-            <div className="flex justify-between">
-              <span className="text-muted-foreground">필수 필드 누락:</span>
-              <Badge variant="outline" className="text-red-600">
-                <XCircle className="mr-1 h-3 w-3" />
-                {stats.missingRequiredFields}개
-              </Badge>
-            </div>
-          )}
         </div>
 
-        {/* 액션 정보 */}
-        {stats.totalMappings > 0 && (
-          <div className="space-y-2 border-t pt-2">
-            <div className="flex justify-between text-sm">
-              <span className="text-muted-foreground">액션:</span>
-              <Badge variant="secondary">{stats.actionType}</Badge>
-            </div>
+        <div className="bg-red-50 p-3 rounded-lg border border-red-200">
+          <div className="flex items-center gap-2">
+            <XCircle className="w-4 h-4 text-red-600" />
+            <span className="text-sm font-medium text-red-800">오류 매핑</span>
+          </div>
+          <div className="text-2xl font-bold text-red-900 mt-1">
+            {mappingStats.invalidMappings}
+          </div>
+        </div>
 
-            {stats.estimatedRows > 0 && (
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">예상 처리량:</span>
-                <span className="font-medium">~{stats.estimatedRows.toLocaleString()} rows</span>
+        <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
+          <div className="flex items-center gap-2">
+            <Database className="w-4 h-4 text-blue-600" />
+            <span className="text-sm font-medium text-blue-800">총 매핑</span>
+          </div>
+          <div className="text-2xl font-bold text-blue-900 mt-1">
+            {mappingStats.totalMappings}
+          </div>
+        </div>
+
+        <div className="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 text-yellow-600" />
+            <span className="text-sm font-medium text-yellow-800">누락 필드</span>
+          </div>
+          <div className="text-2xl font-bold text-yellow-900 mt-1">
+            {mappingStats.missingRequiredFields}
+          </div>
+        </div>
+      </div>
+
+      {/* 매핑 목록 */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-gray-700 mb-2">
+          필드 매핑 목록
+        </h3>
+        
+        {fieldMappings.length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            <Database className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">아직 매핑이 없습니다</p>
+            <p className="text-xs">3단계에서 필드를 매핑하세요</p>
+          </div>
+        ) : (
+          <div className="space-y-1 max-h-64 overflow-y-auto">
+            {fieldMappings.map((mapping) => (
+              <div
+                key={mapping.id}
+                className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
+                  selectedMapping === mapping.id
+                    ? "border-orange-500 bg-orange-50"
+                    : mapping.isValid
+                    ? "border-green-200 bg-green-50 hover:border-green-300"
+                    : "border-red-200 bg-red-50 hover:border-red-300"
+                }`}
+                onClick={() => onMappingSelect(mapping.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-gray-900 truncate">
+                        {mapping.fromField.name}
+                      </span>
+                      <span className="text-gray-400">→</span>
+                      <span className="text-sm font-medium text-gray-900 truncate">
+                        {mapping.toField.name}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className={`text-xs px-2 py-1 rounded ${
+                        mapping.fromField.type === mapping.toField.type
+                          ? "bg-green-100 text-green-800"
+                          : "bg-yellow-100 text-yellow-800"
+                      }`}>
+                        {mapping.fromField.type}
+                      </span>
+                      <span className="text-gray-400">→</span>
+                      <span className={`text-xs px-2 py-1 rounded ${
+                        mapping.fromField.type === mapping.toField.type
+                          ? "bg-green-100 text-green-800"
+                          : "bg-yellow-100 text-yellow-800"
+                      }`}>
+                        {mapping.toField.type}
+                      </span>
+                    </div>
+                  </div>
+                  
+                  <div className="ml-2">
+                    {mapping.isValid ? (
+                      <CheckCircle className="w-4 h-4 text-green-600" />
+                    ) : (
+                      <XCircle className="w-4 h-4 text-red-600" />
+                    )}
+                  </div>
+                </div>
+                
+                {mapping.validationMessage && (
+                  <p className="text-xs text-red-600 mt-1">
+                    {mapping.validationMessage}
+                  </p>
+                )}
               </div>
-            )}
+            ))}
           </div>
         )}
-
-        {/* 검증 오류 요약 */}
-        {validationErrors.length > 0 && (
-          <div className="border-t pt-2">
-            <div className="flex items-center gap-2 text-sm">
-              <Info className="h-4 w-4 text-blue-500" />
-              <span className="text-muted-foreground">검증 결과:</span>
-            </div>
-            <div className="mt-2 space-y-1">
-              {errorCount > 0 && (
-                <Badge variant="destructive" className="text-xs">
-                  오류 {errorCount}개
-                </Badge>
-              )}
-              {warningCount > 0 && (
-                <Badge variant="outline" className="ml-1 text-xs text-orange-600">
-                  경고 {warningCount}개
-                </Badge>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* 빈 상태 */}
-        {stats.totalMappings === 0 && (
-          <div className="text-muted-foreground py-4 text-center text-sm">
-            <Database className="mx-auto mb-2 h-8 w-8 opacity-50" />
-            <p>아직 매핑된 필드가 없습니다.</p>
-            <p className="mt-1 text-xs">우측에서 연결을 설정해주세요.</p>
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
-};
-
-// Database 아이콘 import 추가
-import { Database } from "lucide-react";
-
-export default MappingInfoPanel;
+};