생성된 관계도 확인

frontend/components/dataflow/DataFlowList.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Network, Database, Calendar, User } from "lucide-react";
+import { DataFlowAPI, DataFlowDiagram } from "@/lib/api/dataflow";
+import { toast } from "sonner";
+
+interface DataFlowListProps {
+  onDiagramSelect: (diagram: DataFlowDiagram) => void;
+  selectedDiagram: DataFlowDiagram | null;
+  onDesignDiagram: (diagram: DataFlowDiagram | null) => void;
+}
+
+export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesignDiagram }: DataFlowListProps) {
+  const [diagrams, setDiagrams] = useState<DataFlowDiagram[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // 관계도 목록 로드
+  useEffect(() => {
+    let abort = false;
+    const load = async () => {
+      try {
+        setLoading(true);
+        const response = await DataFlowAPI.getDataFlowDiagrams(currentPage, 20, searchTerm);
+        if (abort) return;
+
+        setDiagrams(response.diagrams || []);
+        setTotal(response.total || 0);
+        setTotalPages(Math.max(1, Math.ceil((response.total || 0) / 20)));
+      } catch (error) {
+        console.error("관계도 목록 조회 실패", error);
+        setDiagrams([]);
+        setTotalPages(1);
+        setTotal(0);
+        toast.error("관계도 목록을 불러오는데 실패했습니다.");
+      } finally {
+        if (!abort) setLoading(false);
+      }
+    };
+    load();
+    return () => {
+      abort = true;
+    };
+  }, [currentPage, searchTerm]);
+
+  // 관계도 목록 다시 로드
+  const reloadDiagrams = async () => {
+    try {
+      setLoading(true);
+      const response = await DataFlowAPI.getDataFlowDiagrams(currentPage, 20, searchTerm);
+      setDiagrams(response.diagrams || []);
+      setTotal(response.total || 0);
+      setTotalPages(Math.max(1, Math.ceil((response.total || 0) / 20)));
+    } catch (error) {
+      console.error("관계도 목록 조회 실패", error);
+      toast.error("관계도 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDiagramSelect = (diagram: DataFlowDiagram) => {
+    onDiagramSelect(diagram);
+  };
+
+  const handleEdit = (diagram: DataFlowDiagram) => {
+    // 편집 모달 열기
+    console.log("편집:", diagram);
+  };
+
+  const handleDelete = (diagram: DataFlowDiagram) => {
+    if (confirm(`"${diagram.diagramName}" 관계도를 삭제하시겠습니까?`)) {
+      // 삭제 API 호출
+      console.log("삭제:", diagram);
+      toast.info("삭제 기능은 아직 구현되지 않았습니다.");
+    }
+  };
+
+  const handleCopy = (diagram: DataFlowDiagram) => {
+    console.log("복사:", diagram);
+    toast.info("복사 기능은 아직 구현되지 않았습니다.");
+  };
+
+  const handleView = (diagram: DataFlowDiagram) => {
+    // 미리보기 모달 열기
+    console.log("미리보기:", diagram);
+    toast.info("미리보기 기능은 아직 구현되지 않았습니다.");
+  };
+
+  // 연결 타입에 따른 배지 색상
+  const getConnectionTypeBadge = (connectionType: string) => {
+    switch (connectionType) {
+      case "simple-key":
+        return (
+          <Badge variant="outline" className="border-blue-200 bg-blue-50 text-blue-700">
+            단순 키값
+          </Badge>
+        );
+      case "data-save":
+        return (
+          <Badge variant="outline" className="border-green-200 bg-green-50 text-green-700">
+            데이터 저장
+          </Badge>
+        );
+      case "external-call":
+        return (
+          <Badge variant="outline" className="border-purple-200 bg-purple-50 text-purple-700">
+            외부 호출
+          </Badge>
+        );
+      default:
+        return <Badge variant="outline">{connectionType}</Badge>;
+    }
+  };
+
+  // 관계 타입에 따른 배지 색상
+  const getRelationshipTypeBadge = (relationshipType: string) => {
+    switch (relationshipType) {
+      case "one-to-one":
+        return (
+          <Badge variant="secondary" className="bg-gray-100 text-gray-700">
+            1:1
+          </Badge>
+        );
+      case "one-to-many":
+        return (
+          <Badge variant="secondary" className="bg-orange-100 text-orange-700">
+            1:N
+          </Badge>
+        );
+      case "many-to-one":
+        return (
+          <Badge variant="secondary" className="bg-yellow-100 text-yellow-700">
+            N:1
+          </Badge>
+        );
+      case "many-to-many":
+        return (
+          <Badge variant="secondary" className="bg-red-100 text-red-700">
+            N:N
+          </Badge>
+        );
+      default:
+        return <Badge variant="secondary">{relationshipType}</Badge>;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="text-gray-500">로딩 중...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 검색 및 필터 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <div className="relative">
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+            <Input
+              placeholder="관계도명, 테이블명으로 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-80 pl-10"
+            />
+          </div>
+        </div>
+        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => onDesignDiagram(null)}>
+          <Plus className="mr-2 h-4 w-4" />새 관계도 생성
+        </Button>
+      </div>
+
+      {/* 관계도 목록 테이블 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <span className="flex items-center">
+              <Network className="mr-2 h-5 w-5" />
+              데이터 흐름 관계도 ({total})
+            </span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>관계도명</TableHead>
+                <TableHead>연결 타입</TableHead>
+                <TableHead>관계 타입</TableHead>
+                <TableHead>테이블 수</TableHead>
+                <TableHead>관계 수</TableHead>
+                <TableHead>최근 수정</TableHead>
+                <TableHead>작업</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {diagrams.map((diagram) => (
+                <TableRow
+                  key={diagram.diagramName}
+                  className={`cursor-pointer hover:bg-gray-50 ${
+                    selectedDiagram?.diagramName === diagram.diagramName ? "border-blue-200 bg-blue-50" : ""
+                  }`}
+                  onClick={() => handleDiagramSelect(diagram)}
+                >
+                  <TableCell>
+                    <div>
+                      <div className="flex items-center font-medium text-gray-900">
+                        <Database className="mr-2 h-4 w-4 text-gray-500" />
+                        {diagram.diagramName}
+                      </div>
+                      <div className="mt-1 text-sm text-gray-500">
+                        테이블: {diagram.tables.slice(0, 3).join(", ")}
+                        {diagram.tables.length > 3 && ` 외 ${diagram.tables.length - 3}개`}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>{getConnectionTypeBadge(diagram.connectionType)}</TableCell>
+                  <TableCell>{getRelationshipTypeBadge(diagram.relationshipType)}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center">
+                      <Database className="mr-1 h-3 w-3 text-gray-400" />
+                      {diagram.tableCount}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center">
+                      <Network className="mr-1 h-3 w-3 text-gray-400" />
+                      {diagram.relationshipCount}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center text-sm text-gray-600">
+                      <Calendar className="mr-1 h-3 w-3 text-gray-400" />
+                      {new Date(diagram.updatedAt).toLocaleDateString()}
+                    </div>
+                    <div className="flex items-center text-xs text-gray-400">
+                      <User className="mr-1 h-3 w-3" />
+                      {diagram.updatedBy}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => onDesignDiagram(diagram)}>
+                          <Network className="mr-2 h-4 w-4" />
+                          관계도 설계
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleView(diagram)}>
+                          <Eye className="mr-2 h-4 w-4" />
+                          미리보기
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleEdit(diagram)}>
+                          <Edit className="mr-2 h-4 w-4" />
+                          편집
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleCopy(diagram)}>
+                          <Copy className="mr-2 h-4 w-4" />
+                          복사
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleDelete(diagram)} className="text-red-600">
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          삭제
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          {diagrams.length === 0 && (
+            <div className="py-8 text-center text-gray-500">
+              <Network className="mx-auto mb-4 h-12 w-12 text-gray-300" />
+              <div className="mb-2 text-lg font-medium">관계도가 없습니다</div>
+              <div className="text-sm">새 관계도를 생성하여 테이블 간 데이터 관계를 설정해보세요.</div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 페이지네이션 */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+            disabled={currentPage === 1}
+          >
+            이전
+          </Button>
+          <span className="text-sm text-gray-600">
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+            disabled={currentPage === totalPages}
+          >
+            다음
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}